Style Switcher

Tutorial

How to Swap CSS Files

Separating the content of your web site from the look and feel makes your web site more maintainable and enables you to more easily experiment with different designs. That look and feel belongs in the style sheet (.css file), and this tutorial covers how to let your users switch styles while keeping the underlying HTML exactly the same. You could use this to offer customizable font sizes on your web site or to allow a client to easily evaluate different designs you've created.

Day Trader

Let's start with a very simple way to tell a web page to automatically to use a different style each day.

Basic HTML Test Page

Create a web page as follows:

day.html
<html><head><title>Day Trader</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body><h2>Live in Style</h2></body></html>

This simple web page will always use the same "style.css" style sheet.

Multiple Style Sheets

Create three style sheets named "style0.css", "style1.css", and "style2.css" as follows:

style0.css
body { font-family: serif } h2 { color: steelblue }

style1.css
body { font-family: sans-serif } h2 { color: seagreen }

style2.css
body { font-family: cursive } h2 { color: goldenrod }

Each of the three style sheets specifies a different font and color.

Static to Dynamic

In the HEAD section of the "day.html" file, replace the line containing the style sheet link with:

New Code (day.html)
<script> var StyleFile = "style" + new Date().getDate() % 3 + ".css"; document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">'); </script>

This little bit of JavaScript finds the current day of the month and divides that number by the number of style sheets available (in this case 3). The remainder (in this case 0, 1, or 2) is used to dynamically create the style sheet link based on the day of the month.

Fonts and Colors

Open "day.html" in your browser. If today is the 1st, 4th, 7th, etc. day of the month, you'll see:

If today is the 2nd, 5th, 8th, etc. day of the month, you'll see:

Otherwise, you'll see:

Having a different design each day for your web site may be fun, but it's not really that valuable. Next, we see how to pass control over to the user.

Style Switcher

Now let's add links to the web page so users can change styles on their own (like this web page does). To do this we will set a browser cookie that keeps track of which style was chosen.

It's actually, pretty simple. Here's the HTML code:

switcher.html
<html><head><title>Style Switcher</title> <script> var StyleFile = "style" + document.cookie.charAt(6) + ".css"; document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">'); </script> </head><body><h2>Live in Style</h2><br> <a href="javascript: document.cookie='style='; window.location.reload();">Style 1</a> \| <a href="javascript: document.cookie='style=2'; window.location.reload();">Style 2</a> \| <a href="javascript: document.cookie='style=3'; window.location.reload();">Style 3</a> </body></html>

A few points of interest:

The HREF links use JavaScript to set a browser cookie named "style".
Since we are only setting one cookie and it's name is "style", we can read its value using "document.cookie.charAt(6)".
If no cookie is set, "StyleFile" will evaluate to "style.css".
The files names of the style sheets need to be "style.css", "style2.css", "style3.css", "style4.css", and so on.

Here's what the web page looks like before a style is chosen:

By the way, the style sheet currently being used for this web page is:

And now for something more whimsical...

Cool and Refreshing

Let's say you want to automatically load a different style for users each time they visit your web site (or hit the "Refresh" button). Try this code:

refresh.html
<html><head><title>Cool and Refreshing</title> <script> MaxStyleNum = 3; StyleNum = parseInt(document.cookie.charAt(6)) % MaxStyleNum + 1; if (isNaN(StyleNum)) StyleNum = 1; document.cookie='style=' + StyleNum; StyleFile = "style" + StyleNum + ".css"; document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">'); </script> </head><body> <h2>Live in Style</h2> </body></html>

The above HTML cycles through the CSS files "style1.css", "style2.css", and "style3.css" one step for each refresh.

Questions or Comments

This tutorial is intended to educate through simple examples, and the code and techniques used can certainly be made more robust. If you want to see the power of style sheets, explore "The Beauty of CSS Design" at the Zen Garden.

Live in style!

Feedback:

Send Us a Message
Message:
Name:
E-Mail:
	Powered by PERFECT

All the fields are optional. However, if you want a response, make sure to provide your e-mail address.

Random

Colors
Google

"thank you, i've been searching how to do this for days. your countribute is useful and free. Excellent!"
D.G., September 21, 2007

"Brilliant! Just what I was looking for, I'd done similar by duplicating each page but now I'm hooked on your script! Thanks"
R.H., June 13, 2007

"Dem you have just saved me about two days' work for my uni assignment. Bless you mate!"
F., April 28, 2007

"thats great, why do other sites make it so difficult to understand, cheers"
B.M., March 7, 2007

"Wow! Thank you for the style switcher. I have tried many and for the most part have they have been a hassle and a lot of problems."
B.W., October 4, 2006

"I've been searching for such code since a long time but spent many months in vain...Jus today i found this in a forum n its really an amazing piece of work !! an awesome masterpiece !!!"
K., July 28, 2006

"I really like this and it gave me an idea of possibly changing a style at a particular time of the day - so it looks different at night than during the day!"
B., June 20, 2006
Try: var StyleFile = "style" + parseInt(Math.abs(new Date().getHours() - 12) / 6) % 2 + ".css";

"Coool, finally a simple colour changer without all the PHP/ASP crap!"
J.B., March 22, 2006

"I really liked this script."
N.L., January 18, 2006

"Thanks for the great tutorial."
J.O., November 27, 2005

"I wanted users to be able to choose for a black or white layout, and this works perfect, also in Firefox. Thank you! ... ;-)"
S., September 20, 2005

"Excellent Tutorial! Style switching is the wave of the future giving users the ability to customize a website to their preferences. Thanks to your tutorial I'll be adding style selection to my sites!"
Anonymous, July 27, 2005

"excelente!!!!!!"
J., June 27, 2005

"thanks, I've been looking for something in plain english that explains how to do this."
S., June 19, 2005