Fun CSS Tricks You Can Use! more tricks |
| CSS or Cascading Style Sheets allow you to implement a few neat effects on your web pages easily. You can implement these CSS effects on your site by simply copying and pasting the code. |
ROLLOVER COLOUR TEXT LINKS |
| Have your text links change colour 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 ISN'T 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 centre it, however it will be centred as the background of the entire document, not centred on the screen: more tricks | <style type="text/css">
<!--
BODY {background: #ffffff url(bg.gif) no-repeat center}
-->
</style> |
