HI
Class selectors are created by typing a dot followed by the class name. Before you start putting in these, you should have an existing stylesheet or style block to add them to. That was all covered in the intro to CSS. Now, say you wanted to format lots of individual pieces of text as 12 point red Verdana. Adding the font face, color and size HTML around every instance where you want this type of text is a load of code, and a whole load of coding. This is the beauty of classes. Put this line of CSS into your style:
.caution {font-family: Verdana; font-size: 12pt; color: red; }
Note the dot before the name you want to use for it. You've just set up a class. Now, you can add class="caution" to any element and it will be formatted as such. Try it out on a couple of tags, like <p class="caution"> and <h1 class="caution">. When you're giving the name of the class here, the dot does not appear. Try to name the classes based on their function rather than their presentation.
Pseudo-classes of CSS
Pseudo-class are an interesting group of selectors in CSS that apply to elements when they're in a certain state or condition, such as with a link, when the mouse is over it. This makes for some interesting and lightweight visual effects.
A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { background-color: yellow } /* user hovers over link*/
A:active { color: lime } /* active links */
Regards
Jun 20, 2010