CSS Made Easy Web Design for Beginners

The easiest way to create a website for your business. Create your site at Weebly.com!

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 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 need to specify which links will be affected, this is done by opening the webpage and inserting the class attribute into the anchor tags like so:

<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;}

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 Selectors.

© 2014 CSS Made Easy

weebly analytics