Switching styles

How cool is this and so simple too. A document doesn't need to have a single style sheet. You can give it a default style and as many alternatives as you want for the visitor to choose from.

The only drawback at the moment is that it depends on the browser. Not all browsers yet offer a menu for it, but in Netscape 6, for example, you can find all the styles under the menu View>Use Stylesheet and Firefox is View>Page Style. IE6 doesn't have an option but it may be available in 7 or 8.

To include extra style sheets, just add more <LINK> elements in the header, with the appropriate REL and TITLE attributes. Make sure they are placed AFTER your main style sheet or they'll just get overridden.

If you're not browsing with Internet Explorer, try it, this page has alternate styles available.

Here's the code

HTML


<link type="text/css" rel="stylesheet" href="main.css" />

<link type="text/css" href="umber.css" title="Burnt Umber" rel="alternate stylesheet" />
<link type="text/css" href="blue.css" title="Soothing Blue" rel="alternate stylesheet" />
<link type="text/css" href="green.css" title="Relaxing Green" rel="alternate stylesheet" />