One toggle button or multiple buttons

Both methods take advantage of the fact that in CSS, despite some exceptions like inline styles, the last rule takes precedence.


For example, if you have links to two stylesheets in your HTML...


<link rel="stylesheet" href="css/style1.css">
<link rel="stylesheet" href="css/style2.css">

...and in style1.css you have this:

h1 { color: red }

...and in style2.css you have this:

h1 { color: blue }

Your h1 tag will be blue because style2.css comes after style1.css. We can use this to our advantage when we want to offer the user a way to change colors, fonts etc. There are, of course, other ways to do this. However, this is the way I do it.


1. Toggle button to change back and forth between two different stylesheets


If you haven't already done so click the "toggle me!" button to see the effect.


In the <head> area of my HTML I have the following stylesheets. (You could load all the stylesheets up-front in order to minimize any switching delay. However, I haven't done that here.)


<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="" id="colorswitch">

The last stylesheet's href attribute is empty and it has the id "colorswitch".


I'm using jQuery to populate the href attribute with the alternate stylesheet, newcolors.css, when someone clicks the "toggle me!' button. When that happens the styles in newcolors.css will take precedence over those sames styles in styles.css because it is placed after it in the HTML. When the button is clicked again the newcolors.css attribute is removed and the styles in styles.css takes over again.


Very simple. Here's the jQuery. I have it in a file called app.js:

$(document).ready(function(){
$(".togglebutton").click(function(){
	if ($("#colorswitch").attr("href")){
		$("#colorswitch").removeAttr("href");
	}
	else $("#colorswitch").attr("href", "css/newcolors.css");
	});	 
});

Include it in your index.html file...


<script src="js/app.js"></script>

...and you're all set.

2. Multiple buttons


This particular example gives the user three different styles to choose from depending on which button is clicked. The HTML contains the following:


<button type="button" class="styleone">style one</button>
<button type="button" class="styletwo">style two</button>
<button type="button" class="stylethree">style three</button>

Here's the jQuery. If the user clicks on the button with the class "styleone" the href attribute changes to styleone.css etc.

$(".styleone").click(function(){
	$("#colorswitch").attr("href","css/styleone.css");
});

$(".styletwo").click(function(){
	$("#colorswitch").attr("href","css/styletwo.css");
});

$(".stylethree").click(function(){
	$("#colorswitch").attr("href","css/stylethree.css");
});
});

Remember...this is working because CSS rules that come later take precedence and the stylesheet with the ID "colorswitch" has been placed after the other stylesheets:


<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="" id="colorswitch">

When the href attribute gets a value as soon as the user clicks a button the styles in the other stylesheets can be overidden.


NOTE: @import method is used on each stylesheet if you want to change fonts.


(I'm using prismjs for the syntax highlighting. I tried a few others and this one turned out to be the easiest to work with.)