CSS Tutorial

CSS Links

HTML Links can be styled using all of the CSS properties we have been learning, but still, there are some ways you can style a link depending on what state they are in.
These states are four (4) in number and are derived by the pseudo-class.

You will learn about the pseudo-class in our next lessons.

These are the four (4) link states

  • a:link - An unvisited link.
  • a:hover - A link the user has visited.
  • a:visited - A link when the user mouses over it.
  • a:active - A link during the time a user clicks it.

See Examples

/* unvisited link */
a:link {
color: #0000FF;
}

/* moused over link */
a:hover {
color: #009FFF;
} 

/* visited link */
a:visited {
color: #009F00;
} 

/* clicked link */
a:active {
color: #0000FF;
}

  Do It Yourself

Things To Note

- a:hover MUST come after a:link and a:visited.
- a:active MUST come after a:hover.

Common Ways of Styling Links

Without using the pseudo-class procedure, links are often styled in some common ways:

Using Text Decoration

The text-decoration property is mostly used to remove underlines from links:

See Examples

a:link {
text-decoration: none;
} 

a:visited {
text-decoration: none;
} 

a:hover {
text-decoration: underline;
} 

a:active {
text-decoration: underline;
}

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS Links is all about.
  • You should be able to identify the four (4) states of styling links.
  • You should be able to style a link using the common ways.
Previous Chapter Next Chapter

Related Chapters