aware.hwg.org: accessible web authoring resources and education center
Current Location: HTML Writers Guild · AWARE · Tips · CSS

Accessibility and Cascading Style Sheets

Introduction to Stylesheets

Stylesheets are a relatively new creation, and in fact, many web designers may be completely unfamiliar with them. If this is your first exposure to styles in HTML, don't be scared, it's not really as complex as it looks.

Why Stylesheets Are Needed

HTML was conceived as a structural language that conveys semantic meaning, rather than presentation. The idea is that if a certain amount of text is supposed to be strongly emphasized, the HTML code doesn't dictate exactly how the user agent (browser) will render it, but instead leaves it up to the browser to determine the best way, based on the capabilities of the computer viewing the page and the user's preferences.

So a STRONG element could display the text as bold red on a normal GUI browser (something like MSIE on Windows 95), or bold on a monochrome monitor, or in CAPITAL LETTERS on a terminal that can't even display bold text. A voice-based browser might emphasize the same text by increasing the volume when reading the highlighted words.

That's how it worked, in theory. In practice, however, web authors aren't happy with leaving everything up to the computer at the other end; it's a good thing to be able to specify colors and fonts and sizes and any other manner of presentation instructions and have the page look like what you want. So a number of attributes and elements, ranging from FONT to ALIGN to COLOR, were added to HTML.

This probably was a mistake. By confusing the issue of semantic structure with visual appearance, a situation soon arose where web authors abandoned the idea of any kind of internal structure to their pages and instead designed solely for visual "look". That style of design lead to a decrease in the amount of actually usable information beyond the visual rendering, which means there's less for non-visual browsers to use.

Stylesheets to the Rescue!

This is where styles and stylesheets come along. They separate the structural content -- which is still in HTML -- from the rendering instructions, which are specified in CSS. The advantages of this approach are that it restores the rightful place of HTML as a structural language while still allowing the author to do all kinds of impressive rendering, formatting, and layout tricks in a generally accessible manner.

The first version of stylesheets for the web was released in December 1996 and is called "Cascading Style Sheets, Level 1" or CSS1 for short. The second version, level 2 (CSS2) was issued by the W3C in May 1998. CSS2 allows for media-specific style sheets, which offers even accessibility benefits in the form of aural style sheets, style sheets for non-standard devices (hand-held computers, for example), and other advances in selecting and using styles in web design.

How do you use styles? This is not intended as a full tutorial on CSS, but in short, there are three ways to use stylesheets:

The Problem With Stylesheets

So, I've told you that stylesheets can do neat things like improve the accessibility of your pages and let you have neat formatting control; I've even given you examples and links to get you started on using them. What's the problem, then?

The main problem is this: No browser supports stylesheets correctly. The major browsers, in versions 4.0 (or 3.5), offer limited style support; none is 100% accurate on even CSS1, let alone CSS2. The browser manufacturers implement bits and pieces, but nothing that's utterly reliable in all cases.

Netscape 3.X and earlier don't do stylesheets. MSIE 3.X tried to do stylesheets, but did a terrible job at it. MSIE 4.X is a definite improvement over 3.X, and is probably the best browser for viewing stylesheets, but there are some problems even with its support. Opera 3.5 supports CSS level 1; previous versions of Opera don't support styles. Lynx and most other third-tier browsers likewise don't support stylesheets. WebTV has limited support for CSS.

What does lack of support mean? In most cases it means that the styles simply won't be displayed. THIS TEXT in the example above wouldn't be displayed in green; it would remain the default color (if a visual browser is being used). If your page says 'FOLLOW THE INSTRUCTIONS IN GREEN' -- and the user can't see any green! -- then you have a problem. This is why you should design all your web pages to be usable even if styles aren't available.

(In a few cases, the browser may actually crash or display the page in a very odd way -- some versions of Netscape 4.X and MSIE 3.X have been known to do this. For this reason, it's good to test your stylesheet-enhanced page in as many browser versions as possible!)

Conclusion

Stylesheets are powerful, dynamic, and accessible, and will be used extensively in the future. If you're not using them now, don't let lack of browser support stop you -- this is the time to learn so that you're not the one behind the curve when the browser manufacturers finally catch up.

Back to Tips and Techniques...

This essay copyright © 1999 by Kynn Bartlett <kynn@idyllmtn.com> and is reprinted here with permission.