Overriding the Default Link Colors on a Web Browser Using CSS

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

All Web browsers use default colors 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, use a Cascading Style Sheet. 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. Four pseudo-classes 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; }

Considerations

Avoid overwriting default link colors to make links more difficult to find. For example, changing a link to a very light color against a white background will adversely affect visually impaired visitors. Aim for separate colors for active and followed-link colors, too, to ensure that site visitors don't get confused about which pages they've visited.