Styling Links with CSS

You can style links by applying styles to a elements.

a elements have five states that you can target with your styles:

• link
• visited
• focus
• hover
• active

The order of these states in a stylesheet is very important. These states are additive, so even though a link is visited, the link style still applies to it. So the last one will overwrite the previous one. A good mnemonic to remember is LoVe HAte for link, visited, hover, active. In the middle is focus.

You can style these states with pseudoclasses:

a:link,
a:visited {
  color: red;
}

The link state is the default one. Often the visited state will be the same. It makes sense to have a different visited state when you list a lot of external sites, like in the case of Google or Wikipedia.

The focus state is applied when you tab through a website. It is often the same as the hover state, but it can be different.

The hover state is applied when you hover over a link. The active state is triggered when you click with your mouse (hold it down to see it working).

There is another way to style links. You can first give a general style on the a selector. This would overwrite all states, and you can then modify the states as you need them.

a {
  color: red;
}
a:visited {
  color: white;
}