A Webpage with Alternate User-selectable Stylesheets

Guest post by Chris Coyier of CSS-Tricks.com, a blog sharing tips, tricks, and tutorials on using cascading style sheets.

You may know that you can link to multiple style sheets from a single page. This can be very useful, especially on larger websites where you may have a universal style sheet declaring things like overall page layout, header, and footer styles but then separate style sheets for individual pages that declare things unique to those pages. This can help prevent CSS bloat, a term describing a massive single style sheet that has way more style information in it than any one single page needs.

But you may not know that you can declare alternate style sheets on a page:
<link rel=”stylesheet” type=”text/css” href=” style.css” />
<link rel=”alternate stylesheet” type=”text/css” href=”stylealt1.css” title=”alternate 1″ />

When a page with with these two style sheets is loaded, only “style.css ” will take effect. But using a little lightweight javascript (courtesy of Paul Sowden), we can allow users to switch between these two style sheets at will.

Just set up a few anchor elements to do the job:
<a href=”#” onclick=”setActiveStyleSheet(’default’); return false;”>Switch to Default Style Sheet</a>
<a href=”#” onclick=”setActiveStyleSheet(’alternate 1′); return false;”>Switch to Alternate Style Sheet</a>

The alternate style sheet can be as subtlety, or as wildly different as you wish. Why is this useful? You could set up alternate style sheets to:
1. Have small, medium, and large font sizes on your main content to help accommodate the eyesight of all visitors (sort of like Mike Davidson has)
2. Switch between an “old design” and a “new design”
3. Have low-contrast and a high-contrast version of your site
4. Create a print-ready style, which users can switch to when they want to print a page from your site

See a live example in action or download the example.