WebsiteDays.com create your web site free, Hosting, Coding, E-commerce, Free Website Builder. Download free website builder to create your website! Personal, and ECommerce website builders...

WebsiteDays.com for russia kaliningrad

Click on your region below to contact a Websitedays.com designer, or Websitedays.com sales person for info about Online Website builder system.

You can also send an email to

and we can forward your enquiry to respective designers in your area.

Almetyevsk Arkhangelsk Astrakhan
Barnaul Bryansk Chelyabinsk
Dagestanskiye Ogni Dmitrov Dubna
Dzerzhinsk Ekaterinburg Gatchina
Irkutsk Ivanovo Izhevsk
Kaliningrad Kazan Khabarovsk
Krasnoyarsk Kubinka Kursk
Kuznetsk Moscow Murmansk
Nizhni Novgorod Novgorod Novorossiysk
Novosibirsk Obninsk Omsk
Orenburg Penza Perm
Pervouralsk Petrozavodsk Pskov
Rostov-on-Don Samara Saratov
Sarov Sergiev Posad Severomorsk
Shchelkovo Smolensk St Petersburg
Staritsa Stavropol Taganrog
Tomsk Tver Ufa
Ulan-Ude Ulyanovsk Vladivostok
Volgograd Voronezh Yaroslavl
Yegoryevsk Yekaterinburg Yoshkar-Ola
Zelenodolsk Zhukovsky

»   Fun CSS Tricks You Can Use

Article submitted in category: Web Design And Development
Tags: | links | <style type="text/css | --> </style> | <style type="text/css <-- | type="text/cs

Fun CSS Tricks You Can Use by: Dan Grossman

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.

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>

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

This article was posted on January 17, 2002