Learn how to build and design websites with our tutorials.

CSS Links Tutorial

View Tutorial Contents


Link States

CSS allows you to style HTML links with any property that you like. You can also style links differently depending on what state they are in.

There are four link states, called pseudo-classes.

A pseudo-class is used to define the state of an HTML element. The four pseudo-classes of links are listed below.

There are some order rules when applying styles for more than one link state.

The CSS example below shows an a link with different styles depending on the link state.


/* link that has not been clicked */
a:link{
color: black;
}
/* link that has been clicked on */
a:visited{
color: green;
}
/* link that is being moused over */
a:hover{
color: red;
}
/* link the moment that is clicked */
a:active{
color: blue;
} 


Link Decoration

The most common thing to do is specify wether to underline or not underline a text link depending on wether the link is hovered over or not hovered over. The reason for this is because most people expect text that is underlined to be a text link.

The CSS example below is an example of a link in its normal state and hovered state.


a{
text-decoration: underline;
}
a:hover{
text-decoration: none;
}

This is a text