Using Persistent Styles with Multiple Style Sheets
If you're a web designer who has experience in the area of web development, then you'll be aware of the advantages of working with separate style sheets when building a web site. However, the really good news is that you can extend these benefits even more if you learn how to work with multiple style sheets, which can be swapped easily to provide users with a better level of customization and accessibility.
Using Persistent Styles with Multiple Style Sheets - Refreshing some previous concepts and methodologies (Page 2 of 5 )
In case that you didn't have the chance to read the first tutorial of the series and see the complete source code of the application that I developed to switch between different alternate style sheets, I included its entire definition below. You can study it in detail before I move on and show you how to work with persistent style sheets.
That being explained, here's the complete code for the aforementioned application along with the definitions of some sample alternate style sheets:
(definition for "red.css" file)
div{ background: #f00; }
(definition for "green.css" file)
div{ background: #0f0; }
(definition for "blue.css" file)
div{ background: #00f; }
(definition for "fonta.css" file)
p{ font: normal 14pt Arial, Helvetica, sans-serif; }
(definition for "fontb.css" file)
p{ font: normal 18pt Arial, Helvetica, sans-serif; }
(definition for "fontc.css" file)
p{ font: normal 24pt Arial, Helvetica, sans-serif; }
function displayStyleLinks(){ var labels=new Array('Red','Green','Blue','Font Size 1','Font Size 2','Font Size3'); var div=document.createElement('div'); div.setAttribute('id','linkcontainer'); for(var i=0;i<labels.length;i++){ var lnk=document.createElement('a'); lnk.setAttribute('href','#'); lnk.setAttribute('title',labels[i]); lnk.appendChild(document.createTextNode(labels[i])); div.appendChild(lnk); } document.getElementsByTagName('body')[0].appendChild(div); }
window.onload=function(){ if(document.getElementById && document.createElement && document.getElementsByTagName){ // display style links on the browser displayStyleLinks(); var link1=document.getElementsByTagName('a')[0]; if(!link1){return}; link1.onclick=function(){ changeStyleSheet('redstyle'); return false; } var link2=document.getElementsByTagName('a')[1]; if(!link2){return}; link2.onclick=function(){ changeStyleSheet('greenstyle'); return false; } var link3=document.getElementsByTagName('a')[2]; if(!link3){return}; link3.onclick=function(){ changeStyleSheet('bluestyle'); return false; } var link4=document.getElementsByTagName('a')[3]; if(!link4){return}; link4.onclick=function(){ changeStyleSheet('fontstylea'); return false; } var link5=document.getElementsByTagName('a')[4]; if(!link5){return}; link5.onclick=function(){ changeStyleSheet('fontstyleb'); return false; } var link6=document.getElementsByTagName('a')[5]; if(!link6){return}; link6.onclick=function(){ changeStyleSheet('fontstylec'); return false; } } } </script> </head> <body> <h1>Working with multiple style sheets</h1> <div> <p>This is the sample content of the DIV.</p> </div> <div> <p>This is the sample content of the DIV.</p> </div> <div> <p>This is the sample content of the DIV.</p> </div> <div> <p>This is the sample content of the DIV.</p> </div> </body> </html>
As you can see, the above bunch of source files is all the supporting material that you actually need to get this CSS style swapping application working as expected. Of course, as I mentioned before, it's highly recommended to add to it some kind of data persistence mechanism for maintaining the selected style sheet across different web pages. However, the implementation of this feature is out of the scope of this article.
So far, so good. At this stage you hopefully recalled the approach that I used to activate/deactivate multiple alternate style sheets, which means that we can move on and start developing yet another simple web application that will allow users to swap the so-called "persistent" style sheets, with minor difficulties.
Curious about how this brand new application will be built? Go ahead and read the next section. It's just one click away.
Style Sheets 
Modifying the Look and Feel of Individual Elements with Multiple Style Sheets
