Cascading Style Sheets

Cascading Style Sheets (CSS1) are one of the features introduced by the World Wide Web Consortium (W3C) in its efforts to give web page designers a way to control the look and feel of web pages while ensuring that Web pages can still be viewed using any browser that is at least HTML 4 compliant.

What the W3C did was to separate the presentation of a web page from its content. Web authors would put their material inside a web page using standard HTML tags. Then, either at the top of the web page or, preferably, in a separate file that is linked to the web page, the style or presentation the web page is provided.

For example, my web pages contains various HTML tags like <cite> or <h1>. Any browser that understands standard HTML will display those tags in the browser's own way. However, the way I want those elements to appear is specified in a separate style file which specifies that <h1> should be a sans-serif font displayed in blue, or that <cite> should be displayed in a bold font.

So, what is the big deal? You could do that by using the <font> tag also. Sure you could; unless you decided to change it. Suppose I decided that <h1> would look better if I changed the font. If I had used individual <font> tags to change how my <h1> tags looked like, I would have to go through all my web pages, changing every <font> tag and possibly missing some. But, using style sheets, all I need to do is change the font specifier in my style sheet for <h1>, and the change will be automatically reflected in all my <h1> tags instantly and consistently.

The nicest thing about style sheets is that, like HTML, it is downgradable. If your browser doesn't support CSS1, the only thing you will see is my (unadorned) web pages. It won't look as nice, but you can still see them. I have encountered pages where, because I have turned off image loading, the text and background became the same colour (the background image would have made the text stand out). This would not have happened if a properly designed style sheet had been used in the design.

So, if you design web pages, my advice is: make your web pages using standard HTML tags only. Put all your other requirements (like font size, colour, margins, spacing, etc.) in a style sheet. Style sheet commands can be put into individual web pages but only for very special (one-off) presentations.

If web pages are done this way, they will have a consistent look-and-feel since they will are refer to one standard style sheet. And if readers happen to use browsers that don't support styles sheets, they will still be able to see your page properly formatted. Jakob Nielsen has written an article in his Alertbox column on the effective use of style sheets which you should read for more advice on style sheets.

For more information on style sheets, I recommend you to take a look at the Web Design Group's CSS Guide and the W3C's Style Sheet web pages. One book that I also recommend is Cascading Style Sheets: Designing for the Web by Håkon Wium Lie and Bert Bos (they are the authorities behind CSS1).

[Home Page][Web Design Philosophy[Previous][Next]