Please note that while this is an excellent way to switch styles, it is not used in Spoono v4's flavor switching. For serveral reasons explained later in this tutoral, we chose to use PHP cookies to control the style sheets instead. The highly compatible Javascript method explained here was originally created by http://idontsmoke.co.uk/Paul Sowden. To start things off, let's take a look at some code for loading CSS files:

This first method creates a persistent style sheet. This means that the style sheet will definitely be loaded and enabled for use on this web page. Most style sheets used on the web are loaded in this manner by placing this code in the head area of an HTML document. The properties of the style change when we add a title attribute, like so:

This tag loads a css file, just like before, except this time, the file is given a title and thus it becomes known as a preferred style sheet. By default, this style sheet will be loaded and enabled for use on the web page. The difference with preferred style sheets is that they can be disabled (turned off) when other alternate style sheets are turned on. Multiple style sheets can be given the same title and they will be turned on and off as a group. So, the next thing we need to know is how to define an alternate style sheet. The code looks like this:

As you can see, the rel attribute is changed to alternate stylesheet. By default, alternate style sheets are loaded by the browser, however they are disabled (turned off). Multiple alternate style sheets can be given the same title as before, and they will function as a group, just like above. The fact that alternate style sheets are fully loaded by the browser is the main reason that we avoided using them in Spoono v4. Each of our flavor style sheets loads many images, and by using PHP cookies to control our style sheets, only the currently active flavor's style sheet and images are loaded (as a persistent style sheet). If you have a small number of style sheets or few images in them, the Javascript technique which we are learning is a great way to go. Getting back on track, the next thing we need to do is devise a way to switch between preferred and alternate style sheets. If all browsers functioned like Mozilla and provided a handy menu for switching between styles (a button in the lower left corner), we might not even have to use Javascript to do this. However, most Mozilla users probably don't even know the menu exists, and the vast majority of web surfers which use Internet Explorer are plain out of luck. So, it becomes crucial for the style savvy web designer to implement style switching controls in the web page layout.

Numerous Javascript functions will be needed to scan through all the link tags, enable/disable style sheets, identify which style is active, and store the currently enabled style preference in a cookie, so it will remain enabled as the user browses other web pages. Because writing cookies is outside the scope of this tutorial, it may be best to accept that a Javascript include file written by http://www.quirksmode.org/Peter-Paul Koch and http://idontsmoke.co.uk/Sowden does the job wonderfully. Thus to keep things simple, all you need to do is download /javascript/tutorials/styleswitching/styleswitcher.jsstyleswitcher.js and include it in your web document with the following code (usually placed in the head area as well):

The final step is to create links on a web page to control the styles. To do this, you'll need to apply an onclick attribute that passes values to the functions defined in the styleswitcher.js. It's quite simple. Here's the code to create two links that will switch between styles with the titles "swanky" and "groovy" which were defined in the example code above:

You may view this example.htmworking example to make sure you have it all set up properly.

Now you have everything necessary to make your own Javascript-powered, style switching web page. Oh, how the neighbors will be jealous.