HTML and CSS Reference
In-Depth Information
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…
Q:
What happens if I just style the <a>
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.” Setting a value for
the focus pseudo-class is helpful for accessibility
because those who need to use a keyboard to
access a link (as opposed to a mouse) will know
when they've got the right link selected. The active
state occurs when the user first clicks on a link.
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,
hover, focus, 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
pseudo-classes…
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 topic. Right? But hold on!
Pretend we never said the word
pseudo-class,
and let's just
look at how you can style your links:
No
tice we
have
the ele
ment <
a>, foll
owed b
y a : (c
olon),
fo
llowed
by the
state
we wan
t to se
lect. M
ake sur
e you
don't
ha
ve any
spaces
in thes
e select
ors (e.
g., a : l
ink won
't wor
k!)
This
selector
is app
lied
to lin
ks whe
n they
are
in an
unvisit
ed stat
e.
a:link {
color: green;
}
And this selector
is
applied to links w
hen
they are visited.
a:visited {
color: red;
}
a:hover {
color: yellow;
}
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).
