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!!

 

References:

* EchoEcho.Com - Tutorial - CSS Links