Affordable, reliable
web hosting solutions

> > > HOME / BUILD / PROGRAMMING / CSS /

Fun CSS Tricks You Can Use!
Article by Dan Grossman

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

1 2