Links : Colors on Text Links

HTML Links :

COLORS ON TEXT LINKS

There are a few settings that can be useful for controlling the colors of text links.

This page will teach you how to:

Define colors for all links on the page.

Define colors for individual links on the page.

Define colors for all links on the page

The general color of text links is specified in the <body> tag, like in the example below:

link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).

vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080).

alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

Note
You can click here to learn more about the hexadecimal colorsystem that is used in HTML.

Define colors for individual links on the page

The method described above is for setting overall link colors for the page.

However, you might want one or more links to have different colors than the rest of the page.

There are two methods for doing this:

Placing font tags between the <a href> and the </a> tag.
This method will work on all browsers except MSIE 3.

Using a style setting in the <a> tag.
This method works on MSIE3 and newer browsers.

The first technique would look like this:

Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

Note:
It is important that both the and the tags are between the <a href> and </a> tags.

The second technique would look like this:

Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to yahoo.

Note:
The RGB numbers indicate amounts of red, green, and blue using values between 0 and 255. You can read more about converting between RGB colors and hexadecimal colors here.

Now, since neither of the two methods covers all browsers, we need to use both techniques at once.

This example will work on all browsers:

Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to yahoo.

The last example is interesting. Not only because it will work on all browsers. But even more because it shows a general approach to making your pages browser safe.

Since browsers simply leave out information that is not understood, you can work around browser differences by simply adding different settings for multiple browsers.

If you want more advanced effects you should jump to the section about stylesheets.

<< PREVIOUS