Accessibility

Different strokes etc

Notice that the toolbar above has two options for viewing text - normal and large? This is done so that anyone who needs larger text to read can still use this web site (try it - click the large button). Css makes this possible. By creating several style sheets to meet the needs of different users, css will not only beautify your site but also open it to new categories of users. You could make one stylesheet large text, one low graphics, one printer friendly; using the "aural" style you can even make style rules that direct screen readers to read the text in a particular way. All you need to do is create several stylesheets and link them to your webpage.

How multiple stylesheets work - "cascading"

There cascading stylesheets are so named because they pile one on top of the other. That is, usually, when a stylesheet is added it is applied in addition to the one already in effect. The result is several stylesheets in effect at once. This way, you don't have to state all your style rules again, just state the additional rules in the new stylesheets.

persistent and preferred stylesheets

Html references three types of stylesheets: persistent (always on), preferred (stays on by default), and alternate (is activated if specifically referenced). Note that the persistent stylesheet will stay on unless it is specifically turned off. You distinguish between the three according to their attributes:

persistent: link rel="stylesheet"
preferred: link rel="stylesheet" title="your title"
alternate: link rel="alternate" title="your title"

I know this seems like gibberish to some of you, but you will see what I'm talking about when we actually create them.

The ideal state of affairs would be that users are able to turn css on and off from their browsers as they wish. Presently, you can do this in Netscape, Firefox and Mozilla (and a few other less common browsers). Unfortunately, style sheet switching is not possible in Internet Explorer or Safari (two of the more common browsers). Tantek Ciolek offers a neat solution for IE users here; I'm not aware of any similar tools for Safari. What many developers do (what I've done here) is provide links that allow the user to switch between style sheets. This involves using javascript so I'm not going to get into it here. If anyone is interested, read more here.

Though I don't like to push products, I would recommend at least checking out Firefox - the developers have made a special point of building accessibility into the browser. Oh yeah - it's Open Source!

top of page

So how do you create alternate stylesheets with Nvu

You can create alternate stylesheets using Nvu but I'll warn you - Nvu css editor does not handle this gracefully - it's actually easier to do using the "source" editor and editing the html directly - I strongly recommend this):

to create a persistent stylesheet, follow the general instructions for creating a stylesheet
to create a preferred stylesheet, follow the general instructions for creating a stylesheet, only be sure to type a title (like "preferred" or something else when creating the stylesheet; rules are created as normal
to create an alternate stylesheet, create the stylesheet and rules as before, ensuring that you give the stylesheet a title as in the preferred example (like "alternate" or something else appropriate)
whent the sheet is complete and saved, in the css editor, click on "link elt"
choose the file you saved for your alternate stylesheet.
check the box that says "create alternate stylesheet?"
give your stylesheet a title again
when you are finished, you should see two versions of your alternate css file in the "sheets and rules" window to the left
delete the first of the two stylesheet files called "alternate" (this was the first one you created and has the preferred status attached to it)
close the editor

To check the above steps, from the main document select the "source" tab at the bottom of the document. The stylesheet references should look something like this:

<link title="preferred" rel="stylesheet" href="file:///Users/e_bethel/Desktop/preferred.css" type="text/css">
<link title="alternate" rel="alternate stylesheet" href="file:///Users/e_bethel/Desktop/alternate.css" type="text/css">

I have highlighted the text to remind you that with external css, Nvu keeps the absolute style reference. You should edit these names to:

<link title="preferred" rel="stylesheet" href="preferred.css" type="text/css">
<link title="alternate" rel="alternate stylesheet" href="alternate.css" type="text/css">

This should work but to be sure test it in your browser - don't forget to refresh before you do!
Note - this sould be effective even if you already have a persistent stylesheet attached to the page. Remember, css stack on top of one another.
top of page

Learn even more?

I have included tons of resources, many of them useful for further study. For those particularly interested in to exporing the power of css I recommend checking the css Zen Garden, css/edge, brain jar and others all found here. I have also included some useful (hopefully) tips and tricks.

top of page

To hear this page click listen