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;
}

The following two tabs change content below.

jay

Latest posts by jay (see all)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *