Modifying the Look and Feel of Individual Elements with Multiple Style Sheets
Learning how to control multiple style sheets using both client and server side scripting can be a significant addition to the toolkit for many web designers taking their first steps into this huge terrain. If you're interested in mastering this topic as painlessly as possible, this series of articles might be what you're looking for.
Modifying the Look and Feel of Individual Elements with Multiple Style Sheets - Swapping entire persistent style sheets (Page 2 of 4 )
Definitely, a good place to start explaining how to modify the style of separate elements of a given web page is with listing the complete source code corresponding to the application that I built in the previous tutorial of the series. In that article, we used a certain number of persistent style sheets to change the look and feel of some DIVs and paragraphs to demonstrate how simple it is to manipulate this type of CSS files.
Given that, here's the complete definition of the aforementioned application, as it was created in the preceding article of the series:
(definition for "red.css" file)
.red{ background: #f00; }
(definition for "green.css" file)
.green{ background: #0f0; }
(definition for "blue.css" file)
.blue{ background: #00f; }
(definition for "fontsize1.css" file)
.size1{ font: normal 14pt Arial, Helvetica, sans-serif; }
(definition for "fontsize2.css" file)
.size2{ font: normal 18pt Arial, Helvetica, sans-serif; }
(definition for "fontsize3.css" file)
.size3{ font: normal 24pt Arial, Helvetica, sans-serif; }
function changeDivStyle(style){ var divs=document.getElementsByTagName('div'); if(!divs){return}; for(var i=0;i<divs.length;i++){ if(divs[i].className.indexOf('container')!=-1){ divs[i].className='container '+style; } } }
function changeParStyle(style){ var divs=document.getElementsByTagName('div'); if(!divs){return}; for(var i=0;i<divs.length;i++){ if(divs[i].className.indexOf('container')!=-1){ var pars=document.getElementsByTagName('p'); if(!pars){return}; for(var i=0;i<pars.length;i++){ pars[i].className=style; } } } }
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(){ changeDivStyle('red'); return false; } var link2=document.getElementsByTagName('a')[1]; if(!link2){return}; link2.onclick=function(){ changeDivStyle('green'); return false; } var link3=document.getElementsByTagName('a')[2]; if(!link3){return}; link3.onclick=function(){ changeDivStyle('blue'); return false; } var link4=document.getElementsByTagName('a')[3]; if(!link4){return}; link4.onclick=function(){ changeParStyle('size1'); return false; } var link5=document.getElementsByTagName('a')[4]; if(!link5){return}; link5.onclick=function(){ changeParStyle('size2'); return false; } var link6=document.getElementsByTagName('a')[5]; if(!link6){return}; link6.onclick=function(){ changeParStyle('size3'); return false; } var link7=document.getElementsByTagName('a')[6]; if(!link7){return}; link7.onclick=function(){ changeDivStyle(''); changeParStyle(''); return false; } } } </script> </head> <body> <h1>Working with multiple style sheets</h1> <div class="container"> <p>This is the sample content of the DIV.</p> </div> <div class="container"> <p>This is the sample content of the DIV.</p> </div> <div class="container"> <p>This is the sample content of the DIV.</p> </div> <div class="container"> <p>This is the sample content of the DIV.</p> </div> </body> </html>
As you'll certainly recall, the above source files comprises the structure of a style switching application, which makes it possible to achieve interesting combinations of the styles assigned to some basic DIVs and paragraphs. If you're building a web site that will provide users with a decent level of customization, the previous application could be useful for this purpose.
Also, you must keep in mind that the prior style switching mechanism should be properly complemented with a data persistence system (a simple cookie, for instance) that allows you to keep the value of the selected CSS file across the different web documents of a hypothetical site.
At this point, you hopefully learned how to build applications that use multiple style sheets to alter the visual appearance of a web document. But, as I expressed before, there's yet another client-side approach that permits users to manipulate the style of individual elements of a web page without having to swap the entire CSS sheet.
This is exactly the topic that I'll be discussing in the next section, thus click on the link shown below and keep reading.
Style Sheets 
Using Persistent Styles with Multiple Style Sheets
