🎓 A1Learner
🔍

CSS Links

A link state is the condition a link is in, such as unvisited or hovered over. A pseudo-class after the a selector styles one state of the link.

Style the link itself

A plain a rule sets the colour. It also removes the default underline.

a {
  color: red;
  text-decoration: none;
}

Change the colour on hover

The hover state applies while the pointer sits over the link. The colour changes to purple in that state.

a:hover {
  color: purple;
}

Style the link as a button

A background colour and padding give the link a button shape. Both properties work on the link element.

a {
  background-color: green;
  padding: 10px;
}

Example

a {
  text-decoration: none;
  background-color: yellow;
  padding: 10px;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: green;
}

Key points

  • Write state rules in the order link, visited, hover and active.
  • A later rule wins when two state rules match at once.
  • For privacy, a visited rule can change colours only.
  • Keep a clear hover change so mouse and keyboard users can see the link in use.
  • A plain a rule styles the link in every state.
  • Each link state can have its own style.

In this example, the plain rule removes the underline and gives the link a yellow background with padding. The visited rule sets a purple colour for a visited link. The hover rule sets a red colour while the pointer is over the link. The active rule sets a green colour while the link is pressed. The stated output shows the link in its hover state.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which pseudo-class styles a link while the pointer is over it?