Web Development

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.

27 comments
clstreeter
clstreeter

It was interesting and it seems siimple.

thephpdeveloper
thephpdeveloper

The "A" tag declared in CSS is optional. As long as the classes do not conflict, it is possible to leave out the tag. Example: <style><!-- .menu {color:#555445;text-decoration:none;} .menu:hover {color:#EEEDD5;text-decoration:underline;} --></style> <a href="http://www.example.com/">Example.com</a>

dhenderson
dhenderson

I thought we have been encouraged since the inception of the WWW to stay AWAY form this very thing....

karenc
karenc

what one person thinks looks cool and edgy another will think is juvenile and distracting, of course if you don't want the second type of visitor go right ahead, vary the font sizes and faces too, make it blink, give 'em a headache, use l337spk and txtspk be as annoying as possible, then you and both of your mates in the remedial class will will be the only ones to wonder in the glory that is your web page if you want traffic keep it simple and consistent as other people have said just because you can it doesn't mean you should

peter
peter

That was great, I've been looking for a way to do that. Thank-you. Peter

jason
jason

...doesn't mean we should. Making colour changes to links, while arguably pretty, impacts on usability. There is a great book by Steve Krug called 'Don't make me think' which gives great insights into the world of web usability. Remember, if a user has to work hard to get round your site, they will go somewhere else where they don't have to work hard.

Eric.Jablow
Eric.Jablow

I hope that browsers start supporting CSS3; when they do, one will be able to write: a[href^=http://www.yahoo.com]:link { ... } and so on. Then, one won't need to mark up every hyperlink with the yahoo class declaration. Until then, one can wtrite a JavaScript function and invoke it in the document's onLoad method to search for hyperlinks to yahoo and assign a class to them. Most of the Javascript libraries will make that easy. I doubt it would take more than 5 lines of code invoking Prototype, jQuery, or YUI.

jackie40d
jackie40d

Its is very simple in OLD NETSCAPE 4.8 and use the Netscape Composer part of it ! Or another one to use is another old Program Arachnophilia . . I use 3.9 version to fix silly things which do not want to come out as I want them to . .

Eric.Jablow
Eric.Jablow

The .menu styling would work. However, the .menu:hover would not. With Firefox, it would cause the entire menu to change color and underlining when the user hovered over any part of it. With IE6, it would do nothing.

caesar
caesar

I don't understand the tone of this discussion. Do you all only design white pages with no contrasting blocks or columns? If you design a blue box with links in it, you have no option but to change the color of those links versus the links in the white body of your main text area. This solves the problem. We have been doing this for years and it is a handy tip for those who are searching for a solution for this problem. No need to rehash the design vs. usability issue here except as a caution statement. This is a useful and requisite tool in our toolbox.

alaniane
alaniane

for an internet site open to the public; however, the technique could be useful to an intranet document. The context indicates whether it should be applied or not.

jpb
jpb

It was just an example demonstrating the technique, the aesthetics of your own use of the technique are your responsibility.

deICERAY
deICERAY

If you're an e-commerce site then of course you want things as standard and as textual as possible to satisfy the finicky appetite of those voracious bots that crawl this virtual universe. The more things you represent with images,image maps, scripts, calls, etc. the less 'visible' you are to the 'click-hunters' so if pretty is what you want, then traffic is what you won't get. "I just can't Wait to be googled!" - website newbee

dbreeden
dbreeden

Ya know, making green flashing links is pretty ugly as we all know, but I just wanted to make a group of links look like text, always black with no underlining and leave all the rest of the links alone. It basically is the same problem. Also, I can see how to apply that technique to many other elements. ... I cut and pasted that code to look at it. It didn't work. The double quotes looked funny. I replaced them with double quotes typed in. It worked. It's those dang details. Enjoy, Mike . www.diver.net/seahunt

techrepublic
techrepublic

Jason, I believe you are absolutely correct. Taking control of certain things within the confines of HTML is certainly neat and provides for a touch of eye candy from time to time, but we have found simplicity to be the first, best effort when trying to get people to use what you create long-term. We create a rather sizable number of front and back-end systems. One of our major areas of development is in large scale support networks for mortgage brokers throughout the US. Our design work that we apply to all facets of what we offer to these niche markets has to pass our 'at a glance' test. A little something that we came up with years ago. Simply put, if a page or tool or procedure is not understood by the end user 'at a glance' then we go back to the drawing board. It is because of that practice that we have - to date - NEVER had to produce a users manual or set of instructions for either our stand alone programs or application that run on the web. Even non-technical folks have a super easy time finding their way through any of the menus and on-line functionality we provide to make their lives easier. That is not to suggest that we do not use color. Of course we do. But the colors we use and the limited way that we use them are done so in a fashion that would be somewhat obvious to ANYONE that has spent more than 2 hours on-line. We take great pride in reducing things down to their simplest of elements while ensuring clarity at every step. Graphics are never placed as extra eye candy. If one is provided it is typically for navigation and has proven easier to find than text and more highly recognizable that their textual counterpart. Too many times, when searching for or through on-line resources, we stumble places that have what we are looking for, but are an incredible pain to navigate. This usually comes as a result of the designers of said sites being more concerned about being 'artsy' vs providing the streamlined and comprehensive drill down functionality that they could have. Again, I completely agree with your comment and I hope this stands as a supporting testament to the new, up and coming programmers and web developers out there that the highest sought pathway to success is not necessarily decorated all 'flashy' and color bound. It is the ability to give those that might share their time using that which you develop as much as you can, as fast as you can, as cheap as you can. But in the words of the great Dennis Miller, "That's just my opinion. I could be wrong." Sincerely, Max _________________________ Max Laing, D. MP CEO / Project Development ActionCore, Inc. "Where We Plug In BOTH Ends Of The Cable!" 985-781-7316 : Office 561-828-8120 : Fax Primary Email Address... max-direct@actioncore.com MSN Messenger... equal_time@hotmail.com Primary URLs... - http://AllowingSuccess.Com - http://AllowingSuccess.blogspot.com - http://PiddlePort.Com - http://GetPreQualified.Com - http://LenderHost.Com - http://HamburgerUniverse.Com Other Involvements... [ to hear interviews with Max ] - http://beyondtheordinary.net/maxlaing.shtml [ to read about Max ] - http://spaces.msn.com/actioncore Max Laing & the ActionCore Distribution Network

ChipPanFire
ChipPanFire

As Peter Drucker once said, "there is nothing so useless as doing efficiently that which should not be done at all".

mattohare
mattohare

I agree not to be pretty for sake of pretty. Too many thing that 'Graphical' is the most important part of GUI, not 'User'. When I use the changes, it's only to make the page clearer to the reader/user. If it doesn't help that, there's no reason to go to the effort, really.

j.edney
j.edney

Good suggestion, have you officially sent that to the CSS developers? I use CSS to change the style of the text, ratehr than the link. It works for me. Good Luck. ~Jon

JohnnySacks
JohnnySacks

ala David Letterman stupid people tricks. Then spend another 3 hours trying to see if it works on IE6, IE7, Firefox, Safari... ad nauseum. What software development has become in the new world of convoluted barely usable web application world.

tackyspoons
tackyspoons

Usability and design go hand in and and should never have the "vs." between them. Although it may be useful for the scenario you gave (blue background), from a usability perspective, having multiple colors of links is just ... well, it's bad. Why confuse your visitors by making a link look like something it's not? Design USABLE websites, that's all we're asking.

jackie40d
jackie40d

I have a web site made with OLD Netscape 4.8 and EVERY one can see it I add a bit of flash and some Java to it here and there and I get a ton of visitors Plus I added a second half to it as a alternative health site and the biggest hit page is a page about the Illegal Alien Invasion and the benefits they get just coming over the border . . But then I have the Key words people seem to be looking for now days and I have a Movies page ( movies up on YouTube ) . . I even have put some movies up on Youtube made from Pictures taken at the different demostrations . . Reminds me thats what I got to get is a movie camera for taking the movies so as to no longer add pictures together and make a movie out of it http://www.lynns-store.com

Eric.Jablow
Eric.Jablow

If you want to style links in menus differently from links in body text, the appropriate technique is to usee this style of CSS: /* For body text */ a:link { ... } /* For menu links, assuming there is only one menu in each page. */ #menu a:link { ... } I don't see the business case for styling Yahoo differently from Google, or TechRepublic. Remember also that two percent of the men visiting your site won't see the same colors you do. A menu system should have links styled almost like buttons, or the menu at the top of the your browser. In fact, the menu system could have styling like: #menu a { color: white; background-color: blue; text-decoration: none; } #menu a em { text-decoration: underline; } #menu a:hover { font-weight: bold; } The menu would have entries like: News You'd need to add borders and padding as appropriate for your application. But the protesters' main point is correct; there's no real need to style links differently depending on the linked-to location. I know of one useful exception. Wikipedia and Mediawiki users recognize that external links are external by the special graphic following them. I presume that the MediaWiki software inserts the graphic as appropriate. To do this in plain CSS, you would need a.external:after { content: uri(http://images.example.com/foreignLink.png) } Unfortunately, :after is not supported by the browser used by most people. In any case, I would use jQuery or Prototype or YUI to set the class of hyperlinks to external locations, instead of typing them in by hand.

tcox
tcox

There is no hard and fast rule anymore. Yes,usability sometimes trumps design where there is a broad spectrum, high traffic site and users may be confused. And intranet sites are usually more narrowly focused and users know what to expect. But I work with plenty of sites that attract very savy, tech conscious users that expect anything that you canthrow them, including funky text styles as well as image based links, flsh, javascript, etc. etc. So - no need to be an HTML snob- these tips can be very helpful. You may not find today's tip helpful, but after all why would you be reading these posts if you're not gnawing away the www net to garner some nifty nugget of knowledge to tuck away in that knotty little noggin of mush?

caesar
caesar

tacky, I agree. #1 usability, #2 design. Where usability clashes with design, err on the side of usability. I did not think from skimming this tutorial that they were advocating putting different colored links in the body copy. That would truly be atrocious.

alaniane
alaniane

is it bad to have multiple colors of links? If the site is public then I would agree that it can confuse your user; however, if the site is an intranet site then corporate culture would determine whether it was bad idea. Business rules may determine that intranet links and extranet links be distinguishable. Using different colored links would then be user friendly for that site. So context determines whether something is usable or not.

d0ti5
d0ti5

Everything looks like a link. Oh, by the way, the midi stuff is something I hate worse than colored text. It is a good thing, folks, to be able to simply change the colors of links - and in no way do I think that the intent was to have fifty colors of tags. There are places it is needed - menus, inserted colored tables, etc - and places where it is not. I use a CSS to get the colors "right" in my menu on my personal site (http://home.comcast.net/~d0ti5/) as well as on my corporte intranet site.