Home arrow Style Sheets arrow Page 3 - Using Persistent Styles with Multiple 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
  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

Using Persistent Styles with Multiple Style Sheets - Working with persistent style sheets
(Page 3 of 5 )

As I explained in the previous section, I'm going to demonstrate how to swap several persistent style sheets attached to a specific web document by using a straightforward approach that is similar to the one used for working with alternate style sheets.

In case you don't know what persistent style sheets are, then let me describe in a few words their core functionality. Basically, persistent style sheets are loaded by default by a given web page and generally are used to define the resetting styles for the web page in question and its basic appearance as well. Also, they can be included into a concrete web document by specifying a value of "stylesheet" for the "rel" attribute of <link> tags, and don't require the inclusion of a "title" attribute.

As you can see, using persistent style sheets is indeed an understandable process, but certainly one of the most interesting aspects of working with them rests upon the ability to combine different styles in one web page.

To demonstrate this concept, below I listed the definition of a simple (X)HTML file, which loads in the beginning seven persistent style sheets which provide the different DIVs and paragraphs included in the file with some basic visual styles. However, as you'll see later, these styles can be easily combined by activating/deactivating a few CSS classes included in the respective style sheets.

Now, having said that, have a look at the signature of the following web document, which as I stated before, loads a few persistent style sheets: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
  <h1>Working with multiple style sheets</h1>
<div class="container">
<p>This is the sample content of the DIV.</p>
<div class="container">
<p>This is the sample content of the DIV.</p>
<div class="container">
<p>This is the sample content of the DIV.</p>
<div class="container">
<p>This is the sample content of the DIV.</p>

As you can see, the previous (X)HTML file includes seven persistent style sheets in the beginning. So far, this process is very easy to follow, right? To clarify further how the "default" style sheets are loaded at first by the previous web document, below I included a screen shot that demonstrates clearly this process:

Now that you have seen how the DIVs and paragraphs included in the previous web page are basically styled by the corresponding "default.css" file, it's a good time to jump forward and see how to combine the styles declared by this file with the ones specified by the other sheets.

As you might have guessed, this combination of styles will be performed via the interaction of three simple JavaScript functions, whose respective signatures will be shown in the section to come, so click on the link below and keep reading.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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