Changing the Way Links Look

Although CSS is pretty well know, I still often get or see questions about how to change the way links look and act. Using CSS, it's easy to change link appearance and behavior.

Here are the four CSS aspects of a link that you can affect:
A:link - base appearance of the link
A:visited - the way the link looks after it has been clicked on
A:hover - the way the link looks when the user hovers the mouse pointer over it
A:active - the way active links look; a link becomes active once you click on it

Example: remove underline and make links red on mouseover:

<STYLE TYPE="text/css">
<!--
a {text-decoration: none;}
a:hover {color:red;}
-->
</STYLE>

Note that by assigning value to the base 'a' tag, you change the appearance of ALL links. What if you only want to change some? Enter the subclass::

<STYLE TYPE="text/css">
<!--
a.LinkStyleOne:link {text-decoration: none;}
a.LinkStyleOne:hover {color:red;}
-->
</STYLE>

You would then contstruct the link like:

<a href="http://www.SomePlace.com/" class="LinkStyleOne">Link Text</a>

Using CSS you can change all sort of aspects of link appearance, highlight color, underline style, background color, size and much more.