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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
div {
width:300px;
}
a {
display:block;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
}
a:hover
{
color:#030;
border: 1px solid #9999ff;
}
a:active
{
color:#aca;
border-left: 2px solid #030;
border-top: 2px solid #030;
border-right-width: 0px;
border-bottom-width: 0px;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
<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>
</div>
</body>
</html>
The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state. Note that some of the properties (e.g, border, margin, and padding) used in this have not yet been covered.
Exercise: Modifying Links
In this exercise, you will modify the look and feel of the links in Stories.html.
- Open BordersMarginsAndPadding/Exercises/Stories.html, which you were working on in the last lesson and save it in the Links/Exercises directory.
- Modify the link styles on the page. You are also welcome to add additional links to the page. The object of this exercise is to get used to working with link properties and pseudo-classes.
- When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.
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.