CSS Tutorial :: Introduction

About CSS

Why is CSS so important?

Often we need the pages of our websites to have a common style: same background, font family, font size, font style, font color, etc... To achieve this, in the old times of internet the required attributes were included in the very HTML elements, creating confusion and subtracting the semantic meaning of HTML. Cascade Style Sheets (CSS) allow to specify the desired styles in a CSS file (a mere text file saved with .css extension, that is known as stylesheet). In every page where it is required, this CSS stylesheet can be included with a single line of code, without having to repeat the CSS instructions in every page. When a page requires exclusive styles, then the required CSS commands are included in the header of that page, and if the style applies only to certain elements of the page, the we would use which is called inline styles. This cascade-like way of organizing the hierarchy of the CSS commands in a website is what gives its apparently odd name to this technique. In general terms, commands that are placed in inline styles have their priority set to maximum, while the commands placed in external stylesheets are the opposite, being the commands placed in the header the ones with average priority (greater than external stylesheets and lower than inline styles). This feature of CSS is known as specificity and is intended to allow the best possible organization scheme in a website styling. Often, unexperienced programmers have trouble understanding specificity, and this causes conflicts in the CSS code that prevent to work in a proper way commands that in theory should be working.

Stylesheets have many advantages over the traditional (and now deprecated) HTML attributes used for presentational purposes. Note that the purpose of CSS is to separate the markup language HTML from the styling language CSS. This allows to have a far more readable code in the webpages, and allows to change the style of a webpage or entire website without having to mess with the markup code, thus avoiding to break it accidentally, which could happen when trying to do styling modifications in a complex page where both semantic and presentational HTML coexist. One of the most evident advantages is the fact that a single stylesheet can be shared by many documents, and when making changes in this stylesheet, these will automatically apply to every page. CSS also introduces improvements over certain aspects that were not modifiable before, for example, defining the margins of a paragraph or spacing between characters. Stylesheet give HTML capabilities that it did not had before, such as:

Diverse measuring units: pixels, picas, points, milimeters, centimeters, inches, percentages and measure units based on font sizes. These are available for the main HTML elements, such as tables, fonts, borders and in general, the elements that had attributes such as size, width or height.

Positioning of text blocks in any part of the HTML document, since it is possible to define in diverse units the position of a text block.

Better control over fonts, which is needed for other related technologies, such as dynamic fonts.

The possibility of changing the features of a stylesheet by using web programming languages, either client-side, such as JavaScript and VBScript, or server-side, such as PHP.

About CSS

Entering the world of CSS from the past

In this tutorial you will learn why a well structured (X)HTML is important when working with CSS, and how to add better semantics to web documents, making easier the work of the developers. In these chapters we will see some of the most common properties of stylesheet following the CSS2 convention, which is simply the second version of Cascade Style Sheets. The third version of CSS includes support for new technologies, but we will not see about these in this tutorial, since it is intended only for beginners learning the fundamental techniques.

The initial World Wide Web (WWW) was not much more than a great number of interlinked documents that used HTML to add basic format and structure. However, when the WWW increased its popularity, web developers started to develop an aesthetical sense for their documents, and thus HTML started to be used for presentational purposes as well. For example, instead of using heading elements for creating text headers in the documents, people would prefer to use font and bold elements to make they look better. Surely, the users would be happy with that, but the problem is that automated parsers, such as search engines or devices for visually-impaired persons, would not recognize such artifice as a heading, causing this the corresponding inconveniences (deficient search engine optimization (SEO) and accessibility for visually-impaired users).

A specially remarkable feature of the non-semantic web is the use of tables for creating a webpage layout. People would also use elements such as blockquote to add break lines, instead of indicating quotes. The clumsy support that browsers have carried along years has brought the controversy about the usage of tables for creating layouts to current days, despite existing other ways to reach that purpose. It is actually a more subjective question that many think; while creating a layout with tables is not really great, because of the limitations that it imposes, this method really would not create a real problem for SEO or accessibility. Many unexperienced developers that are beginning to create simple websites could still make use of this method to create a layout; the key is not to get stuck with only a way of doing things. When I had to update my hundreds of archaic pages to newer programming standards, I did not bother to change the table layout, so I today own hundreds of these pages, but my new pages are all entirely made with CSS, and yes, they look better, but I still use tables to layout forms. There is no need to get fanatic or obsessed in this topic; truth is that users care much more about website content than about the underlying methodologies of the developers, and that the exigences of browsers are far lesser than the ones set by the W3C validators.

Around the year 2000, the WWW had lost already its semantic meaning. HTML, intended from the beginning as a simple markup language, was "ornamented" with lots of presentational elements that made the code nearly impossible to understand in complex documents. This led to the emergence of those What You See Is What You Get (WYSIWYG) editors that allowed the developers to "flee" from the chaotic code. But this was no solution; WYSIWYG editors added their overly complex and bloated code to the webpages, while the developer, concentrating only on the visual aspect, was not aware of the "monster" that the WYSIWYG software was creating at the same time... webpages that were practically impossible to properly maintain, due to the bloated and unindented source code. Editing the source code manually would even be a risk to break it. It was necessary to do something to address this problem.

Here is where CSS takes all its sense. Separating the visual aspect of a webpage from its content structure allows to easily modify and keep long-term maintenance in the documents. The HTML elements used for presentational purposes were deprecated and replaced by CSS equivalents that had, in many cases, improved features. The source code could be made easy again and developers started to feel interest again about creating and managing their own source code. Semantics returned to documents. Now it was possible to use CSS to create, for example, a H1 heading with any kind of font style, font size, font weight, font color, etc..., so there was no need anymore to make use of non-semantic tricks to have good-looking headings in the documents. It was possible to create lists of elements that were not presented as a series of bullets and quotes could be used without the associated style. Developers started to use (X)HTML elements because of their meaning instead of because of their visual appearance.

Semantic code allows the developers several important benefits. Semantic pages are easier to work with. For example, if we want to change a quote on a document, it is easy to find in the code all the blockquote elements; but if we use instead generic paragraphs to display quotes, then it would be harder, since we would have to differentiate between paragraphs that are used for quotes and those used for other kinds of text. Semantic code is easier to understand not only for persons, but also for software and devices. In the context of CSS, the most important is that semantic code provides an easy way to approach the elements that we desire to apply style. We add structure to a document, hence creating an underlying framework on which build the visual aspects, directly applying style to elements without need to add another identifiers, thus avoiding unnecesary code.