CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

CSS: CSS Links, < a > and Hover

Chapter 6 part 2 (of 2)

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.

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.