Switch Style Sheet

“I'd rather fight than switch.” You want to provide a site that is sensitive to the needs of the disabled, but you also want to retain your layout and designate absolute pixel sizes for the fonts in your cascading style sheets. Is there a way around this dilemma? If you are one of my students, you know I am famous for rhetorical questions. Of course the answer is yes! Some of your visitors may have low vision and need to increase the size of the font. They may also prefer serif to sans serif, or vice versa.

You can provide an alternative style sheet and create a button on the page that enables a switch at will. You can see an example of this in action at Zeldman's site. You can download the javascript here, and find the directions for creating the effect here, at The List Apart.

It essentially works like this.
Create three external style sheets one of which will be persistent, one preferred (or default), and one alternate.
Create links to each stylesheet in the head section of your document.
The persistent stylesheet is linked in the normal way, and has all the styles which will be common to all sheets.
The preferred is the default style and is linked as normal except that it is given a title after the file name href (title="big" for example)
The alternate style sheet is also given a title, and is offered this way: <link rel="alternate stylesheet" type="text/css" href="large.css" title="big" />

After your three style sheet links, within the head, add the link to the js file, which you will put in your root directory:
<script type="text/javascript" src="styleswitcher.js"></script>

Finally, you will add the onClick event to buttons or text links to initiate the style switch:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">
button or clickable text</a>
<a href="#" onclick="setActiveStyleSheet('big'); return false;">
button or clickable text</a>

(where "big" is the large font sheet, and "default" is the regular sheet)