Create a Text Rollover

Click here for Spanish translation

In this tutorial I was show you how to create these nifty text rollovers. I assume you have a basic knowledge of HTML, and know what CSS is. If you have any questions or comments e-mail me. (That link is an example of a text rollover). Use this technique to remove the underline from links, or highlight text, etc.

This first step is to decide whether you are using a Inline Style, and Embedded Style Sheet, or an External Style Sheet. I will be showing you how to do it using a embedded style sheet, but it is easy to convert to fit your preferences.

Under the <HEAD> tag of your web page, you need to add a style tag, as shown below.



<HEAD>
<STYLE TYPE="text/css">
<!--


-->
</STYLE>
</HEAD>
....

Now you need to add the styles. I am assuming you are using it for a link, so I will use the anchor tag.



<HEAD>
<STYLE TYPE="text/css">
<!--

a:link { color:#001760;}
a:hover { color:#FFF000;}


-->
</STYLE>
</HEAD>
....

This will create a blue link, that when the mouse hovers over, will change to yellow, like this.

When making a rollover, you can do more than a color swap. By using CSS properties, you can change the font, size decoration, etc. For example:



<HEAD>
<STYLE TYPE="text/css">
<!--

a { color:#001760; text-decoration:none;}
a:hover { color:#001760; text-decoration: underline; }


-->
</STYLE>
</HEAD>
....

This will get you a link like this. The only mandatory parts you need to change to create a rollover is the link, and hover styles. Here is a list of attributes you can add to create a custom rollover:

"font-family: times;"-Changes the font. Example Link.

"font-style: italic;"-Make the text italic. Example Link.

"font-variant: small-caps;"-Make it in small caps. Example Link.

"font-weight: bold;"-Change the boldness. Example Link.

"font-size: 18px;"-Change the font size. Example Link.

"color: #ff0000;"-Changes the color. Example Link.

"text-decoration: line-through;"-Add an underline, overline, line-through, or blink. Example Link.

This is just a sample of what you can do. To learn more, try looking at a CSS reference guide.

I also highly recommend getting the Web Developer Extension for Firefox. This will let you edit CSS on the fly on any web page (great to experiment with).


Thats all there is to it! Easy, huh. Good luck!


Warning: require(/home/zimmer/zimmertech.com/css/images/404.php): failed to open stream: No such file or directory in /home/zimmer/zimmertech.com/tutorials.php on line 56

Fatal error: require(): Failed opening required '/home/zimmer/zimmertech.com/css/images/404.php' (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/zimmer/zimmertech.com/tutorials.php on line 56