CATEGORIES Auto & Trucks Business & Finance Computers & Internet Education Family Food & Drink Gadgets and Gizmos Health Hobbies Home Improvement Humor Kids & Teens Legal Marketing Men Music and Movies Online Business Parenting Pets and Animals Politics and Government Recreation & Sports Relationships Religion and Faith Self Improvement Site Promotion Travel & Leisure Web Development Women Writing Keyword Search Article Title Author's Name SITE MENU Search Submit An Article Submit Articles in Bulk Submit Press Release Syndicate Articles Distribute Articles Privacy Policy Terms of Use Link To Us Contact Us Site Map Home

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 Read More Articles from the "Web Design and Development" Category: Importance of Building Backlinks by Rob Ferrall The Power of Effective Brochures by Karen Nodalo Learning difficulties & web accessibility by Tim Fidgeon Absolute & Relative Links How Do They Rank? by Martin Lemieux Designing Professional Web Pages by Joanne Glasspoole Blogging – Ways To Improve Visibility by Scott Lindsay Seven Secrets For A Better Website by Anne Ahira Quick, Effective Web Design: Templates? by Todd Levi Determine Your Popularity On The Web by Craig Neidel Why People Ignore Your Postcards? by Florie Lyn Masarate << Back to "Web Design And Development" Index

Disclaimer: The information presented and opinions expressed herein are those of the authors
and do not necessarily represent the views of ArticleCity.com and/or its partners.

	Web www.articlecity.com