Scripting Master Logo
Learn Scripting Languages from the Master!

Changing link colors

Home : HTML > Adding hyperlinks > Customizing links — Changing link colors

As you may have noticed while browsing websites, the default link color for browsers is blue, the default visited link color is purple, and the default active link color is red. What do you do if these default colors do not work for you because of the regular color of other text on your webpage and/or because of the background of your webpage? Well, you can change the default link colors. To change these default link colors, you can use three attributes in the body tag or define link colors in a style sheet.

Changing link colors with link attributes of the <body> tag

The three link color attributes of a webpage are:

  1. link — this changes the normal link color. In other words, this attribute changes the default blue color of the links to some other color of your choosing.
  2. vlink — this attribute changes the visited link color. With this attribute, you can change the default visited purple link color to some other color of your choice.
  3. alink — This attribute changes the active link color. An active link color simply means the displayed link color when the mouse button is pressed over a link.

These attributes should be added to the <body> tag with a choice color for each attribute:

Changing link colors with link, vlink, and alink attributes

Output:

Normal links
Normal links color (#0066CC)
 Visited links
After a link is clicked, link color changes to the visited link color (#CC33CC).
 Active link color
Showing the active link color (#336666) while the mouse button is pressed over the first link.

Changing link colors with style sheet declaration

Because the three attributes discussed above (link, vlink, and alink) are deprecated in favor of style sheets, you should change the link color using style sheets. This, however, does not mean your HTML document would be invalid if you use those attributes in the body tag to change link colors; rather, consider using the style sheet declaration to change link colors in case if in the future browsers stop supporting these deprecated attributes.

The following shows an example of style sheet declaration to change link colors:

<style>
a:link {color:#0066CC;} /* sets normal link color */
a:visited {color:#CC33CC;} /* sets visited link color */
a:active {color:#336666;} /* sets active link color */
</style>

Notice this declaration uses the same colors we used earlier with the link attributes thus the output will be same. Place this style sheet declaration between the <head> and </head> tags. Inside the body tag, create your links as normal.

Note: Because the user's preferences on the browser ultimately control the link colors, you cannot always change the link colors for all the browsers used to display a particular page. This, however, should not stop you from changing the default link colors because:

  1. your website requires different link color (because of the surrounding text or the background of the page).
  2. average user does not know how to change the default link colors or to set their browser to ignore style sheet formatting.