CLASSES is where the real power of CSS begins to show. So far, when we have defined a selector, we are pretty much stuck with it unless we alter it individually with an inline style. Some variation was explored by using contextual styles, such as defining a style to H3's only when they are also italic but this is a bit clumsy at best for many situations.

I'm going to return to my list display problem from the previous page. To get the results (a full color background and overall text color) of yellow with red for an unordered list and green with black for an ordered list... actually, that combination is rather dull and hard to read, let's change ordered lists to white text on a black background... I have already decided that I can best do that with TD as the selector.

But, how do I get around the problem of using a TD where I don't have a list? Examine the style code below.... note the code text in red.

<STYLE type="text/css"> <!-- TD.unordered {      font-family: arial;      color: red;      background-color: yellow      } TD.ordered {      font-family: arial;      color: white;      background-color: black      } --> </STYLE>

How does a TD know whether it is ordered, unordered or plain? You tell it so:

<TD class=ordered> or <TD class=unordered> or just leave it plain old <TD>

Check out the results of the above style by clicking here.

It is suggested, even highly recommended, that you name classes something that clearly indicates usage. The example above would be easy to remember as I worked on the pages as style for ordered list cells and for unordered list cells. The style could be applied the same way if I just wanted a table cell to look likt the ordered lists even though there was no list in it. For example, you might have defined P.intro for use on introductory paragraphs, P.example for paragraphs that are examples, and so forth.

Classes can also be defined without a selector and then applied as desired to html elements. For example, one might define a class for *important* as being red text:

<STYLE type="text/css"> <!-- .important {      color: red;      font-family: Arial;      font-size: larger      } --> </STYLE>

Then anywhere you want the *important* appearance you add class=important to the tag be it an H3 or a TD or whatever.