CSS Links

Styling Links

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:

  • normal links
  • links that have already been visited
  • links that are being clicked on, and
  • links that are hovered over with the mouse.

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

Example -

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Text Decoration

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. underline and overline decorations are positioned under the text, line-through over it.

Background Color

The background-color property can be used to specify a background color for links:

Advanced - Link Buttons