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

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

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.