This is a printer friendly version of How To Change Hyperlink Color.

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:

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

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

Further Information

© Copyright 2005 - 2012 GoldCoastWebDesigns.com