65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/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
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!
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!
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; }
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>
| < Ch. 5 part 2 | > continue to Ch. 6 part 2 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!