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

User-Defined Style Sheets and Accessibility

My Styles vs. Their Styles

One of the particularly interesting ideas introduced in CSS -- Cascading Style Sheets -- is that of the "cascade". The cascade is a way in which multiple rules for displaying a page can be incorporated, whether they come from the document itself, the user's preferences, or any number of inherited external style sheet documents.

An important feature of the cascade is that it places a high priority on the user's control over CSS -- the person sitting at the browser can choose to override anything the web author specifies. The mechanism for this is the user-defined stylesheet.

All good web browsers, that correctly understand the importance and meaning of the cascade, will provide a way for the user to specify a user-defined stylesheet. At present, Microsoft Internet Explorer 4.0 and Opera 3.5 allow the user to do this. Netscape 4.5 does not provide this functionality.

A user-defined stylesheet is simply a standard stylesheet that is applied to all pages, regardless of anything else that the author of the page may desire. For example, let's say that I am absolutely dead set on the idea that all my links should be underlined -- but web page authors keep turning them off using CSS! I might create a file on my computer's hard drive (say, userdef.css) and designate it as my user-defined stylesheet, with the following contents:

A:link, A:visited, A:active {
  text-decoration: underline ! important; }

This rule states that for all links (including VLINK and ALINK links), the text decoration CSS property should be "underline", and it's very important to me. Thus, even if the author of the page turns OFF underlines, I can turn them back on.

Okay, But How's That "Accessible"?

What are the accessibility benefits of this? First off, it can be used to set up specific types of stylesheets that the author may not have included. A good example of this is aural style sheets -- style sheets specifically for "vocal", "spoken" media, such as that produced by a talking web browser. I can write a stylesheet that gives me control over pitch, direction, and whatnot, to make browsing that much easier for me if I'm not using a GUI browser.

Also, if I have specific needs -- such as, I want all text to be a larger size, or links to stand out with a yellow background, or I never want to see Times New Roman font and prefer Arial font -- I can set my browser accordingly with a stylesheet. This is especially helpful for people with low vision or color vision disabilities; I can ignore all the silly gibberish people put on websites and instead see the web the way I want to see it!

Using a User-Defined Style Sheet

If you want to experiment with user-defined stylesheets for yourself, here's how to do it. First you need a stylesheet. You can get several from the W3C's site on stylesheets, under Core Styles: http://www.w3.org/StyleSheets/Core/. Save the chosen CSS file to your hard disk somewhere.

Then you have to tell your browser to use the CSS file. In Opera, go to Preferences and then Document Appearance, and give it the name of your CSS file under Style Sheet File. In Microsoft Internet Explorer, go to Edit / Internet Options, then General and choose the Accessibility button. You can then specify your CSS file after checking the checkbox labeled "Format documents using my style sheet."

You should now be using that stylesheet as your default formatting -- try going to some of your favorite sites and see if anything is different. Sites which don't specify fonts, colors, and the like should now appear using your chosen styles!

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

Back to Tips and Techniques...