CSS enables you to style links using different methods:
a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}

Here is a brief summary of what purpose each item on the list serves:
The first one sets a link’s color in standby mode:
a:link {color: #009900;}

The next one determines the color of a link when the url has already been visited:
a:visited {color: #999999;}

The following rule sets which color a link turns into when the cursor hovers over the link:
a:hover {color: #333333;}

The fourth item is essentially similar with the first one. However, this one is used for users that use the tab keys to navigate through links instead of a mouse. It sets the color of a link once the user tabs through the link.
a:focus {color: #333333;}

The following appoints an alternate color once a link is pressed:
a:active {color: #009900;}

Let’s take a look at Google as an example. If your last visit to Google was not stored in your cache, the above link that would direct you to Google will be colored blue. But once you have been to Google, the link will turn to grey. Every time you mouse-over or tab through the links, they will turn to dark grey and if you click and hold the link for sometime, it will return to its original color.

In styling links, you must first declare the a:link and a:visited before specifying the a:hover. As it is, you must also first declare the a:hover before the a:active.

Apply the above codes to customize all links on your website. You could declare a separate set of link styles for certain portions of a web page if you prefer.

Pseudo Classes
Pseudo classes could be used to customize the colors of links placed in different sections of a web page. For instance, if you want the links in your content area to have a color that is different from the links in a page’s left or right column, then you use a pseudo class such as the following:
#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;}

If for example, your main content is placed in a web page section under the “content” division, each link in that division will be styled according to your declaration using this style selector. You could opt to use a different name for your selector by changing the #content selector to something else identical to your division name.

Use the following pseudo classes for links in a column:
#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;}

Similar to the earlier example, any of these rules take after the column division name so just alter the name to match the one on your web page. The same process also applies to 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;}

However, it is a must to add a class to every link if you use a pseudo class.
<a class=”column” href=”" title=”">some link text</a>
There is also a simpler 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 add the following to the (X)HTML file:
<div class=”column”>
<a href=”" title=”">some link text</a>
</div>

Of course, color is just one of the many properties you could manipulate when it comes to links. Almost any property that can be applied to customize text and links could also be used for styling links.

Tags: Styling Links in CSS