Modifying the Look and Feel of Individual Elements with Multiple Style Sheets - Developing a simple CSS class-level application
(Page 3 of 4 )
According to the concepts that I deployed in the introduction to this final article of the series, my intention here is to show you yet another approach which will come in handy for changing the style of individual elements of a given web page, but without swapping complete style sheets.
First I will use the same set of style sheets that were created in the previous article, whose definitions looked like this:
(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;
}
As you can see, the CSS files defined above should be quite familiar to you, since I used them with some practical examples developed in previous tutorials of the series. Thus, having defined this group of CSS style sheets, the next step consists of defining a sample (X)HTML file that loads the CSS files.
This brand new file looks like this:
<!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>Changing the style of web page elements</h1>
<div id="content">
<p id="par">This is the content of the DIV.</p>
</div>
<a href="">Red</a> <a href="">Green</a> <a
href="">Blue</a> <a href="">Font Size 1</a> <a
href="">Font Size 2</a> <a href="">Font Size 3</a> <a
href="">Reset Styles</a>
</body>
</html>
As shown previously, the structure of the above (X)HTML file is extremely basic. It includes only one DIV and a paragraph, identified as "content" and "par" respectively. Quite simple to grasp, right?
Now, based upon the signature of the prior web document, in the next section I will define a basic JavaScript function. It will use the CSS classes defined in the different style sheets that you learned before to modify the visual appearance of the mentioned DIV and the paragraph as well.
To see how this process will be performed, go ahead and read the last section of this tutorial. We're almost done!
Next: Changing the style of DIVs and paragraphs >>
More Style Sheets Articles
More By Alejandro Gervasio
