CSS Links

CSS Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfing the web become a household phrase.

Links in HTML even look different from regular text without any CSS styling at all.

a {
    color: red;
}

CSS Links States:

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

  • Link (:link): This is probably the least used, but it’s for styling <a> elements that have an href, rather than placeholder links.
  • Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it. The styles you can apply to :visited are restricted for security reasons.
  • Hover (:hover): When the mouse cursor is place on top of the link without a click
  • Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.
  • Focus (:focus): Like :hover but where the link is selected using the Tab key on a keyboard. Hover and focus states are often styled together.

CSS Links order:

Note the order there is important:

  1. Link
  2. Visited
  3. Hover
  4. Active
  5. Focus

If you don’t do it in this order (imagine, say, your :visited style comes after your :hover style) the links won’t behave quite how you want. In my imaginary example there, the :visited style would override the :hover style, which is highly unlikely that is what you want. Focus is an accessibility feature, thus last because it is most important.

One way to remember the order is LOVE and HATE. that is L(ink)OV(isted)E / H(over)A(Active)TE.

Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.

Comments are closed.