Learning Modern HTML and CSS — Part 6

styling hyperlinks

The approach to styling links is slightly different to standard text, because they have different states.

They have the state when you first see them on page, which is referred to as the “link” state.

They have a state when you click on them, so for a split second, the link becomes active, and this is the “active” state.

They have the state AFTER you’ve clicked on them, which might be say purple. This is known as the “visited” stated.

Finally, you have the state when someone hovers their mouse over the link, which is known as the “hover” state.

With links you might want styles to be different for each state. For example, you might want the hyperlink to be green, with no underline when it’s in the initial “link” state. You might want it to change purple and go bold, when in the “hover” state. You might want it to turn orange when in the active state, and then to show that the link has already been clicked on, you might want it to turn red, and be underlined it the “visited state.

Here’s how you’d do this in CSS:

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: purple;
  font-weight: bold;
  text-decoration: none;
}

a:active {
  color: orange;
  text-decoration: underline;
}

a:visited {
  color: red;
  text-decoration: underline;
}