<!DOCTYPE html>
<html>
<head>
<title>Style Switcher</title>
<script>
var styleFile = "style-switcher-css" + document.cookie.charAt(19) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + styleFile + '">');
</script>
</head>
<body>
<h2>Live in Style</h2>
<p>
<a href="javascript:%20document.cookie='style=';%20window.location.reload();">Style 1</a> |
<a href="javascript:%20document.cookie='style=2';%20window.location.reload();">Style 2</a> |
<a href="javascript:%20document.cookie='style=3';%20window.location.reload();">Style 3</a>
</p>
<p>A few points of interest:</p>
<ol>
<li>The HREF links use JavaScript to set a browser cookie named "style".</li>
<li>Since we are only setting one cookie and its name is "style", we can read
its value using "document.cookie.charAt(19)".</li>
<li>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.</li>
</ol>
</body>
</html>
body { font-family: cursive }
h2 { color: goldenrod }
body { font-family: sans-serif }
h2 { color: seagreen }
body { font-family: serif }
h2 { color: steelblue }