HTML and CSS Reference
In-Depth Information
a:link
Unvisited link
a:visited
Visited link
a:hover
Link when the mouse is over it
a:active
Link at the point of being clicked
a:focus
Link when it has focus (for example, when accessed by the Tab key)
For the styles to work correctly, the cascade depends on this order being preserved. Many designers use the
mnemonic
LoVe-HAte
to remember the correct order of pseudo-classes. The capital letters refer to the first letter
of each one—
L
for
:link
,
V
for
:visited
, and so on.
It's common to create separate styles for
:link
and
:visited
, but the
:hover
pseudo-class is often
combined with the
:active
and
:focus
styles.
exerCiSe: Styling linkS in diFFerent SeCtiOnS
This exercise shows you not only how to apply styles to links with pseudo-classes, but it also demonstrates
the effects of inheritance through the cascade. After creating basic styles for all links, you'll learn how to use
descendant selectors to apply different styles to links according to where they are in the HTMl family-tree
hierarchy.
1. Continue working with
basic.html
and
basic.css
from the preceding exercise.
Alternatively, copy
basic 01.html
and
css/basic 01.css
from the
end
folder for
this chapter.
2. Add the following style rule at the bottom of
basic.css
to set the basic styles for all
links:
a {
font-weight: bold;
text-decoration: none;
}
3. save the style sheet, and reload
basic.html,
l in a browser. All links are now bold, and
the underline has been removed; but they still retain the browser's default colors.
4. Change the text color for unvisited and visited links by adding the following styles:
a:link {
color: #8D0E6B;
}
a:visited {
color: #B53392;
}
5. save the style sheet, and test the page again. Unvisited links are deep magenta;
visited links are a lighter shade of magenta. if all links look the same, click the last
link in the unordered list to visit the Apress website. When you return to
basic.html
,
the color of the link should have changed.
