How to change the color of links on a web page

Updated: 05/02/2021 by Computer Hope
Examples of colors

Below are the steps on changing the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS (cascading style sheets) as shown below.

Tip

When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.

Understanding the different types of hyperlinks

Hyperlinks are special elements on your page, because they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in addition to its default blue color, which represent three different states:

  1. Visited link - The color of a visited link. If a hyperlink is this color, the user can expect that clicking the link takes them to a page they've already seen. Purple is the default hyperlink color for a visited link.
  2. Hover link - The color when the mouse is hovering over a link. If a hyperlink is this color, the user can expect that pressing the left mouse button (clicking), then releasing the button, causes the link to be visited. Hover color is the same for both "Active" and "Visited" links.
  3. Active Link - The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.
Tip

See our hyperlink definition for further information and related questions to hyperlinks.

CSS link color example

In the CSS example below, we are setting the hyperlink colors to resemble what is shown on this page. First, all anchors are set to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (red). The below code can be added to the CSS style element or in your .css file.

a {
  color: #2c87f0;
}
a:visited {
  color: #636;
}
a:hover, a:active, a:focus {
  color:#c33;
}

If your page isn't using CSS, the steps below show how to do this in the HTML BODY tag. However, as mentioned earlier, we highly recommend using the above CSS code instead of the body tag. You can add the above code into a CSS file and link all your web pages to that CSS file. Then, you could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.

HTML body tag example

In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.

<BODY TEXT="#092d07" LINK="#1FOOFF" VLINK= "#000000" ALINK="#000000" BGCOLOR="#ffffff">

Below are the descriptions of each of the HTML attributes in the body tag.

TEXT = The color of text.
LINK = The color of links.
VLINK = Visited link color.
ALINK = Color of the active link or the color the link changes to when clicked.
BGCOLOR = The page background color.