QUICK TUTORIAL - STYLES and CLASS

"Styles" change the way your HTML tags work, much the same way as attributes do, but they do it differently. In a large web site, you try to control the way things look from a central point (the "stylesheet") so the effort needed to make changes can be minimized. Instead of changing 400 <font> tags, you might need only to change one line in your stylesheet.

You can change the attributes of an HTML tag in a style declaration. Then the tag is changed everywhere you use it.
You can apply a "class" only where you want you want the attributes changed. A class can apply to all tags that recognize the attributes you changed.
You can apply an "id" to a section of your page, then define styles that apply only to that section.
You can specify a different set of styles to apply to different display devices for your page using "@media". You could, for example, specify a different set of styles for "print", "screen" and "projector".

Changing the Attributes of an HTML Tag Through Styles

<style>

a {text-decoration: none; font-weight: bold;}

a:hover {text-decoration: underline;}

</style>

Now all the links on your page will be blue (the default color) and bold and have no underline until you mouse over them.

Making a User-defined Class

Let's say you have a style on your page that is supposed to turn whatever it touches bright orange.

This goes in the <head> section (notice the dot in front of the made-up name):

<style>

.mango {color: #ff3300;}

</style>

This goes in the <body> section:

<h1 class="mango">Mango Tango</h1>

The h1 now has a class of "mango" and renders this way:

Mango Tango

You can double up on styles this way:

<style>

.mango {color: #ff3300;}

.featured {background-color: #FFFF00;}

</style>

<h1 class="mango featured ">Mango Tango</h1>

Mango Tango

Defining a Section of Content Using Styles

You can create a hierarchy of information on your page, making it easier for your viewer to understand your message, by separating different kinds of content into logical sections, giving each section a carefully-considered design and placement.

For example, a common set of major sections would be "header", "main navigation", "content", and "footer". There could be other sections inside these sections, like "ad", "textbox", "events", or "article".

The sections are, by convention, placed in a set of <div>...</div> tags, and then identified, or named, with an id, for example: <div>...</div id="header" >, <div id="mainnav">...</div>, <div id="content">...</div>.

For these sections, the "ID Selector" is used to group the style declarations:

The ID Selector begins with a "#" instead of a "." in the style sheet.
The ID Selector is applied with id= instead of class=
The ID Selector must be unique - you can't apply the same id to two different <div>...</div> sections. (This is not as restrictive as it sounds - after all, you wouldn't have two footers on your page - or if you did, you could call them footer1 and footer2, and then they'd be unique again.)
If you have a style you want to apply to more than one section, use the Class Selector (starts with a ".", and you say class= in your code ). For example, you might want to define a text box to go in your right-hand column, and you might want three of them on your page. Use the Class Selector.

<style>

#content {position: absolute; left: 90px; top: 1560px; width: 100px;}

</style>

<div id="content"><h1 class="mango featured ">Mango Tango</h1></div>

Mango Tango

If the "Mango Tango" box is obscuring some text, either widen or narrow your browser. It's an "unintended consequence" but I've decided it's instructive enough to leave in.

How to Choose Class Names

There are a couple of ways to choose class names.

By what they do, for example <p class="smallwhitebold"> which you define as {text-size: xx-small; color: #FFFFFF; font-weight:bold;}
By the function they serve, for example <div class="feature_article">

Of the two ways to name classes, the second is far more powerful.

If you go with naming your classes by their attributes, and you decided to change those attributes you could be in for a lot of work. If you decided, for instance , to change your background to white, so that all the smallwhitebold text now disappeared, you'd have to either go through your page and replace the smallwhitebold class with your newly created smallbluebold class, or you'd have to redefine "smallwhitebold" as small, blue and bold. This is quick, but misleading to anyone looking at your code later, who is surprised that a class named "smallwhitebold" is blue.

If, however, you name the classes by their function in the structure of your pages, you can give your site a whole makeover, merely by chaging the style sheets and no one will be confused.

See the CSS Zen Garden for lovely examples of the effects of changing style sheets.

More Resources

If you are interested, there are many good tutorials available on the web that can teach you more about styles. Try these for starters:

Webmonkey - Webmonkey has long had the best tutorials around (irreverent, clear) but they have been overrun by advertising lately.

A List Apart - has the best articles about the web, bar none. Much good information about style sheets.

The Complete CSS Guide - and it is.