davesite.com / webstation / css

Cascading Style Sheets: An Interactive Tutorial for Beginners

CSS Code Tutorial Chapters:

CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]
Cascading Style Sheets: an Interactive Tutorial

Links

part 2

advertisement

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

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

advertisement

affiliate_link

< Ch. 6 part 1 > Chapter 7

Copyright © 2002 Dave Kristula. All Rights Reserved.