How to Add Alternate StyleSheets?

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 he/she wants from the menu. Hence we need to add JavaScript to enable us to switch stylesheets. This JavaScript can be downloaded from here. (I got this script when I took XHTML and CSS classes at NYU in Fall 2004 from my professor.)

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="#" 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:

One thought on “How to Add Alternate StyleSheets?”

  1. thank you thank you thank you!

    I have spent days agonising over the IE linking to alternate stylesheets! SUPERB!!!!

    beer in the post!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.