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"
"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>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" />
</head>
<body>
<h1>Working with multiple style sheets</h1>
<div class="container">
<p>This is the sample content of the DIV.</p>
</div>
<div class="container">
<p>This is the sample content of the DIV.</p>
</div>
<div class="container">
<p>This is the sample content of the DIV.</p>
</div>
<div class="container">
<p>This is the sample content of the DIV.</p>
</div>
</body>
</html>
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.
Next: Defining some basic JavaScript functions >>
More Style Sheets Articles
More By Alejandro Gervasio
AT&T devCentral & BlackBerry(r) Webcast Series: BlackBerry and GPS -Build Location Awareness into your BlackBerry Applications, July 10th -1:00PM EST. 
