digital pet portraits

Lesson 3: Class Selectors

Making Classes

By making different "classes" of selectors you can choose which links on a webpage are to be affected by the CSS code. Classes are made by giving the selector a name, any name:

a.sidebar {color:red;}
a.sidebar:hover {color:blue;}

The name given to the selectors in the example is sidebar, notice that the name is separated from the selector with a dot, and there is a colon between the name and the word hover

Next we insert the class attribute into the anchor tags of the links we want affected by the CSS code:

<a href="filename.html" class="sidebar">Your link</a>

As you have probably guessed, any anchor tag that contains class="sidebar" will have red links that turn blue when the mouse pointer is placed over the link.

Multiple classes of selectors can be made so that some tags will obey one set of commands while other tags obey another set of commands:

a.sidebar {color:red;}
a.sidebar:hover {color:blue;} {text-decoration:none;} {text-decoration:underline;}

In the example every anchor tag that contains class="top" will have an underline appear on the mouseover while those tags with class="sidebar" will change color on the mouseover.

Classes are not just for links, but can be used for any HTML tag as you will learn in the next lesson on Lesson 4: Selectors.

Unlimited Bandwidth
Low Price


You can register a website address (called a domain in tech talk) even before you have a website. In fact the longer you wait the more difficult it will be to get one that isn't already taken. More Info

ComboInk Free Shipping for Order over $50