Home arrow Style Sheets arrow Page 2 - 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 - Working with alternate style sheets
(Page 2 of 4 )

One of the most common methods used for swapping between different style sheets attached to a given web document involves utilizing alternate style sheets. These sheets are loaded along with the respective web page and theoretically can be selected via a simple menu provided by the user's own browser.

A simple example of how to use alternate style sheets is shown below:

<!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="reda.css"
title="redstyle" />
<link rel="alternate stylesheet" type="text/css"href="greena.css"
title="greenstyle" />
<link rel="alternate stylesheet" type="text/css"href="bluea.css"
title="bluestyle" />
<link rel="alternate stylesheet"
type="text/css"href="fontsizea.css" title="fontstylea" />
<link rel="alternate stylesheet"
type="text/css"href="fontsizeb.css" title="fontstyleb" />
<link rel="alternate stylesheet"
type="text/css"href="fontsizec.css" title="fontstylec" />
</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 (X)HTML file first loads a "default.css" style sheet, which as its name suggests, is used by default, and also includes some alternates by using the "<link> tag and specifying an "alternate style sheet" value for its "rel" attribute as well as a title. Logically, these alternate style sheets can be easily swapped by using the visitor's own menu provided by most modern browsers, like Firefox, for instance.

However, IE 6 doesn't support this feature. Therefore, switching between alternate style sheets should be performed via client and server-side scripting. In this case, I'll show you how to achieve this style changing process with JavaScript, but naturally you're free to use the approach that best suits your needs.

So far, you have seen how to attach multiple style sheets to a selected web document. Nonetheless, as you saw earlier, this standard approach isn't supported by IE 6. So, keeping in mind this issue, in the following section I'll define a simple JavaScript function, which will allow users to swap between different alternate style sheets with a few simple links.

To see how this will be done, please go ahead and read the next few lines. I'll be there, waiting for you.


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