How to Add Alternate StyleSheets?

By Shruti Gupta
October 06, 2005

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:

Step 1:

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" />

Step 2:

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" />

Step 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

Browsers such as Internet Explorer (IE) do not have this cool feature of FireFox where one can choose any style they want from the menu. Hence we need to add JavaScript to enable us to switch stylesheets. This JavaScript can be downloaded from here. (I found this JavaScript on the Internet and so, credit of writing this JavaScript doesn't go to me.)

After adding this JavaScript in the head section of the HTML code of your web page, we need to add links for each styles on the web page that on click will load an alternate stylesheet.

< a href-"javascript:void(0)" onClick="setActiveStyleSheet(Style 1); return false;">Style 1</a>

< a href-"javascript:void(0)" onClick="setActiveStyleSheet(Style 2); return false;">Style 2</a>

< a href-"javascript:void(0)" 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.

Note: please note that after href I have added "-" instead of "=". This is to avoid spiders to get in loop.