Suppose your default font color is black and your default background color is white. This is what you want for most of your web page. But there are several places you want to use a font color of white and background color of navy. You could retype "style='color:white; background-color:navy'" as many times as needed and your page would display properly. But there is an easier way.
Style allows you to group a series of declarations to be used several times. This group is called a "class". Open sample2.htm and type the following:
<style type="text/css">
<!--
body { color:navy; background-color:#d0d0ff; word-spacing:0.25em; line-height:125%;
background-image: url(../../materials/HTML_CSS/graytexture.gif);
}
.wn { color:white; background-color:navy }
-->
</style>
. . .
Name the class and place a period ( . ) in front of the name. The period tells Style this is a class. Now, any time you want the background color navy and font color white, you just add the class="wn" attribute to your HTML tag of choice. Try it on a couple of the paragraphs you already made on this page.
<style type="text/css">
<!--
body { color:black; font-family:helvetica; font-size:12pt;
background-color:white; }
p { text-indent:2em }
.wn { color:white; background-color:navy }
-->
</style>
</head>
<body>
<p class="wn">. . .
Reopen the file and do the following:
- define a class with font color of green, font family of Courier and font weight of bold.
- define a class with font size of x-large, text centered, letter spacing of 0.5em and line height of 150%.
- define a class with font family of "Monotype Corsiva, cursive" and font size of "larger".
Use each class somewhere on the page. Copy paragraphs over several times so you can add different classes to each. Use the second class (the one with x-large, centered text) to create a header at the top of your page. Use the third class (the one with Monotype Corsiva) to replace anywhere you had an entire paragraph in italics.
If you want to add two or more classes to one HTML tag, separate them by a space with no punctuation (no commas, no semicolons, etc.). For instance, if you had two classes, 'wn' and 'xcl', to get characteristics of each, you could type:
If there were some style declarations in the wn class shown above that also
existed in the xcl class, the latter (xcl) declarations would override
the former. That is the "cascading" nature of these Style Sheets - Whatever the browser
sees last governs. Since the xcl class is seen in the Head section
after the wn class, it controls. To test this, you already
have color:white in class wn; add color:tan to class
xcl. Now call both classes in one tag:
<p class="wn xcl"> blah blah blah </p>
and see that the font color is tan in the paragraph. Now
place class xcl above wn. The paragraph font color changes to white.
- In this lesson, we learned about Style classes