The concept of alternate stylesheets is exactly as the name suggests using alternative stylesheets to change the look of a web page with a click. This makes the website utilizing this technique a little more personalized. The other inherent benefit of this feature is complete separation of content and presentation in a web page, the ideal goal for any website.
Adding an alternate stylesheet is pretty easy. Just follow the steps below:
In the head section of the HTML code of a web page, we need to add a preferred stylesheet. This is the stylesheet that will load on a web browser as the default stylesheet. We need to add a title attribute to all the stylesheets.
< link rel="stylesheet" href="stylesheet1.css" type="text/css" title="Style 1" />
Add alternate stylesheets (as many as you can make) after the preferred stylesheet in the head section of the HTML code of a web page.
< link rel="alternate stylesheet" href="stylesheet2.css" type="text/css" title="Style 2" />
< link rel="alternate stylesheet" href="stylesheet3.css" type="text/css" title="Style 3" />
Loading Alternate Stylesheet in FireFox:
That’s all we need to do for browsers such as FireFox. If you now view your web page with alternate stylesheets in FireFox, you will notice that the default preferred stylesheet loads. To load an alternate stylesheet, you need to do the following.
Under “View” Menu of the FireFox browser, select “Page Style”. You will notice that all your stylesheets will be listed as per the title given in Step 1 and 2, as seen in the screenshot below:
Choose any stylesheet you want, and your web page will display as per your chosen stylesheet.
Loading Alternate StyleSheet in other browsers such as IE
<a href="#" onClick="setActiveStyleSheet(Style 1); return false;">Style 1</a>
<a href="#" onClick="setActiveStyleSheet(Style 2); return false;">Style 2</a>
<a href="#" onClick="setActiveStyleSheet(Style 3); return false;">Style 3</a>
That’s all there is to it. If you have the design capabilities and enough time, then go all out and create different design versions of the same web page. Here’s a website to inspire you: http://www.csszengarden.com.