CSS and Links
- To work with pseudo-classes.
- To work with the a:hover property.
- To work with the a:visited property.
- To work with the a:active property.
Pseudo-classes
The styles we have seen so far are attached to element names (e.g, div), class or id attributes (e.g, .big, #wrapper), or position in the page structure (e.g, ul ul). Pseudo-classes are used to classify elements by other means. The syntax of pseudo-classes is element:class.
Currently, the best supported pseudo-classes all apply to link states. A link can have the following pseudo-classes.
- a:hover - indicates the mouse pointer is over the link
- a:visited - indicates the link has been visited
- a:active - indicates the link is active (e.g, the user has clicked down on it)
Code Sample: Links/Demos/Links.html
<html>
<head>
<title>CSS Links</title>
<style type="text/css">
a {
color:#000066;
text-decoration:none;
cursor:pointer;
}
a:visited {
color:#336699;
}
a:hover {
color:#ff6600;
text-decoration:underline;
}
a:active {
color:#ffcc99;
cursor:wait;
}
</style>
</head>
<body>
<h1>CSS Links</h1>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a><br />
<a href="http://www.webucator.com">Webucator</a><br />
<a href="http://www.google.com">Google</a><br />
<h3 style="color:red; margin-bottom:2px;">Important Note</h3>
Order matters. If <span style="font-family:monospace">a:active</span>
precedes <span style="font-family:monospace">a:hover</span>,
the effects in <span style="font-family:monospace">a:hover</span> will
take precedence. So, in this example, you would not see the color
change when the user clicks down on a link.
</body>
</html>
The code above will change how links look as the user interacts with them. To see the effects, open the page in a browser.
Note that a link can be in more than one state. For example, a link can be both visited and active. As a result, the order of the style rules matters.
If a:active precedes a:visited, then the rule for a:visited will take precedence. This means that, where there are conflicts, those properties defined for a:active will not be seen for visited links.
CSS Button Links
Using these pseudo-classes, it is possible to create links that look like buttons, something you needed images to do before CSS. The following example illustrates this.
Code Sample: Links/Demos/LinkButtons.html
<html>
<head>
<title>CSS Link Buttons</title>
<style type="text/css">
a {
background-color: #663366;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
color:#ffffff;
text-decoration:none;
font-family: Impact;
text-align: center;
font-size:small;
padding: 4px;
margin: 2px;
}
a:hover
{
color:#ccffff;
border: 1px solid #9999ff;
}
a:active
{
color:#ffcc99;
border-left: 3px solid #666666;
border-top: 3px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
padding: 3px;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</body>
</html>
The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state.
CSS and Links Conclusion
In this lesson of the CSS tutorial, you have learned to use CSS pseudo-classes to create more visually appealing links.