CSS or Cascading Style Sheets allow you to implement a few neat effects on your webpages easily. You can implement these CSS effects on your site by simply copying and pasting the code like http://www.websitegoodies.com

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 page or words you want to stand out, easily:

<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>

 

Related Content

Subscribe to the post comments feeds or Leave a trackback