Head First HTML with CSS

How can you style elements
based on their state?
A link can be in a few states: it can be unvisited, visited,
or in the “hover” state (and a couple of other states too).
So, how do you take advantage of all those states? For
instance, it would be nice to be able to specify what the
visited and unvisited colors are. Or maybe highlight the
link when the user is hovering over it. If only there were
a way...
Well, of course there is, but if we told you it involves
using pseudo-classes you’d probably just decide you’ve read
enough for the night, and close the book. Right? But
hold on! Pretend we never said the word pseudo-class and
let’s just look at how you can style your links:
Notice we have the element , followed by a
“:”, followed by the state we want to select.
a:link {
color: green;
}
a:visited {
color: red;
}
a:hover {
color: yellow;
}
Exercise
This selector is applied
to links when they are
in an unvisited state.
And this selector is
applied to links when
they are visited.
And this selector
is applied when you
hover over a link.
Add these rules to the bottom of your
“lounge.css” file and then save and reload
“lounge.html”. Play around with the links to
see them in each state. Note that you might
have to clear your browser history to see the
unvisited color (green). Once you’re done,
make sure you take these rules out of your
“lounge.css” file before you continue.
there are no
Dumb Questions
divs and spans
Q: What happens if I just style the
element like a normal element? Like:
a { color: red; }
A: You certainly can do that, but then your links
will look the same in all states, which makes your
links less user-friendly because you can’t tell which
ones you’ve visited and which ones you haven’t.
Q: What are the other link states you
mentioned?
A: There are two others: focus and active. The
focus state occurs when the browser focuses on your
link. What does that mean? Some browsers allow you
to press your tab key to rotate through all the links on
your page. When the browser comes to a link, that
link has the “focus.” The active state occurs when
the user first clicks on a link. One word of warning
about these two states: they aren’t well supported by
all browsers yet, so make sure and test them if they
are important to your design.
Q: Can’t my links be in multiple states at
the same time? For instance, my link could be
visited, have the mouse hovering over it, and the
user could be actively clicking on it all at once.
A: They sure can. You determine which style
is applied by the ordering of your rules. So, the
right ordering is generally considered to be: link,
visited, focus, hover, and then active. If you use that
ordering, you’ll get the results you expect.
Q: Okay, I give. What’s a pseudo-class?
A: Only one of the most confusing words in the
CSS language. But, as you’ve seen, styling links is
pretty straightforward. So, let’s talk about pseudoclasses...
you are here 469