Chapter 11 : CSS Anchors, Links and Pseudo Classes

by Unknown Saturday, March 03, 2012 0 comments

Below are the various ways you can use CSS to style links.

a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}

Now lets take a look at what each one of the above link styles actually does.

a:link {color: #009900;}

The first on the list sets the color of a link when no event is occuring

a:visited {color: #999999;}

The second sets the color a link changes to, when the user has already visited that url

a:hover {color: #333333;}

The third sets the color a link changes to as the user places their mouse pointer over the link

a:focus {color: #333333;}

The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links

a:active {color: #009900;}

The fifth on the list sets the color a link changes to as it is pressed.

Lets look at an example: Google

If your last visit to Google is not stored in your cache than the above link to google is blue, if you have already been to google then the link should be grey. if you mouseover or tab through the links, the link will change to dark grey, and last but not least if you click and hold the link without releasing it you will see it return back to the original blue color.

  You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must declare a:hover before you can declare a:active.

Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpage.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#content a:link {color: #009900;}
#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}

Now assuming that you have your main content in a division named “content” all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name.

Then for the links in a column you could use the following:

#column a:link {color: #009900;}
#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}

Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id.

a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}

Though in this case you will need to add a class to each link

<a class=”column” href=”" title=”">some link text</a>

But, there is still yet an easier way

.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}

Then in the (X)HTML file

<div class=”column”>
<a href=”" title=”">some link text</a>
</div>

There are other properties that can be added to links other than color, I was just trying to keep it simple. Almost any property that can be used to style text and fonts can be used to style links also