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.
May 24, 2015 Visited link colors in Safari, most notably visited Google links when I return to the search page, don't change colors as they used to do. Actually, I think it's been that way for a long time (years) now but I am just now coming back around to being interested in why and if there is a way to get back to the days where new links were BLUE and visited links were GREEN (or whatever color.
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. Best 25 minecraft skins for mac.
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 original color, which represent three different states:
- 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.
- 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, will cause the link to be visited. Hover color is the same for both 'Active' and 'Visited' links.
- Active Link - The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button will cause the browser to visit the link.
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.
If your page is not using CSS or you don't want to convert to CSS, the steps below show 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. 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.
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.
Additional information
- See our HTML color code page for a full listing of color codes.
- See the CSS, HTML <body> tag, and hyperlink pages for further information.
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.
TipWhen 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 original color, which represent three different states:
- 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.
- 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, will cause the link to be visited. Hover color is the same for both 'Active' and 'Visited' links.
- Active Link - The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button will cause the browser to visit the link.
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.
If your page is not using CSS or you don't want to convert to CSS, the steps below show 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. 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.
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.
Additional information
- See our HTML color code page for a full listing of color codes.
- See the CSS, HTML <body> tag, and hyperlink pages for further information.