EchoEcho.Com
COMPLETE TUTORIALS

HOME TUTORIALS HTML LINKS          

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

 
  SEARCH THIS SITE

Tell a friend about this site
SUGGEST THIS SITE      

HTML Links


INTRODUCTION

HOW TO MAKE A LINK

COLORS ON TEXTLINKS

LINK TARGETS

NO UNDERLINE

ADVANCED TEXTLINKS

IMAGE LINKS

IMAGE MAPPING

LINK WITHIN A PAGE

LINKS IN FRAMESETS

LINK TO NEW WINDOW

HTML Links :
COLORS ON TEXTLINKS

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

This page will teach you 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 text-color of 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).


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 linkcolors for the entire page.

However you might want one or more links to have different colors than the overall color for 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 indicates amount of red, green and blue using values between 0 and 255. You can read more about converting between rgb-colors and hex-colors here.


Now, since none 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 let out information that is not understood you can work around browser-differencies by simply adding different settings for multiple browsers.

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




<< PREVIOUS
READ MORE >>


IN THIS SECTION


HTML BASICS

TEXT

LISTS

IMAGES

LINKS

BACKGROUNDS

TABLES

FRAMES

FORMS

METATAGS

HEXCOLORS




EchoEcho.Com
COMPLETE TUTORIALS
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

EchoEcho.Com
TOOLS & RESOURCES


(c) Copyright 1998-1999 NetKontoret - All Rights Reserved         Last modified on: 09/18/1999 01:36:04