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;
}
(definition for "sample_web_page.htm" file)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Multiple style sheets</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="red.css" />
<link rel="stylesheet" type="text/css" href="green.css" />
<link rel="stylesheet" type="text/css" href="blue.css" />
<link rel="stylesheet" type="text/css" href="fontsize1.css" />
<link rel="stylesheet" type="text/css" href="fontsize2.css" />
<link rel="stylesheet" type="text/css" href="fontsize3.css" />
<script>
function displayStyleLinks(){
var labels=new Array('Red','Green','Blue','Font Size 1','Font
Size 2','Font Size3','Reset Styles');
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);
}
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.
Next: Developing a simple CSS class-level application >>
More Style Sheets Articles
More By Alejandro Gervasio
