Alexandre Figueiredo

Links can be displayed in many ways in a CSS-supporting browser. You can style the same link in different ways using CSS pseudo-classes. These are used to add special effects to some selectors. The list of properties you can use is huge. You can use text, font, background, border, padding, margin and a lot more.

Example:

a:link {property:value;} for a unvisited link
a:visited {property:value;} for a visited link
a:hover {property:value;} for a mouse over link
a:active {property:value;} for a selected link

Note: in order to be effective these declarations must came in this specific order. For example, a "a:hover" MUST come after "a:link" and "a:visited" in the CSS definition. You can memorize it easily if you think of LoVe and HAte.

When I style links in my websites, I usually use just two declarations:

a {property:value;}
a:hover {property:value;}

Because I want a:link, a:visited and a:active to look the same and only a:hover to be different from the other three.

Let's see some examples:

Note: You can see and try working examples in the Demo webpage.

1 - Text underline on mouse over

Code:

a {text-decoration:none;}
a:hover {text-decoration:underline;}

2 - Background change on mouse over

Code:

a:hover {background:blue;}

3 - Background change and bold on mouse over

Code:

a:hover {
  background:gold;
  font-weight:bold;
}

4 - A dashed border on mouse over

Code:

a:hover {
  border-width:1px;
  border-style:dashed;
  border-color:darkblue;
}

Or, with shorthand CSS

a:hover {border:1px dashed darkblue;}

5 - A button

Code:

a {
  padding:10px;
  border:1px solid #fff;
  background:#ddd;
  color:black;
}
a:hover {
  border:1px solid #ddd;
  background:#bbb;
  color:white;
}

6 - An image with a 5 pixels coloured border on mouse over

Code:

a img {border:5px solid white;}
a:hover img {border:5px solid lavender;}

Do not forget to check the Demo webpage for some working examples.