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
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
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.
Search WWH ::

Custom Search