Style Sheets: A Primer
Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS
Creating Roll-Overs with CSS
Technically, we will be using something called pseudo-classes to create CSS roll-overs. A pseudo-class is just that; it's not exactly a class of its own, but it does have special functions. Hypertext links or anchor tags (<a>) have special pseudo-classes. Let's add a few lines to our style sheet and I'll show you what I'm talking about.
four new lines do quite a bit of work with very little time investment.
You'll notice that I've used hex codes instead of color names. #FF8C00
is Dark Orange, #ADD8E6 is Light Blue, and #FF0000 is Red. The first
(a:link) styles all of your links in Dark Orange. That's simple enough.
(or keeps) all visited links Dark Orange...you could easily change the
color of all visited links by changing the hex code or putting
color name. The third (a:hover) makes the roll-over effect. When a
user hovers or mouses over the link, the background changes to Light
Blue, the text stays Dark Orange, and the underline disappears.. If
you don't like those colors, just change them for a different effect...make
want...roll-overs were intended to capture attention. If you want to
keep the underline on the hyperlink, just leave out the text-decoration
declaration and it will default to underline. The last line (a:active)
is optional. The active link is simply the color
linked text changes to while the new page is loading. If a user has
a broadband connection, many times the new page will load so quickly
that they won't even notice an active link. Users with a dial-up connection, however,
may appreciate this added feature. You should also notice that when you
do this, your <a> tags will inherit all the declarations you wrote for
the rule governing the <body> tag. So they (your links) will also be
12 pixels high, in the same font,
but their colors are different and therefore, the declarations made
earlier in the <body> tag (at least the ones concerning color) are overridden. If you wanted your links to
be bigger or in a different font, you'd simply add those declarations
to the appropriate CSS rules (which in this case are the anchor pseudo-class selectors which we've set up).