Overriding the Default Link Colors in a Web Browser Using CSS

All web browsers use default colors for links if the web designer doesn't set them. To change these colors, use CSS (Cascading Style Sheets).

Link Colors

Link colors comprise a few different states:

• The default link color — what you see in text before you interact with the link.
• The hover link color — what the link changes to when you pass your cursor over it.
• The active link color — when you click the link with the mouse.
• The followed link color — for links you've clicked previously.

Use CSS to Change Link Colors

Using CSS to change the link color involves styling the ​tag:

a { color: black; }

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

Use a pseudo-class with a colon before the class name to change links in specific states. 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 mouseover color:

a​:hover { color: green; }

Considerations

Use color to help site visitors find your links easily, even if they just skim the page. Here are a few tips:

• Go for contrast. A link in a very light color against a white background is difficult to see, particularly for 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.
• Keep your colors in harmony with your page design.