CSS Style Switcher: A quick and dirty how-to
By Donovan Myers on Thursday, March 18, 2010
Before you begin to start switching CSS styles on your web site, it is very important that you have already developed it using structural XHTML. It is also necessary that you have created at least 1 style sheet, and for the purposes of this tutorial, 1 alternate style sheet.
Let's begin.
There are many ways to attach the style sheet to your web page, but the method we’re going to use here is the linking method. Begin by first linking your default style sheet in-between the <head> tags of your web page:
<head>
<title>Your Web Page Title</title>
<link rel=”stylesheet” type=”text/css” href=”yourdefaultstyle.css” title=”default” />
</head>
Now, you wouldn't be able to switch your style if there was nothing to switch to, so we must specify an alternate style sheet. The process is the same as above, except we change the rel to “alternate stylesheet”:
<head>
<title>Your Web Page Title</title>
<link rel=”stylesheet” type=”text/css” href=”yourdefaultstyle.css” title=”default” />
<link rel=”alternate stylesheet” type=”text/css” href=”youralternatestyle.css” title=”alternate” />
</head>
Making it go.
If everyone used a standards compliant, style sheet aware browser, such as FireFox, we'd be done. Your users would be able to go to View » Page Styles and select the style they liked most. Unfortunately all browsers are not there yet and we must also add support for Internet Explorer, Safari, Netscape, Opera, and others.
The InetSolution web site CSS style switcher uses a script available in an article by Paul Snowden titled Alternative Style: Working With Alternative Style Sheets. Download styleswitcher.js. We recommend that you download the file into a scripts folder within your web site's folder.
Include this script in the head of your web page as well:
<head>
<title>Your Web Page Title</title>
<link rel=”stylesheet” type=”text/css” href=”yourdefaultstyle.css” title=”default” />
<link rel=”alternate stylesheet” type=”text/css” href=”youralternatestyle.css” title=”alternate” />
<script type="text/javascript" src="/scripts/styleswitcher.js"></script>
</head>
The moment you've been waiting for.
Now that we have everything setup, we can finally add our links that make everything happen. Somewhere in the body of your web page, place the following code:
<body>
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
</body>
Once the user selects the alternate style, a cookie will be saved on his computer so that the next time he visits your web site he will see the alternate style. Likewise, if he had the alternate style set and choose default, the cookie would be saved with instructions to load the default style sheet.
Taking it further.
To learn more about CSS switching, I recommend the following articles posted on A List Apart:
Download this article in PDF format
CSS Style Switcher: A quick and dirty how-to