How do you override the default link colors?

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