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):
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.
Unless otherwise noted, all photos and text is Copyright © Richard G Lowe, Jr.