This script allows you to switch between several .css files by a single click, thus completely changing the design of your site. The main advantage is that all design changes remain when you open the site again.
In order to make the script work, the index-#.html file with a style switcher should contain these lines of HTML code in order to include the styleswitch.js script and the jQuery framework:
Below you can see the general HTML script representation:
Each link (<a> tag) requires rel attribute that defines the name of .css file, which will be opened when the link is clicked.
First we include the main style.css file using the following construction:
This is necessary, since alternative style sheets will not duplicate all original style properties. With each new alternative style sheet we are going to redefine certain style values only.
Next, we’re going to create and include alternative .css files with new values for existing attributes. The <head> section of the index-#.html file contains these lines of code that include alternative style sheets: