Is it worth learning and using CSS styles for your web pages?

On this page: As you may know, Lois Wakeman was a regular contributor to the INETPUB forum on CompuServe. A 2001 thread on the subject of using styles prompted her to think more about this subject. This article is really directed at web authors who still aren't sure if they should invest some time in learning to use styles for their pages, though anyone may find the links and discussion of pros and cons helpful.

Note: this article has been largely superceded by browser improvements and better techniques devised by CSS gurus, but I leave it here for historical curiosity, with some minor updates to make it more relevant.

Lois writes, in January 2001, 'A week or two back, a member who I shall call Jim posed a question in the forum:

"I haven't started using style sheets, because I've heard that CSS doesn't work properly or consistently across browsers. I'd like to start using HTML 4 properly, but not if it compromises my pages. And what about older browsers that don't support HTML 4 - just what would I see using such a browser with style sheets? So, should I make an effort to use CSS or not?"

He raises some interesting points, which I'll try to answer here. You can also read an optional introduction to styles in web pages.

Why don't we all use styles now?

Although styles have now been around for a many years, support in browsers is still less than perfect - though not nearly as bad as when the original question was posed, as Jim hints. At that time, I said "Of the most commonly used, the best support is found in Opera 5+, Internet Explorer 4+, Netscape 6, and Mozilla. Netscape 3 and text browsers like Lynx ignore styles altogether, and support in IE3 and NS4 is flaky, to be polite."

Unless you have some incentive to use them, it's just another technique to learn, and yet another thing to test in your web pages. People are used to kludging their pages, and while this still works, why bother to change?

Browser support for styles

Does it matter that some browsers don't show styles at all, or even worse, show them wrongly? On the whole, no, with three qualifications:

Firstly, most people will be using an OK browser. For example, these are the figures for visitors to this site this week and a week almost three and five years ago:

figures for January 2001figures for November 2003figures for January 2008
browserpercentage of visitorsbrowserpercentage of visitorsbrowserpercentage of visitors
MSIE 5.x56MSIE 5.x11MS Internet Explorer79.4
MSIE 4.x11MSIE 4.x< 1Firefox12.1
AOL 4.x-AOL 4.x15Unknown2.6
AOL 5.x-AOL 5.x11Safari2.1
NS 64NS 65Opera1.9
NS 4.x10NS 4.x41Mozilla1.2
NS 3.x9NS 3.x1Netscape0.1
Opera-Opera< 1BonEcho (Firefox 2.0 development)0.1
Unknown14Unknown26LibWWW, K-Meleon, Others<0.01

The newest figures aren't strictly comparable as I use a different stats package now - but you get the general idea.

Unknown is a surprisingly high figure for the earlier dates. Some will be search engine robots, others might be Safari, K-meleon, Amaya, screen readers etc, and some are probably obscure variants of Netscape and Explorer. I estimate that over 90% of my visitors, and probably a lot more, could see styles in 2003, and almost all can today.

Secondly, you can keep to those parts of the style specification that work (if not brilliantly in all cases) in all styles-capable browsers. Practically, this means setting font, colour, spacing and margins. If you decide to go for very complex layouts and positioning, or choose certain rules (like inline DIVs to simulate tables), then you will cause problems for some of your visitors.

Thirdly, pages can be designed for "graceful degradation". If visitors turn styles off, or have a browser (e.g. Lynx) that ignores styles, the page is still readable. This answers Jim's question about how using styles might compromise his pages - it shouldn't.

Graceful degradation can be accomplished in two ways:

  1. Replicate the styles as closely as possible using body attributes and font tags, paragraph alignment etc. Browsers that can see styles will use them (or possibly as well - I can't test this); browsers that can't will use the HTML presentation methods.
  2. Use the elements on the page so they still make sense without any special presentation.

Approach 2 makes for smaller files and quicker page development, and is my preferred option. You could set basic colours in the body tag; example for this page:

<body bgcolor="#FFFFFF" text="#000000" link="#0000CC" vlink="#990099" alink="#CC3333">

but this is not valid for the current standards.

I once saw a site where the background colour was set to navy blue in the body tag, and the text colours were only set in the style sheet. In NS3, a page with black text and blue/purple links on a navy background is not very graceful at all.

If you don't have a copy of Lynx, try visiting some sites once you have turned off styles in your browser, and see what happens! (See my accessibility page if you need instructions on how to do this.)

Why you should think about using styles

In the interests of future-proofing your pages, it's a good idea to get used to conforming to the current standards when you can. HTML 5 has just been issued as a draft (January 2008); the current standard is XHTML 1, and HTML 4 has only recently been superseded, though browsers - and more especially reactionary web authors - are still playing catch-up, some ten years later! HTML 5 has at last dropped the <font> tag after years of "deprecation", so eventually we can expect browsers to stop supporting it and the other rag-bag of presentational styles.

If you use <font> tags properly, every single block-level element (paragraph, list item, table cell etc.) must be coded separately. This bloats the page unnecessarily compared to linking to a style sheet. (Example: before I added this bit, I made two versions of this page, one using a style sheet, and the other with tags to set the size, font and colour of the text. They weighed in at 9.77 and 13.2 Kb respectively.)

If you use a linked style sheet, you don't have to worry about consistency. How many times have you seen a page set in Arial with a random paragraph in Times, because the author forgot to set the font for a paragraph he/she added later? Using style sheets properly, all paragraphs in all pages will have the same font automatically.

If you care about accessibility, the use of styles is recommended by most authorities.

Is it worth changing your site to use styles?

Does your audience need styles? If you have a reference site used for academic research, the information will be used whether or not you add styling to the page. But you might be able to make the pages quicker to download, or more legible for a majority of visitors.

Whether you decide to use styles depends on how much effort it will be to convert your existing pages for the improvements that styles bring. And don't forget that styles only affect how your pages look - it's the content that is the most important, after all!

Practical ways to get started

First, get a copy of Nick Bradbury's link to external site TopStyle - the lite version is free but it's well worth paying for the full one. This excellent tool makes writing style sheets easy, and gives you lots of help in designing styles that work in the trickier browsers.

Second, start with the really easy things - set fonts and colours. This gives you maximum effect for minimum learning effort. You can play around with leading, margins and spacing later, and use tables for the major aspects of layout.

Third, look at other people's sites. See what styles and layout techniques they use.

Fourth, test your designs in all the browsers you can. Even "good" browsers can have odd problems.

Acknowledgements

Many thanks to former INETPUB members Alan, Bri, Judy, and Kelvyn for their contributions to the thread that inspired this. And of course "Jim" for starting the ball rolling.