This method works with 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 is listed after style1.css.


We can use this to our advantage when we want to offer the user a way to change colors, fonts etc. For example, perhaps someone with vision problems would like to see a different color scheme or font size.


How to use a 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">

Note that the last stylesheet's href attribute is empty and 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.


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 and you're all set:


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

How to use multiple buttons to change back and forth between different stylesheets


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.


Use the @import method 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.)