[Home]Links with different colors

HomePage | RecentChanges | Preferences | Newbie Help

Category HTML FAQ -:- Category CSS FAQ

This question is often asked by those who wish to have one colour for menu links, and one for "normal" links.

Link properties can best be set using CSS. Suppose that you wanted your main body links to be dark green, without any underline? Visited links would be underlined, and purple. The hover colour would be red. Assuming your main body was white, place this in your <head></head>:

<style type="text/css" media="screen">
<!--
a:link { color: #060; background: #fff; text-decoration: none; }
a:visited { color: #909; background: #fff; text-decoration: underline; }
a:hover { color: #f00; background: #fff; }
a:active { color: #f00; background: #fff; }
-->
</style>

That's all well and good, but you've also got a menu with a background colour of green. Your unvisited links won't show up, will they? Fortunately, CSS supports classes.

<style type="text/css" media="screen">
<!--
a:link { color: #060; background: #fff; text-decoration: none; }
a:visited { color: #909; background: #fff; text-decoration: underline; }
a:hover { color: #f00; background: #fff; }
a:active { color: #f00; background: #fff; }
a.menu:link { color: #fff; background: #060; text-decoration: none; }
a.menu:visited { color: #f0f; background: #060; text-decoration: underline; }
a.menu:hover { color: #ccc; background: #060; }
a.menu:active { color: #ccc; background: #060; }
-->
</style>

Say you wanted your menu links to be white, visited colour bright purple (ugh, but if that's what floats your boat), hover/active colour grey. The above CSS would do it, provided your menu links had the class attribute's value set to "menu":

  <a href="foo.html" class="menu">

Note that you should probably change the colours to suit :o)

To reduce the amount of tag soup, semantic grouping like

div.menu a:link {...} etc

and in the HTML file

<div class="menu">
<a href="foo.html"> etc</a>
</div>

might be better.

Before you use any of this, though, read: [Links want to be Links], by Jukka Korpela


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited August 19, 2002 8:52 am (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media