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

Poor Best

Rating:

/ 2

September 12, 2007

TABLE OF CONTENTS:

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