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
<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:
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:
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.
August 28, 2010
CODE