Links -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

Cascading Style Sheets: an Interactive Tutorial

Links

part 2

advertisement

advertisement
#1 Web Hosting Plan! Free Software & Tools!
1000GB space, 1000GB bandwidth, just $6.95!

So you've seen a terrible way to use hover, and a pretty good way to use hover. The three most common ways people use hover are as follows:

Add an underline on a link without an underline on hover
Remove an underline on a link with an underline on hover
Add a background color to the link on hover (possibly in combination with either method above, or even alone.)

So this should be simple enough. To add an underline, your style could look like this:

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

To remove an underline, your style could look like this:

a:link { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

To change the background-color, simply add it inside :hover (and :active if you'd like):

a:link { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:hover { text-decoration: none; background-color: #DDDDDD; }
a:active { text-decoration: none; background-color: #DDDDDD; }

Want to test your skills? Try making a link that is red without an underline before it is clicked, and blue with an underline when the mouse hovers it. (Remember underline is a text-decoration from the text chapter.)
<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Click here if you get stuck or if you want to see how I did it.
advertisement

< Ch. 6 part 1 > Chapter 7

Chapter Selection

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

[ jump to top ]

Learn about the #1 Ranked Web Host. 100 GB Space.
Up to 7 Web Sites. Free Domain & Setup. Click Here.