Webmaster Logo.Learn HTML and CSS.  
Click to see the benefits of becoming a member.Read the current issue of Almost a NewsletterCool webmaster products.Contact us.   Log in to the webmaster's member area.
About This Tutorial
This is one of dozens and dozens of tutorials in the Webmaster section of the member-only area.

The tutorials can walk someone new to web design through the entire process of creating a web site. For experienced webmasters, you'll be able to jump right into specific tutorials in areas where you'd like to learn more.

All the tutorials are well-written, and technical jargon is kept to a minimum. Colored text, images, and other visual aids where appropriate help making learning easy, and bits of humor here and there help make learning fun.

CSS Classes
CSS allows you to create your own "class" of elements. What that means is that you can create several styles for the same element. By coding a class name into the element for the style you want it to have, an element can have several different looks on the same page.

For example, if I wanted to create some paragraphs of text in blue, some in red, and some in green, I could do so by creating a class for each desired style. Here’s how those three classes would be created in an external style sheet:

p.red {color: red;}
p.blue {color: blue;}
p.green {color: green;}
By placing a period after the p (the HTML name for a paragraph element) and then adding a class name immediately after the period (use no space), I’ve created three different style rules for my paragraphs.

The way to call these styles into action is by adding the class you want to use to a paragraph tag. Here’s an example:

<p class="red">

By adding a space after the paragraph element and then adding class="red" to the tag, I’ve instructed the browser to render the text in that paragraph use the p.red class I created in my external style sheet. By using the name of the class as the value of the HTML class attribute with the element, the browser will use the rules you created for that class. If I wanted the next paragraph in blue text I’d just cancel the first paragraph and start a new one, only this time I’d add the class of blue to the <p> tag.

Just because I named the class for red text as red, doesn’t mean I had to name it that way. I could have named the red class blue if I wanted to, or SillyWiggles, or Mary – whatever I wanted – but as I always say, it’s easier to keep track of things if you use sensible naming conventions. If I want a paragraph to have red text, it’s much easier to remember class="red" makes red text than it is to remember that class="blue" makes red text.

A class can have any name you want to give it as long as it begins with a letter. The first character of a class name cannot be a number. Also, class names are case sensitive, so a class named red is not the same as a class named Red.

To be compatible with older browsers, however, you also shouldn’t name any class with a name that matches JavaScript keywords. For example, you might want to use “default” as a class name to define your normal page text, but that will generate and error in Netscape 4. Here are the words you shouldn’t use in naming your CSS classes:

abstractbooleanbreakbytecasecatch
charclassconstcontinuedebuggerdefault
deletedodoubleelseenumexport
extendsfalsefinalfinallyfloatfor
functiongotoifimplementsimportin
instanceofintinterfacelongnativenew
nullpackageprivateprotectedpublicreturn
throwsshortstaticswitchsynchronizedthis
throwtransienttruetrytypeofvar
voidwhilewith  

You probably won’t need that list often, but it’s the first thing to check if you name a class that generates an error message in Netscape 4 or other older version browsers. That's all there is to creating a CSS class.

Um...class dismissed.

As a member, you'd have access to dozens and dozens of quality tutorials like this one. You can hunt and hunt the web for good tutorials, or you can just come here and learn all about web design in one place.

Back