Click Here for FREE Web Hosting!

Home >> Fonts >> Break the <FONT> Habit

SPAN and DIV

Contextual Selectors

Break the <FONT ...> Habit: Classes

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="./">Home</A> ] 

[ <A HREF="list.html">Listings</A> ] 

[ <A HREF="price.html">Price Chart</A> ] 

</DIV>

which gives us

SPAN and DIV

Contextual Selectors