Home arrow Style Sheets arrow Page 2 - 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 - Refreshing some previous concepts and methodologies
(Page 2 of 5 )

In case that you didn't have the chance to read the first tutorial of the series and see the complete source code of the application that I developed to switch between different alternate style sheets, I included its entire definition below. You can study it in detail before I move on and show you how to work with persistent style sheets.

That being explained, here's the complete code for the aforementioned application along with the definitions of some sample alternate style sheets:

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

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

As you can see, the above bunch of source files is all the supporting material that you actually need to get this CSS style swapping application working as expected. Of course, as I mentioned before, it's highly recommended to add to it some kind of data persistence mechanism for maintaining the selected style sheet across different web pages. However, the implementation of this feature is out of the scope of this article.

So far, so good. At this stage you hopefully recalled the approach that I used to activate/deactivate multiple alternate style sheets, which means that we can move on and start developing yet another simple web application that will allow users to swap the so-called "persistent" style sheets, with minor difficulties.

Curious about how this brand new application will be built? Go ahead and read the next section. It's just one click away.


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