Things To Do With Hyperlinks

You can add any of these style sheets between your <HEAD> and </HEAD> tags to get some nice effects for your links.'

You change change the following styles for hyperlinks (the <A> tag):

A:hover - The style of the link when the cursor is hovering over it.
A:link - Link style when it appears on the page.
A:visited - Link style after it has been visited.

Change color of background around link

This is a very cool effect. It changes a box around the characters to a different color (in this case red). Check out the example and see how it looks.

<style type="text/css">
<!--
A:link{color:black;text-decoration:underline}
A:visited{color:black;text-decoration:underline}
A:hover{background:af0000;color:white;text-decoration:none}
A:active{color:af0000;text-decoration:none}
-->
</style>

Change the color of link

This style will cause the link text to turn green (or whatever color you specify) when you hover the cursor over the link.

<style type="text/css">
<!--
A:hover {color:green}
-->
</style>

See an example by clicking here.

Remove Underlines From Links

Want to get rid of the underlines from your links? Just use this style. This is great for menus and other navigational systems. This will remove the underlines from the links both before and after they have been visited.

<style type="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
-->
</style>

See an example by clicking here.

Put line over and under link

A cool effect is to add a line over and number the link when you hover the cursor over the link text.

<style type="text/css">
<!--
A:hover {text-decoration:overline underline}
-->
</style>

See an example by clicking here.