Home arrow Style Sheets arrow Page 2 - Modifying the Look and Feel of Individual Elements with Multiple Style Sheets
STYLE SHEETS

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.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 3
September 17, 2007
TABLE OF CONTENTS:
  1. · Modifying the Look and Feel of Individual Elements with Multiple Style Sheets
  2. · Swapping entire persistent style sheets
  3. · Developing a simple CSS class-level application
  4. · Changing the style of DIVs and paragraphs

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials