How to change the color of links on a web page

color.jpg

Below are the steps on how you can change 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 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

Before going through the steps below on changing a web page links colors it is also important that you understand that there are different states of hyperlinks and that each of these states can also have colors applied to them.

  1. Visited link – The color once a link has been visited.
  2. Hover link – The color when the mouse is hovering over a link.
  3. Active Link – The color of the link when being clicked.

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 is not using CSS or you don’t want to convert to CSS below are the steps on how to do this in the BODY tag in the HTML code. However, as mentioned earlier we highly recommend using the above CSS code instead of the body tag. If you were to add the above code into a CSS file and then all of your web pages linked to that CSS file you can change the background-color values in that one file to instantly change the background color of all pages using the CSS file.

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





PinIt
submit to reddit

Leave a Reply

Your email address will not be published. Required fields are marked *

Top
Web Design BangladeshWeb Design BangladeshMymensingh