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:

<body link=”#C0C0C0″ vlink=”#808080″ alink=”#FF0000″> 

  • 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).


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”><font color=”FF00CC”>here</font></a> to go to yahoo.

Note:
It is important that both the <font> and the </font> 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.

 
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)”><font color=”FF00CC”>here</font></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 See Below
By default, text links are underlined by the browser.

If your page is visited by MSIE3 or newer, you can turn off the underlining for an entire page by adding a style tag to the head section of the document.

Look at this example:

<html>

<head>
<title>This is my page</title>
<style type=”text/css”>
<!–
A{text-decoration:none}
–>
</style>

</head>

<body>
Welcome to my world!<br>
<a href=”http://www.yahoo.com”>This Link To Yahoo has no underline</a>
</body>

</html>

Note:
The style setting will not cause an error if viewed on a browser that doesn’t support it. The browser will simply skip the effect – the link will look like an ordinary underlined link – but no errors will occur.



Share This:

Leave a Reply