Links in CSS

You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes.

What is a pseudo-class?

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.

Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore use a as a selector in CSS:

 
 a {
  color: blue;
 }
 
 

A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links.

 
 a:link {
  color: blue;
 }

 a:visited {
  color: red;
 }
 
 

Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:activeand a:hover is when the cursor is on the link.

We will now go through each of the four pseudo-classes with examples and further explanation.

Pseudo-class: link

The pseudo-class :link is used for links leading to pages that the user has not visited.

In the code example below, unvisited links will be light blue.

 
 a:link {
  color: #6699CC;
 }

Pseudo-class: visited

The pseudo-class :visited is used for links leading to pages that the user has visited. For example, the code below would make all visited links dark purple:

 
 a:visited {
  color: #660099;
 }
 

Pseudo-class: active

The pseudo-class :active is used for links that are active.

This example gives active links a yellow background color:

 
 a:active {
  background-color: #FFFF00;
 }
 

Pseudo-class: hover

The pseudo-class :hover is used when the mouse pointer hovers over a link.

This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this:

 
 a:hover {
  color: orange;
  font-style: italic;
 }