Home arrow Style Sheets arrow Page 4 - 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 - Defining some basic JavaScript functions
(Page 4 of 5 )

As I stated in the section that you just read, in order to combine the styles defined by the different persistent  sheets that you saw previously, it's necessary to create some simple JavaScript functions. These functions will be tasked with assigning specific classes to the DIVs and paragraphs included into the sample web page that was built earlier.

Based on this premise, I'm going to define these functions in such a way that they allow the user to change individually the look and feel of the mentioned elements via a set of web page links created with the DOM.

So first, here's the signature of the JavaScript function that displays the mentioned links:

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

As you can see, the prior "displayStyleLinks()" function is responsible for displaying the list of links that will change the styles of the different DIVs and paragraphs included in the sample web page defined previously, so I believe the logic implemented by it doesn't bear much discussion in this case.

Therefore, let's turn our attention to the signatures of the following functions, which are tasked with assigning different classes to the DIVs and paragraphs contained in the same sample web document built earlier.

These brand new functions look like this: 

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

In basic terms, the primary task of all the above JavaScript functions is to assign different CSS classes to the respective web page DIVs and paragraphs. However, things get really interesting when I include these classes into different persistent style sheets, as illustrated below:

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

Now, having defined the previous persistent style sheets, it's perfectly possible to apply them to the different paragraphs and DIVs of the previous sample web page, in this way achieving a neat visual combination.

How can this be done? Well, the answer is actually simple. By associating the proper JavaScript function to a specific styling link, it's feasible to style DIVs and paragraphs individually, which is demonstrated by the following piece of JavaScript code:

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

Now, each time one of the previous web page links is clicked on, different style combinations can be achieved easily for the same web document. Of course, you'll grasp this process better if you look at the following images, which show this combination of styles in action:

See how easy it is to combine the styles defined in different persistent sheets by using a few basic JavaScript functions? I bet you do! Now that you hopefully grasped the logic that drives the approach for utilizing multiple persistent style sheets, it's time to leap forward and list the complete source code that corresponds to this style switching application, so you can see more clearly how its distinct pieces link with each other.

This will be done in the last section of this tutorial, so click on the link that appears below and keep reading.


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