Here are a few tips and tricks using CSS or Cascading Style Sheets to put a few special effects on your web pages.

Just copy and paste the sample code…

Side Note: This article was written in 2008 so some of the references may be out-of-date.

Roll-over Color Text Links

Your text links will change color as the mouse passes over. Insert this code into the <HEAD> of your document…

<style type=“text/css”>
<!–
A:hover {color:red}
–>
</style>

Links with no Underline

Put this code in the <HEAD> of your document to remove the underline from all links on your page…

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

Or, remove the underline from individual links like this…

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

Links with a Line Above and Below

This works well as a hover attribute on links, but can also be applied to all of your links. It will show the normal underline plus a line above the link too…

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

Sample Link with a Line Above and Below

Highlighted Text

To highlight important text on your page or just to get words to stand out…

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

Sample Highlighted Text

To highlight all links on your page, put this code in the <HEAD> of your document:

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

Background Images

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 the image on the web page…

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