facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: CSS and Links

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson you will learn to style links with CSS before, while, and after the user interacts with them.

Lesson Goals

  • Work with pseudo-classes.
  • Work with the a:hover selector.
  • Work with the a:visited selector.
  • Work with the a:active selector.
  • Work with the :target selector.

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

Default State Hover State Active State

The :target Selector

We use targets in URLs - that is, the attribute following the hash (#) in the URL - to open a given page not at the top of the page. A URL such as http://www.example.com/somepage.html#section1 would open the page somepage.html so that the element with id section1 is at the top of the browser (assuming there were enough content below the element to force a scroll). This is a useful way to link to specific content on a longer page.

CSS3 introduced the :target selector, a pseudo-class we can use to style the currently active target. A CSS rule such as

:target {
	background-color: #f00;
}

would style the linked-to element (a div, perhaps) with a red background color. The element would not be red if the element were not the current target. Here's a quick example:

Code Sample:

Links/Demos/Target.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Target</title>
<style>
	:target {
		background-color: #500000;
		border: 2px solid #000;
		color: #fff;
	}
	p {
		font-size: 20px;
		line-height: 24px;
		margin-bottom: 35px;
	}
</style>
</head>
<body>
<h1>CSS Target</h1>
<a href="#section1">Section 1</a><br>
<a href="#section2">Section 2</a><br>
<a href="#section3">Section 3</a><br>

<p id="section1">This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1. This is section 1.</p>
<hr>
<p id="section2">This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2. This is section 2.</p>
<hr>
<p id="section3">This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3. This is section 3.</p>
</body>
</html>

When first opened, the page displays two paragraphs with large text:

target

If the user clicks any of the links - all of which link to a target (either #section1, #section2, or #section3) - then the specified target receives the style from the :target selector, with a dark red background, white text color, and black border:

target - active

Modifying Links

Duration: 10 to 15 minutes.

In this exercise, you will modify the look and feel of the links in Stories.html.

  1. Open Links/Exercises/Stories.html.
  2. 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.
  3. 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.