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:
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;} a.top {text-decoration:none;} a.top:hover {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.
