Style Switcher

Tutorial

How to Swap CSS Files

Live in Style

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.

  1. 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.

  2. 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.

  3. 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.

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

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

    Otherwise, you'll see:
    Screenshot

    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 its 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:

The ".charAt(6)" trick only works if the site is not using any other cookies.  A more robust solution to read the cookie value is required for most sites.

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

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

"Awesome and Easy tutorial.  Thanks very much."
S., February 12, 2010
"Execellent.  For someone who has been out of web design for a few years, this is just what I needed to spark my memory!"
R.R., January 7, 2010
"thanx for this simple source"
R., December 19, 2009
"thanks so much for your tutorial! great job!"
A., November 21, 2009
"avesomeeeeeeeeee!!!!!!!!!!!!!!!!!!!  so simple and wery cool!!"
B.H., Auguest 20, 2009
"Excellent Wrk.  I ve been searching this for long time.  Finally i concluded that this can be done only in server scripts.  Now i am surprised that this can be done by simple client side scripts"
S.L., August 12, 2009
"you rock.  easy to understand with linear examples.  Thank you!"
C.C., Auguest 4, 2009
"i love you man!  i just love you!  you jus saved me.:)))))))"
A., August 3, 2009
"Thank you so much for having this guide, it saved me and my friends a lot of time coding and trouble shooting out websites."
C.C.P., April 21, 2009
"I've been just surffing found you code.  I don't know how or why it works, but it dose, I've got to take some time to see what this is doing.  I really think it is great that you will share your knowlledge so freely.  thank you very much"
G.A., March 5, 2009
"Great, very simple and very good, Thank you.  Shortest road to the goodest function"
I., January 16, 2009
"thank you very match, it's a great tutorial for a easy style switcher."
P., January 10, 2009
"This tutorial is awesome.  Thanks for sharing this with everyone!"
A., December 11, 2008
More...