Here is a simple way to implement a stylesheet switcher using jquery. I find this useful to show various typography treatments to a customer.


Include as many alternative stylesheets in your head tag, the proper syntax. Only those with the rel attribute containing “alternate” will be used to generate the selectbox. Use the title attribute to give it a proper name.


<link rel=”stylesheet” title=”main” href=”css/normalize.min.css” type=”text/css”>
<link rel=”stylesheet” title=”main” href=”css/main.css” type=”text/css”>
<link rel=”alternate stylesheet” title=”red” href=”css/red.css” type=”text/css”>
<link rel=”alternate stylesheet” title=”blue” href=”css/blue.css” type=”text/css”>


The jquery code will automatically create a select box allowing you to switch  from one to another. Simple but useful.