6.2 CSS Link Styling
advertisement
CSS Link Styling
The Anchor Element:
Link text between the opening <a> and closing
</a> can be styled using CSS. Some of the
properties that can be set are:
• font-family, font-size, font-style, font-weight
• color
• background-color
• text-decoration
Link States:
The <a> element is unusual in that it can be in
one of four different conditions - or "states" and we can define separate styles for each of
these states. The four states are:
1. a:link
= unvisited link (default state)
2. a:visited
= previously visited link
3. a:hover
= link being moused over
4. a:active
= link being clicked
Example of CSS Link Styling:
<head>
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color:blue;
}
a:active {
color:orange;
}
</style>
</head>
<a href="http://www.google.com">
Link to Google
</a>
After the link
was clicked
and we
returned to
this page.
As we are
actually
clicking on
the link.
Note: Always list these properties
and states in the order shown.
Mixing their order on your style
sheet can result in unpredictable
results.
