March 2003

What's all the fuss about style sheets?

Web afficiandos know all about them. But most web users have no idea what they do and how much impact that they have. However, cascading style sheets are becoming the latest 'must-have' accessory for websites. But what are they, exactly - and what do they do?

To quote from W3C (the World Wide Web Consortium, http://www.w3.org), 'Cascading Style Sheets (CSS) is a simple mechanism for adding style (for example, fonts, colours, spacing) to Web documents. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the web since the Consortium was founded in 1994.'

The intent of style sheets was to make life easy for website designers and coders, without sacrificing the ability for website visitors to read what was displayed. A simple change to a style sheet can allow changes to be reflected in all pages across a site, without having to edit each page. Don't like the colour of the text? Modify one line in a single document and have all of the site follow suit. Want to change the appearance of all tables? Modify the table appearance definitions in one location, and instantly make changes across the board. The benefits to designers are indeed immense. But the benefits to website users are less clear - especially when designers misuse the power of CSS.

How is it possible to misuse style sheets? Style sheets are intended to be 'backwards compatible' and should 'gracefully degrade'. In other words, style sheets should not be relied upon to view a page. If a visitor is not using a style-sheet capable browser, or has elected to turn off style sheet use, then the page should still be functional. It might not be pretty, but it should still work. Importantly, there is a group of users who use their own customised style sheets to assist in reading any given page. These people might be sight-impaired, for example, or might be using a screen reader to read aloud the text that is visible. Their own style sheets might conflict with the style sheet presented by the site, or render the page so differently that the site becomes unreadable.

Here is a good test of a well-designed site that uses style sheets. First, set your browser to NOT use style sheets (see below) and then reload the page that you were previously viewing using the site's style sheet. Is it different? It is bound to be, since style sheets would otherwise be wasted in the site design. But how different is it? Can you navigate the site? Can you read the text? Does the text overlap or appear out of order?

Recall that the acronym is 'CSS', and that the first letter is for 'Cascading'. This indicates that the fundamental feature of CSS is that style sheets cascade, and that whilst the author of a page might prefer a particular style sheet, the visitor might use something altogether different. The balance between what the designer wants and what the visitor actually uses remains in the control of the visitor, though of course many website visitors are probably unaware of how style sheets can be turned off or for user-designated style sheets to override the designer's preferences.

And even those visitors that are using vintage browsers can run into trouble. There are plenty of browsers that simply do not display CSS information at all, and a large body of other browsers that display most CSS elements, but not all - and some display incorrectly. This becomes a veritable nightmare for the designer who might assume that all browsers render pages equally. Nothing could be further from the truth!

To stay out of trouble, test the site carefully using all known browsers that are likely to be used by visitors to your site. Check your log files to determine this, and if you can't survey as many of your visitors as you can, prior to injecting CSS into the equation. Test your site with CSS turned off to see how well it renders without the vital information that might be found in your style sheet. The most obvious mistake is to use CSS to position large chunks of text and other elements on a given page. Menus that float, margins that indent wildly, and font sizes that seem appropriate for the design all fall by the wayside when a Braille reader style sheet is used, or if the user is sight-impaired and prefers to read white text on a black background at 24 points, for example. CSS was never intended to be used to rigidly control elements on a page, but rather to enhance the overall presentation. The structure of the content allowed both the designer and the visitor to be accommodated with equal comfort, but the onus is on the designer to ensure that the visitor gets exactly what he or she wants, if so chosen.

Want to see the world through different eyes? For Netscape users, from the drop-down 'Edit' menu, choose Preferences: Advanced: and disable the 'Enable Style Sheets' checkbox. For IE users (it works better in Netscape), from the drop-down menu 'Tools', choose 'Internet Options' and 'General' then the button 'Accessibility' and use your own style sheet with a blank document. Reload the page that you are presently viewing, and be prepared for a surprise. A good website will be usable, even with its new (albeit sparse, no doubt) look. A bad website will become a tangled mess, with navigational elements lost to the top or foot of the page.