How to modify the color of links on a web page

Updated: 05/02/2021 by Computer Hope

Examples of colors

Below are the steps on how y'all can alter the color of the links shown on your web folio using HTML and CSS. Although the link colors tin be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown beneath.

Tip

When defining the colour of any spider web page element, you lot may need to utilise HTML color codes. For major colors, yous can also specify the names of those colors instead of using the color codes, for case, red, blue, green, and black instead of using their respected color lawmaking values.

Understanding the dissimilar types of hyperlinks

Hyperlinks are special elements on your page, considering they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in add-on to its default blue color, which stand for iii different states:

  1. Visited link - The color of a visited link. If a hyperlink is this colour, the user can wait 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), and so releasing the button, causes the link to be visited. Hover color is the same for both "Agile" and "Visited" links.
  3. Active Link - The color of the link when existence clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.

Tip

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

CSS link color example

In the CSS example beneath, we are setting the hyperlink colors to resemble what is shown on this folio. Starting time, all anchors are ready to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (ruby). The beneath code can be added to the CSS style chemical 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 before, we highly recommend using the above CSS code instead of the trunk tag. You can add together the above lawmaking into a CSS file and link all your web pages to that CSS file. Then, you lot could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.

HTML trunk tag example

In some very rare situations, it may non exist 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 every bit shown beneath.

<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 = Colour of the active link or the color the link changes to when clicked.
BGCOLOR = The folio background colour.