Text Rollovers

One of the most common ways to use CSS is to add effects to text links. Take this example:

hover your pointer over this link



This is the code that produces it:

<style type="text/css"><!--
a:link {color:color1; text-decoration:none}
a:active {color:color2; text-decoration:none}
a:visited {color:color1; text-decoration:none}
a:hover {color:color2; text-decoration:underline overline}
--></style>


How does it work?

a:link applies to unvisited links.
a:active applies to a link being clicked.
a:visited applies to visited links.
a:hover applies to a link with the pointer over it.

Apart from changing the color and text decoration, you can also make them bold {font-weight:bold}, italic {font-style:italic} or give them a border {border:thin solid green} or a background color {background-color:gray}.

Custom Cursors

You can also change which cursor will be used on your pages. Hover your pointer over the links below, the cursor should change with each one.

To change the cursor when it hovers over links, use the following code:

<head>
<style type="text/css"><!--
a:hover {cursor:n-resize}
--></style>
</head>


Change n-resize to whichever cursor you prefer. To change the cursor on a per-link basis, add the code to each link instead. Like this:

<a href="page.html" style="cursor:crosshair">click here</a>

It is also possible to have completely customized cursors. If you've downloaded or made your own original cursor that you'd like to show up on your page, use this code:

<head>
<style type="text/css"><!--
a:hover {cursor:url("custom.cur"), pointer}
--></style>
</head>


"custom.cur" is the relative URL of your custom cursor file, uploaded to your server space. "pointer" is the general cursor that will be used if the custom cursor is missing, or if this function isn't supported by a viewer's browser. Here is an example, with a custom cursor I made myself:

hover your pointer over this link