CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

No Risk, No Contracts! - Learn coding, Web 
Design and More!

Learn faster with my new interactive CSS course for iPad!

CSS: CSS Links, < a > and Hover

Our Hosting Partners:
iPage Affordable Web Hosting only $2.95/mo
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:


No Risk, 
No Contracts.  Learn More.

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


Cascading Style Sheets: an Interactive Tutorial

CSS: CSS Links, < a > and Hover

Welcome to the links chapter. Using links within cascading style sheets was the thing that really drew me in. My guess is half of you ended up at this tutorial and clicked right to links, and half of you ended up here by following the suggested chapter-by-chapter method. If this is your first chapter, please, please, please read the font and text chapter before attempting to use CSS for links. Everything here will make much more sense that way!

Affordable, Online Technology Education - Learn Web Design, Coding & More. 1st Month FREE at TeamTreehouse.com

Yes, yes, yes moment you've been waiting for. Here are the pseudo-classes for the link element. (Remember pseudo-classes and pseudo-elements use a :.)

  • a:link { } - regular link
  • a:visited { } - regular link already visited
  • a:hover { } - any link with the mouse cursor currently over it
  • a:active { } - the split-second a link is clicked

(Please remember that you have to place these styles in pages by one of the methods discussed in the Basics of CSS chapter.)

All of these pseudo-classes can have a color and a background color, fonts, and text properties. (You can also add other CSS properties, try some out!) The fun part comes with hover: because it is responsive to the mouse cursor. I'm going to teach you a few poor design things just so you can get used to how :hover works. Then I'll give some recommendations in the next section.

Imagine a page with links having an underline and the link text being a normal size. When the mouse moves over the link, you want the link text to suddenly lose the underline and you want it to be twice as big (I didn't say your imagination was rational!).

You can't do this with HTML alone. But with CSS, it's this easy:

a:link { text-decoration: underline, font-size: 1em; }
a:hover { text-decoration: none; font-size: 2em; }

link one
link two
link three

Now, you can see this example is somewhat silly, because it's quite obnoxious to have a link be twice as large when it's "hovered." More commonly, it just loses (or adds) an underline, and perhaps changes color slightly. Using CSS, you can add all sorts of fun properties to links.

You can define classes of links. If you want one set of links to be called "greenhilite" you could use a.greenhilite:link, a.greenhilite:visited, a.greenhilite:hover, a.greenhilite:active, and appropriately use it as follows:

a.greenhilite:link { color: blue; }
a.greenhilite:visited { color: purple; }
a.greenhilite:hover { color: green; }

<a class="greenhilite" href="http://www.davesite.com">davesite.com</a>

davesite.com

advertisement
Our Hosting Partners:

The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.

iPage Hosting $4.25/mo
1&1 Hosting $6.99/mo

Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.

Be rewarded for watching cool online videos at Swagbucks!
The more you watch, the more Reward Points you earn! Join Today