Fun CSS Tricks You Can Use


HTML : Fun CSS Tricks You Can Use	Homepage \| Add to Favorites

Recommended Sites

Related Links

Informative Articles

Be friendly to search engines
The object of search engines is to give their visitors a list of web pages relevant to the search words, in the order of relevance to the search words. So what do they want from websites? Relevance to a search: <ul> <li> The...

Column Designs with CSS
So CSS makes layouts easier than they were with tables - there's not really much debate about that. One of the reasons many people stuck with tables for so long (and, in fact, still stick with tables to this day) is that it can be difficult to...

Customers Don't Always Connect Where They Live
Pop Quiz: You have an international website and you want to do business in Canada. But you want to make sure your website delivers top performance to your Canadian customers: speed, accessibility, as well as proper functioning of digital...

How to Insert a Vertical Divider Line into Your Web
Unlike creating a horizontal vertical line by inserting an tag, a simple html code is not available to insert a vertical divider line into your web page. However, there are two simple ways to insert a vertical divider line... 1. Create a...

Um pouco de SIW
Muitas pessoas j� me perguntaram o que é SIW. SIW é a sigla de Sistemas com Interface Web. O SIW é o desenvolvimento de Sistemas normais utilizando a Interface Web, que tem diversas vantagens perante a interface gr�fica normal, como: -...

Fun CSS Tricks You Can Use

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