How To Change Hyperlink Color

Hyperlinks and CSS

Some simple ways of changing link colors with CSS. Colors can can also be controled with HTML but this does not offer much flexibility.

Introduction

Here is a few ways to change and control the color of hyperlinks. Hyperlinks can be made to change colors by adding a style sheet to your HTML and editing the following Anchor Pseudo-classes:
  • Link: The color of an un-visited link.
  • Visited: The color of a visited link.
  • Active: The color of the link when it is clicked. The link will remain that color when users hit the Back Button after visiting the link destination.
  • Hover: The color of the link when the mouse hovers over it.

Change Hyperlink Color with Internal Style Sheet

Adding CSS to a HTML Document without Referencing an External Style Sheet

If you need to change colors on one page only, this code can be used. It can become a big job if you use this code to create many pages, then discover that you need to change the color again.

If you intend to build many web pages, it is suggested to create an external style sheet and link your HTML documents to that. This way, if you need to change colors again, all you have to do is change the values to just one file - the external style sheet, and changes will take effect across an unlimited number of pages.

Add the following CSS code into the head section of your HTML document: <head>code</head> and change the color values as required:

Code

<style type="text/css">
a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}
</style>

Change Hyperlink Color with External Style Sheet

Adding CSS to a HTML Document by Referencing an External Style Sheet

Using an external Style Sheet offers much more flexibility when changing the appearance of HTML documents because an entire web site with thousands of pages can be changed just by changing one single file.

Add the following CSS code to your style sheet and change the color values as required:

Code

a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}

Change Hyperlink Color with Inline Style Sheet

Adding the Style Attribute to an Anchor Tag

The Style attribute can be added to many HTML Tags. Below is an example of how to add the style attribute to an Anchor Tag in order to change the color of a hyperlink.

Add the following code to your HTML document and change the color values and URL as required:

Code

<a style="color: #800000" href="http://www.goldcoastwebdesigns.com/ase/" >Link Text</a>

Output

Link Text

Notes

    #800000 = Variable Value.
    color = CSS Property.
More than one property can be added within the Style Attribute. Just place a semicolon (;) and a space after the last value like this:

Code

<a style="color: #800000; text-decoration: none; background: #80FF80" href="http://www.goldcoastwebdesigns.com/" >Link Text</a>

Output

Link Text

Notes

    background Changes the background color of the hyperlink.
    text-decoration The none value removes the underline.

Further Information

Email This Article :: Printer Friendly Page

Related Articles

HTML Code For Linking To This Page

<a href="http://www.goldcoastwebdesigns.com/change-hyperlink-color.shtml">How To Change Hyperlink Color</a>

Webmaster Headline Feed

This webpage uses Javascript to display some content.

Please enable Javascript in your browser and reload this page.

Top of Page : Gold Coast Web Designs Home