Overriding the Default Link Colors on a Web Browser Using CSS

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 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.

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.

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

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.