CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

davesite.com / webstation / css other topics: html / web site design / JavaScript / Internet 101

Our Hosting Partners:

iPage Hosting $4.25/mo
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $4.95/mo
Globat $4.44/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:

CSS Code Tutorial Chapters:

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

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]

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

Dave has a New Course for your iPad!
Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!

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.

< Ch. 6 part 1 > continue to Chapter 7

advertisement

Our Hosting Partners:

iPage Hosting $4.25/mo
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo

Free Domain Name If you Order Today!