Developer

How Do I... Create an HTML page with multiple-colored links?


This blog post is also available as a TechRepublic download.

Before the advent of Cascading Style Sheets (CSS), HTML designers were stuck with a limited range of options when choosing color attributes for their <A> tags. One color each per document for standard (unclicked), visited, and active links was your only choice.

But if you understand basic HTML, it is not difficult to write some simple CSS code that lets you declare as many classes as you like for as many different colors of links as you'd like to display on a single page. You can even style text links in other ways, such as modifying the appearance of an underline or adding a background color for a hover effect.

Fun with links

Open your preferred HTML editor and create a new page. Enter the code below (Listing A) to get started.

Listing A

<html>

<head>

<title>Fun with Links</title>

</head>

<body>

</body>

</html>
The next step is to declare a CSS style. Let's keep this simple and create your CSS code in the head of this document (Listing B) instead of linking to an external style sheet.

Listing B

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

—>

</style>
</head>

<body>

</body>

</html>
Before you declare a specific CSS class, you should go ahead and define the rule for all of your standard <A> tags. Set these defaults (Listing C) to blue for standard/unclicked, white for active, and purple for visited.

Listing C

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

—>

</style>

</head>

<body>

</body>

</html>
Now enter the code below (Listing D) into the Body of your document and preview it in a Web browser (Figure A) .

Listing D

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.

</a>

</body> </html>

Figure A

Standard link
Pretty straightforward, right? Here's where the fun starts. Let's say that you would like all of the links on your page that point to Yahoo.com to have their own style. Go back to the <STYLE> tag in the head of the document and enter the code shown in Listing E.

Listing E

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

A.yahoo:link {color: #CC0000;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.

</a>

</body>

</html>
By adding the .yahoo after the A, you have declared a new class named "yahoo." Text that is contained in any <A> tag in your document that is given this new class as an attribute will now appear in red. Test it out by putting the code below (Listing F) into the Body of your document and preview it in your browser (Figure B).

Listing F

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

A.yahoo:link {color: #CC0000;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.</a>

<br/>

<a href="http://www.yahoo.com" class="yahoo">This is a link with the YAHOO class applied to it.</a>

</body> </html>

Figure B

Yahoo class applied
Let's take it a little further. Enter the code below (Listing G) to make the "yahoo" class even more distinctive by making its active state green and its visited state orange. Save your document and preview it in a browser.

Listing G

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A: link {color: blue;}

A: visited {color: purple;}

A: active {color: white;}

A.yahoo:link {color: #CC0000;}

A.yahoo:visited {color: #009900;}

A.yahoo:active {color: #FF9900;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.</a>

<br/>

<a href="http://www.yahoo.com" class="yahoo">This is a link with the YAHOO class applied to it.</a>

</body>

</html>
Now let's implement a hover effect. This will give the link a different color whenever the user places the mouse over it. Note that for the hover attribute to work, it must be placed before the active attribute. (Listing H) Web designers and programmers have come up with a popular mnemonic that helps them remember the correct order when scripting CSS link styles: LoVe HAte — L for link, V for visited, H for hover and A for active.

Listing H

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

A.yahoo:link {color: #CC0000;}

A.yahoo:visited {color: #009900;}

A.yahoo:hover {color: #66FF66;} A.yahoo:active {color: #FF9900;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.</a>

<br/>

<a href="http://www.yahoo.com" class="yahoo">This is a link with the YAHOO class applied to it.</a>

</body>

</html>
For this last part, let's step outside the box. You can also use CSS to modify the appearance of underlines that display with text links, or you can even remove them entirely. Let's have the underline in the "yahoo" class disappear in the Hover and Active states (Listing I) and replace it with a block of background color. (Figure C)

Listing I

<html>

<head>

<title>Fun with Links</title>

<style type="text/css">

<!—

A:link {color: blue;}

A:visited {color: purple;}

A:active {color: white;}

A.yahoo:link {color: #CC0000; text-decoration: underline;}

A.yahoo:visited {color: #009900; text-decoration: underline;}

A.yahoo:hover {color: #66FF66; text-decoration: none; background: #006600;}

A.yahoo:active {color: #FF9900; text-decoration: none; background: #006600;}

—>

</style>

</head>

<body>

<a href="http://www.google.com">This is a standard link with no class defined in the <A> tag.</a>

<br/>

<a href="http://www.yahoo.com" class="yahoo">This is a link with the YAHOO class applied to it.</a>

</body>

</html>

Figure C

No underline with background color

You could create as many classes of the <A> tag as you like in a document and adjust their different states for an almost infinite number of color and decorative combinations.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

Editor's Picks