Break the <FONT ...> Habit: Classes

Sometimes you don't want every instance of a type of an element rendered the same. In this case you can use classes to define different ways the same type of element might be displayed. For example, you might want some links which appear at the top of the page to appear big and bold, while other links within the page appear as usual. To create a class, follow the name of the element with a dot, then the name of the class you want to create. For example, the following (in a STYLE tag or in a style sheet file) creates a class named topofpage that is associated with <A ...> tags:

A .topofpage
 {
 font-size:180%;
 font-weight:900;
 }

To utilize the class we add a CLASS attribute to the tag:

<A HREF="./" CLASS="topofpage">Home</A> -
<A HREF="list.html" CLASS="topofpage">listings</A> -
<A HREF="price.html" CLASS="topofpage">Price Chart</A>

which gives us

Home - listings - Price Chart

For links that shouldn't be part of the class simply leave out the CLASS attribute:

Check out our <A HREF="products.html">products</A> list.

which gives us

Check out our products list.

Class names can consist of letters from the alphabet (a-z and A-Z), digits (0-9) and dashes (-). The can also consist of (and I quote the official specifications) "Unicode characters 161-255" which are basically a bunch of weird characters that you probably don't want to use.

Please note: class names cannot contains underscores (_). They also cannot start with a dash or a digit.

Classes don't have to be associated with specific elements. You might wish to have a class that can be applied to any type of element. Suppose in our example above we want to add some large non-link text around the links. We can remove the A from the rule:

.topofpage
 {
 font-size:180%;
 font-weight:900;
 }

Now we can create (for example) a <DIV ...> element. By doing so we can apply the class to once to the <DIV ...> instead of three (or more) times to the links. Apply the class by adding a CLASS attribute, setting CLASS to the name of the class. Don't put a dot (.) at the beginning of the class name.

<DIV CLASS="topofpage">
[ <A HREF="index.html">Home</A> ]
[ <A HREF="list.html">listings</A> ]
[ <A HREF="price.html">Price Chart</A> ]
</DIV>

which gives us

Contextual Selectors >>>