Tuesday, January 8, 2008

Formatting link style using CSS

If you do not define the link style, by default, the link will always be underlined.

We can use CSS to format the style.

There are 4 selectors for links:

a:link defines the style for normal unvisited links.
a:visited defines the style for visited links.
a:active defines the style for active links.
A link becomes active once you click on it.
a:hover defines the style for hovered links.
A link is hovered when the mouse moves over it.

These are some of the styles I use:

Solid underlined link
No underlined link
Dotted underlined link

 

I want my links to be underlined when they are at normal state, visited state and also active stated, but no underlined when mouse over it:

a:link, a:visited, a:active
{
color: #2666a6;
text-decoration:underline;
}

a:hover
{
color:#2666a6;
text-decoration: none;
}

If you want to have the dotted underlined links, you may declare it like this.


As there's no text-decoration as dotted underlined, so we make use of the bottom border.


a:link, a:visited, a:active
{
color: #2666a6;
text-decoration:none;
border-bottom:dotted 1px #2666a6;
}

a:hover
{
color:#2666a6;
text-decoration: none;
border-bottom:none;
}

Have fun!! Happy

 

References:

* EchoEcho.Com - Tutorial - CSS Links