Modifying the Look and Feel of Individual Elements with Multiple Style Sheets
Learning how to control multiple style sheets using both client and server side scripting can be a significant addition to the toolkit for many web designers taking their first steps into this huge terrain. If you're interested in mastering this topic as painlessly as possible, this series of articles might be what you're looking for.
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.
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!
Style Sheets 
Using Persistent Styles with Multiple Style Sheets
