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

CSS: CSS Links, < a > and Hover

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

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!

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

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.