Chami.com Tips

Home > Tips > Internet > How to create text links in multiple colors

300+ book mentions, 95% thumbs up, millions of downloads. Get HTML-Kit Tools for $39 (limited time offer)

Web Hosting Web Hosting UK Dedicated Servers Domain Names

Categories

» Internet
HTML
JavaScript
Programming
Windows

Keywords

HTML

Downloads

bodyclr.html linkclr1.html linkclr2.html

How to create text links in multiple colors

See Also

Would you like to use multiple colors for your text links, rather than using a single link color for the whole page?

You can specify the color of links for the whole page using LINK and VLINK attributes inside the starting BODY tag as follows:

<body link="yellow" vlink="yellow">

<a href="/tips/">
This link will be yellow.
</a>

</body>

Listing #1 : HTML code. Download bodyclr.html (0.21 KB).

But, how can you have one link colored in red, another in green and so forth? You may notice how the following method does not work:

<a href="/tips/internet/">
Internet
</a>


 


<a href="/tips/windows/">
Windows
</a>


 


<a href="/tips/programming/">
Programming
</a>

Listing #2 : HTML code. Download linkclr1.html (0.25 KB).

Result:

Internet
Windows
Programming

Now let's try taking above tags and moving FONT tags inside A tags (anchor or link) as follows:

<a href="/tips/internet/">

Internet

</a>

 

<a href="/tips/windows/">

Windows

</a>

 

<a href="/tips/programming/">

Programming

</a>

Listing #3 : HTML code. Download linkclr2.html (0.25 KB).

Result:

Internet
Windows
Programming

NOTE:

Very early browser implementations of the COLOR attribute in FONT tags didn't recognize color names. Be sure to use numeric color codes whenever possible to make your pages backward compatible with older browsers.

Applicable Keywords : HTML, HTML 2.0, HTML 3.2, HTML 4.0

Previous Tip : Font embedding for web pages
Random Tip : Need help finding help topics? Bookmark them
Next Tip : Web rings - focused categories and traffic for your pages