CSS Links Styling

There are four stylesheet entities that govern how your links look:

1. a:link ( unvisited link )
2. a:visited ( visited link )
3. a:hover ( mouse over link )
4. a:active ( selected link )

There are order rules:

First set a:link, second a:visited, then a:hover and last a:active.

The order you define these in is important. If you rearrange them your hover effects may stop working, as they will be overridden.

Example:

a:link { color: #A52A2A; }
a:visited { color: #5F9EA0; }
a:hover { color: #7FFF00; }
a:active { color: #FF7F50; }

Another example:

a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { text-decoration: overline; }

Links can be styled with any CSS property: color, text-decoration, font-weight, font-style, font-family, font-size, background-color and etc.

Example: changing background color of the link

a:link { background-color:#FF8C00; }
a:visited { background-color:#FF8C00; }
a:hover { background-color:#7FFF00; }
a:active { background-color:#DEB887; }

Example: changing color, size, weight, decoration and background color of the link

a:link { 
     color: #5F9EA0;
     font-size: 18pt;
     font-weight: bold; }
a:visited { 
     color: #894f7b;
     font-weight: bold; }
a:hover { 
     text-decoration: overline; 
     background-color: #7FFF00; }
a:active { color: #000; }