Cascading Style Sheets

Cascading Style Sheets (acronym: CSS) are used to layout HTML pages. Within HTML it is possible to layout web pages in quite a nice way. To make that possible, HTML was extended and special tags like for instance the <FONT> tag were added to the language. The attributes of this tag made it possible to change the font type, the font color and the font size amongst others. Combined with the tags to create bold, italic and underlined text or a combination of these and other presentation tags it became possible to manipulate the appearance of text on a page.

The problem with these developments was that HTML was extended to fullfill needs it was never intended to be used for. HTML is a language to make it possible to transfer documents across the World Wide Web according to a certain standard. This standard included the possibility to make hyperlinks to other documents. The way the document is presented (and appears in the browser for instance) is irrelevant at that point. Text-based browsers (yes... they do exist: Lynx and Links for instance) have no possibility to render a retrieved page using special fonts etc.

In the early days of the World Wide Web most of the systems connected to the Internet were UNIX-based systems. These systems were accessed through terminals and these could only handle text. It was impossible to display images and therefore these only became important when it became possible to use graphical Web browsers. HTML is to transport information and the way this information has to displayed is something that should be decided at another level, for instance by using Cascading Style Sheets.

This is not just my humble opinion, because in the HTML 4.0 specification many presenatation tags are marked as deprecated. Examples of depricated tags are: <B> (bold), <I> (italic), <U> (underline), <CENTER> and <FONT>. The reason that these tags are depricated is that these text effects also can be reached by making use of style sheets containing the proper rules. It is recommended to web authors not to use these depricated tags anymore, but to make use of style sheets. Deprecated tags may be removed from the official HTML specification and the result of that is, that a browser is not obliged anymore to support these tags.

Most browsers still will support these tags, even if they are removed from the HTML specification, because the mechanism to render these tags properly already is there, but a future browser might not understand these tags. Obviously this is not a bad thing, because if the browser is written well it will ignore the tags it doesn't know and therefore not crash, but the page will not be displayed in the way the author intended to. The information in the page will still be there and shown, since it still is accessible to the browser if the HTML is syntactically correct.

Cascading Style Sheets provide rules for a browser on how to render a certain tag. Using CSS it possible to make certain "groups" of tags and make a rules that all tags matching a certain group should be treated and rendered in a certain way. If the author decides that the way a certain group is displayed has to be changed he just changes the rule and the presentation of all tags matching that rule is changed. For instance: if a rule says that all header texts should be red and the author wants to change that to blue, he only has to change the rule rather than change all headers separately. This is one of the great advantages of Cascading Style Sheets.

Cascading Style Sheets have more advantages. It is possible to have the style sheet rules in one or more external files. By convention these external files have the extension .css, but it is allowed to have a name with another extension or no extension at all. Within the HTML file that uses the style sheet rules in the external file a tag is placed to link to the external CSS file. Additional attributes specify that the external file should be treated as a Cascading Style Sheets file. This might not seem an advantage, but if you think about it for a second, it won't take you long to understand that more than one HTML file can be linked to an external CSS file. This make it possible to have all the rules for a complete site in one central place and thus makes it much easier to maintain that site. By changing one rule the rule will apply to all documents linked to that file; so to a whole site if all the HTML sites within that site are linked to that CSS file.

But the fact that there is a central style sheet file can raise the following issue: There is a rule in the CSS file that tells the browser to display text within for instance a <h3> in red, which is fine for all pages that use that stylesheet except for one. The rest of the rules in the external CSS file apply to all HTML files which use the CSS file, even the file with the exception for the <h3> tag. You don't want to have a seperate CSS file for the exceptional HTML file, because than you'll lose the advantage that all the rules are in one place. This is the part where the cascading part in the name of CSS will show its benefit.

A great advantage of the style sheets is that they are cascading. You might wonder: "What does that exactly mean?" It means that it is allowed to have more style sheets to be used within one single HTML file. It is allowed to link a HTML file to more external CSS files and it is even allowed to embed style sheets within that same HTML file using the <style>. It may look to you that this can cause conflicts, because the author may lose his overview and create more than one rule for a certain tag. For instance: Style sheet 1 says that <h3> should be displayed red, style sheet 2 says that <h3> should be displayed green and in the HTML file itself there is a rule that says that that tag should be displayed blue.

This will not raise any conflict, because the browser should apply the last matched rule and display the <h3> tag blue. This is under the assumption that style sheet 1 was loaded first, then style sheet 2 and finally the rule was found for the third time within the internal style sheet of the HTML file. And that is the meaning of cascading, because the style sheets are cascaded upon each other. Therefore the order in which the style sheets are loaded is very important. If a rule that already was defined is matched again, the new match will override the old rule.

It is even possible for a user to have his own local style sheet that overrides the rules from the page the user is accessing. This is only possible if the user's browser supports this feature. This may look like a big disadvantage, because the user can change the layout and the way the author wanted the page to be displayed, but this user might be someone that has trouble reading text of a certain size or font. The author of that page does not know that and because of this technology the author does not have to know that, because the user himself can adjust the presentation of the information of that page to his personal taste.

So the issue raised earlier in which an exceptional rule needs to be created for the <h3> can be solved by having a separate rule in the exceptional HTML file (or in another external CSS file if desired). The important thing here is that that rule has to be loaded after the general external CSS file is loaded. The cascading part will make sure that the general is overriden for the exceptional situation.

This problem could also be solved in another way, but this solution also explaines why the sheets are called cascading. Another solution for this problem is the following: It is possible to have different classes of one tag or to give different ID's to a tag. This makes it possible to have different rules for on tag. You can have a rule for class A of a certain tag and to have a different rule for class B of that same tag. The same applies to ID's.

The problem with Cascading Style Sheets is that due to misinterpretations of the specifications not all browsers fully support them or support them in a wrong way. Netscape 4.0 for instance doesn't understand them properly. Even Netscape 4.7x has problems when the style sheets become too complex. This is much better in Netscape 6.0. Internet Explorer 4.0 and later and Opera 5.0 and later have little or no problems with rendering pages that use style sheets. All old browsers like version 3 of all mentioned browsers and earlier don't support style sheets, because the technique was not introduced yet when these browsers were released.

Since the latest versions of all popular browsers support CSS it may be wise to use style sheets to layout the content of your web pages. It makes the pages more flexible and much easier to maintain. Combined with all the other benefits mentioned before the only logical conclusion has to be for any web author to use style sheets from now on.

Links to CSS Tutorials

Contact the author: Send an electronic mail to: pajtroon@dds.nl.
Peter's ICQ Number is: #3900785.

This page: Copyright © 2002 - 2005 Peter A. J. Troon

Note: This page is part of the Peter Troon Site.