Home arrow Style Sheets arrow Page 5 - Using Persistent Styles with Multiple Style Sheets
STYLE SHEETS

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
September 12, 2007
TABLE OF CONTENTS:
  1. · Using Persistent Styles with Multiple Style Sheets
  2. · Refreshing some previous concepts and methodologies
  3. · Working with persistent style sheets
  4. · Defining some basic JavaScript functions
  5. · Listing the full source code of the style switching application

print this article
SEARCH DEVARTICLES

Using Persistent Styles with Multiple Style Sheets - Listing the full source code of the style switching application
(Page 5 of 5 )

As I promised you in the previous section, here's the complete definition of this style switching application, which uses multiple persistent style sheets to change the individual appearance of the elements of a sample web page:

(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 usual with most of my articles on web development, feel free to introduce your own modifications to all the code samples shown in this tutorial. In this way you'll be able to improve your existing background when working with multiple style sheets.

Final thoughts

In this second installment of the series I showed you how to utilize different persistent style sheets to combine the visual appearance of several elements included into a sample web document. As you learned previously, this process is pretty straightforward and easy to achieve.

In the last part of the series, I'll teach you how to alter the look and feel of a given web page without swapping entire style sheets.

Now that you know what the next tutorial will be about, you won't wan to miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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