A 'Short' Tutorial on CSS- Take control of your page . . .

Custom Classes

Custom classes, as we used for our first example, are where the true power of CSS lies. This is a snippet from Spider Food's CSS file:

 .links    { FONT-SIZE: 11px; 
             COLOR: #003399; 
             FONT-FAMILY: Arial; 
             TEXT-DECORATION: none }
 A:hover   { COLOR: #cc3333; 
             TEXT-DECORATION: underline }
 h1        { font-family: Verdana;
             font-size: 16px; color: #CC0000;
             font-weight: bold}
 h2        { font-family: Arial; 
             font-size: 13px;
             font-weight: bold; color: #000099}
 p         { font-family: Arial;
             font-size: 12px;
             color: #333333}
 pre       { font-size: 12px}

On this page, you're seeing the implementation of all five of these custom classes. The title "Take control of your page . . . " is surrounded by the <H1> tag. The "Custom Classes" title is set to <H2>, the body of the page (what you're reading right now) is the <P> tag, the code example is the <PRE> tag, and the menu bar to the left uses the .links and A:hover (which uses a pseudo class, coming up next).

The true power of these classes, is that every <H1> tag on the spider food site is 16 pixels, and the color red, without any additional coding involved. Normally, I would have to code these attributes using the font tag as such:

<h1>
 <font face="Verdana"color="#CC0000" size="2">Stuff here </font>
</h1>

Using my CSS, it's just:

<h1>Stuff here</h1>

This reduces the size off my pages, makes it easier to change things around, and generally makes my pages load faster. If I wanted to make all my headings blue instead, I would just change my CSS file, instead of opening every page, and changing my <font> tags.

Remember that any HTML tag can be redefined using CSS. This means you could change the size of all your bold text, increasing the size associated with your <B> tags. You could also make all your lists a different font than your body text by redefining your <LI> tags. The sky's the limit.

And you can also define multiple classes at one time. If you wanted every heading tag to be red, you could code it like this:

h1, h2, h3, h4, h5 {color: #CC0000 }

Have I mentioned that I love CSS?

But next . . . the power of pseudo classes.