How do you override the default link colors?

Layers of various coloured papers
David Malan/Photographer's Choice RF/Getty Images

Question: How do you override the default link colors?

Answer:

All Web browsers have default colors they use for links if the Web designer doesn't set them. They are:

  • The default link color.
  • The active link color (when the mouse is clicked and held over the link).
  • The followed link color (when the link was clicked previously).

Plus, while most Web browsers don't change this by default, you can also define the hover color - the color the link is when a mouse is held over it.

Use CSS to Change Link Colors

To change these colors, you use CSS (there are some deprecated HTML attributes you can use as well, but I don't recommend using anything deprecated). The easiest way to change the link color is to style the ​tag:

a { color: black; }

With this CSS, some browsers will change all aspects of the link (active, followed, and hover) to black, while others will only change the default color.

Use CSS Pseudo-classes to Change All Parts of a Link

A pseudo-class is represented in CSS with a colon (:) before the class name. There are four pseudo-classes that affect links:

To change the default link color:

a:link { color: red; }

To change the active color:

a​:active { color: blue; }

To change the followed link color:

a​:visited { color: purple; }

To change the mouse over color:

a​:hover { color: green; }