How to Use CSS Pseudo-Classes

Most CSS styles 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. The following six steps show you how to use CSS pseudo-classes in an existing HTML document.

A link can have the following pseudo-classes:

a:hover
a:visited
a:active

Here's how you use these CSS pseudo-classes:

Start with the following HTML document:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Links</title>
</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>

<p>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.</p>

</body>
</html>

Add the style tag under the title tag and add the a tag style information.

<style type="text/css">
	a {
		color: #000066;
		text-decoration: none;
		cursor: pointer;
	}

The a:hover class indicates the mouse pointer is over the link. Add this code to your style tag:
```
	a:hover {
		color: #ff6600;
		text-decoration: underline;
	}
```
This code makes the link blaze orange when you hover over it, like so:
The a:visited class indicates the link has been visited. Add this.
```
	a:visited {
		color: #336699;
	}
```
This code changes the color of the link to blue after it's been clicked.
The a:active class indicates the link is active (e.g., the user has clicked it). Add this.
```
	a:active {
		color: #ffcc99;
		cursor: wait;
	}
```
This code turns the link to peach-orange, and the link stays that color until the user completes the click:

The full code for using these pseudo-classes looks like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<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>

<p>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.</p>

</body>
</html>