Classes

Using classes with your CSS can make customizing your pages ten times easier, because you can give different occurances of the same element different styles. Say you wanted every cell of a table to have a different color and font, like this:

pink	green
yellow	blue

Instead of defining everything with HTML, we use CSS classes. Here is the code:

<table border="1"><tr>
<td class="pink">pink</td>
<td class="green">green</td>
</tr><tr>
<td class="yellow">yellow</td>
<td class="blue">blue</td>
</tr></table>

Then, in your header, you'd define what happens with each different class, like so:

<style type="text/css"><!--
.pink {background-color:#FF99FF;font-family:Times New Roman,Times}
.green {background-color:#99FF99;font-family:Courier New,Courier}
.blue {background-color:#99CCFF;font-family:Verdana}
.yellow {background-color:#FFFF99;font-family:Arial,Helvetica}
--></style>

Now everything you add class="pink" to will have a pink background color and Times New Roman font.

This can also be useful if you want different links to look different ways. For example, links in the menu to look one way, and links in the body/text to be different. In the style sheet of your page you'd usually have this:

a:active {color:pink}
a:visited {color:pink}
a:link {color:pink}
a:hover {color:blue}

If you had a few links you wanted to be a bit different, you'd add this:

a.menu:active {color:blue}
a.menu:visited {color:blue}
a.menu:link {color:blue}
a.menu:hover {color:pink}

Then add class="menu" to the links you'd like different, like this: