Link - hover, visited, active

Add This To Del.icio.us Share on Facebook StumbleUpon This Add to Technorati Digg This

Have you noticed that almost all the links in my blog(except blog title, post title and link from external gadgets) appears in Blue and when you place mouse over it, text becomes underlined and colour changes to Amber.

In your case, these default colour of Link (hover/visited/active) may be different.
In this post, we will try to understand this Concept.
(For reference, I will take example of Minima template. Once you understand the basics, you can decipher it for your blog also.)

If you go to Layout - Edit HTML, you will find HTML code of your blog.In the very beginning, some variables are defined. They appear as:-

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0033ff">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc8900">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#0033ff">

These are variables and are used in the code. Now, we will go to link section:-

body {
background:#ffffff;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

What do these line mean?
Default Link
a:link {
color:$linkcolor;
text-decoration:none;
}

This says that link colour will be $linkcolor (see variable - its value is #0033ff -- This Colour). There is no text decoration for default link (no italics, no bold, no underline, etc)

Visited Link
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

This says that visited link colour (once you click on the link and return to the parent page again), will be $visitedlinkcolor (see variable - its value is #0033ff -- This Colour).

Hover Link
a:hover {
color:$titlecolor;
text-decoration:underline;
}

This says that Hover Link (when mouse is placed over a link) colour will be $titlecolor (see variable - its value is #cc8900 -- This Colour).
Also, text decoration is underline. Thus Hover Link is always underlined in Minima template.

If you want to override these default colour or style, you can easily do it by changing colour code in variable, declared. Else it can be done by overriding at link setting.
Example:-
Variable override
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0033ff">

If you want that all default link should appear in Yellow, change above variable as:
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ffff00">

Else, change is to Link level:-
a:hover {
color:$titlecolor;
text-decoration:underline;
}

to

a:hover {
color:#ffff00;
text-decoration:underline;
}

List of HTML Color Code

For Further Reading,