ROLLOVER COLOR TEXT LINKS

Have your text links change color when the mouse passes over them by inserting this code into the HEAD of your document:

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

LINKS WITH NO UNDERLINE

Remove the underline from any or all of the links on your page by putting this in the HEAD of your document:

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

Or, remove the underline form individual links by forming them like this:

 <a href="page.html" style="text-decoration: none">link</a>
 

LINKS WITH A LINE ABOVE AND BELOW THEM

This is an interesting look that works especially well as a hover attribute for your links, but can also be applied to all of your links. It will show the normal underline and a line above the link:

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

HIGHLIGHTED TEXT

Highlight important text on your

 <span style="background-color:yellow">highlighted text</span>
 

Try adding it to your link hover for a neat effect:

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

BACKGROUND IMAGE THAT ISNT TILED

This will create a background image that doesn't repeat:

 <style type="text/css">
<!--
BODY {background: #ffffff url(bg.gif) no-repeat}
-->
</style>
 

You can also center it, however it will be centered as the background of the entire document, not centered on the screenful:

 <style type="text/css">
<!--
BODY {background: #ffffff url(bg.gif) no-repeat center}
-->
</style>
 

About The Author

Dan Grossman runs http://www.websitegoodies.com where you can find over 250 hand-picked resources, articles, and tools! Dan also publishes the free weekly "WebDevPortal" newsletter for website owners! Subscribe today and get articles like this every week: subscribe@websitegoodies.com?subject=article-subscribe