Home arrow Style Sheets arrow Page 4 - Working with Multiple Style Sheets
STYLE SHEETS

Working with Multiple Style Sheets


As the Web evolves steadily, more and more sites are providing their visitors with different mechanisms for customizing their surfing experience. Nowadays, it's quite common to visit a web site that allows users to change background and foreground colors of specific sections of that site, alter the size of the font, or even modify the position of certain elements by implementing "draggable" user interfaces.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
September 11, 2007
TABLE OF CONTENTS:
  1. · Working with Multiple Style Sheets
  2. · Working with alternate style sheets
  3. · Switching alternate style sheets in a cross-browser fashion: defining a basic JavaScript function
  4. · Swapping alternate style sheets

print this article
SEARCH DEVARTICLES

Working with Multiple Style Sheets - Swapping alternate style sheets
(Page 4 of 4 )

In order to demonstrate how the previous two JavaScript functions can be used to swap between different alternate style sheets, I'm going to define these sheets,  so you can see how they can be activated/deactivated via client-side scripting.

Now, suppose that the respective definitions for these alternate style sheets look like this:

(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;
}

As you can see, above I created six alternate style sheets for changing the background color of some DIVs, along with the size of the pertinent paragraphs. Quite understandable, right?

Now, having defined the alternate style sheets, here's the complete signature of the sample (X)HTML file that swaps them via JavaScript:

<!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>Swapping Style Sheets</title>
<link rel="stylesheet" type="text/css"href="default.css" />
<link rel="alternate stylesheet" type="text/css"href="red.css"
title="redstyle" />
<link rel="alternate stylesheet" type="text/css"href="green.css"
title="greenstyle" />
<link rel="alternate stylesheet" type="text/css"href="blue.css"
title="bluestyle" />
<link rel="alternate stylesheet" type="text/css"href="fonta.css"
title="fontstylea" />
<link rel="alternate stylesheet" type="text/css"href="fontb.css"
title="fontstyleb" />
<link rel="alternate stylesheet" type="text/css"href="fontc.css"
title="fontstylec" />
<script language="javascript">
function changeStyleSheet(title){
   var lnks=document.getElementsByTagName("link");
   if(!lnks){return};
   for(var i=0;i<lnks.length;i++){
   if(lnks[i].getAttribute("rel").indexOf("style")!=-1&&lnks
[i].getAttribute('title')){
      lnks[i].disabled=true;
         if(lnks[i].getAttribute('title')==title){
            lnks[i].disabled = false; 
         }
      }
   }
}
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>

All right, at this point you hopefully learned how to code a simple application that's capable of switching diverse alternate style sheets in a cross-browser way. Of course, as usual, feel free to introduce your own improvements to all the code samples shown in this article, so you can practice working with multiple style sheets.

Final thoughts

In this first tutorial of the series, I showed you how to manipulate a number of alternate style sheets with the assistance of JavaScript to change the visual appearance of a selected web document.

In the next part, things will become even more interesting. I'll be demonstrating how to use persistent style sheets to modify the visual presentation of specific elements within a web page.

Now that you know what the next part will be about, you won't want 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