CSS, Links

After realising my folly at naming CSS class names, I found new vigour in using CSS external stylesheets which is apparent in this new design of the homepage.

While setting up my last stylesheet, one thing however still remained a mystery to me - how to enable different coloured links on a single web page?

It was like a 'light bulb thought' - one day, searching for just that kind of information, I was looking at a web page that was displaying different coloured links. Looking at the 'View Source', I quickly realised that they had different class names for their

code:
<a></a>

tags. So, I gathered, it was as simple as that!

Sample multi-coloured links

Now, if you are interested to have 2 different colours (or more) for your links, here's what you can do:

First a set of 2 sample links:

Topsite List I

Topsite List II

You can go ahead and vote for this site while you at it :)

CSS for sample multi-coloured links

To create the style for the links, I insert the following on my web page, anywhere between my

code:
<head>
...css...
</head>
tags like this:

code:
<style type="text/css">
<!--
/*  CSS for SAMPLE 1  */
a:link.sample1 {
color: #0000FF;
text-decoration: none;
background-color: transparent
}
a:visited.sample1 {
color: #006699;
text-decoration: none;
background-color: transparent
}
a:hover.sample1 {
color: #FFFFFF;
text-decoration: none;
background-color: #000000
}
a:active.sample1 {
color: #0000FF;
text-decoration: none;
background-color: transparent
}

/*  CSS for SAMPLE 2 */
a:link.sample2 {
color: #FF0000;
text-decoration: none;
background-color: #FFFFFF
}
a:visited.sample2 {
color: #993300;
text-decoration: none;
background-color: #FFFFFF
}
a:hover.sample2 {
color: #0000FF;
text-decoration: overline underline;
background-color: #FFFFFF
}
a:active.sample2 {
color: #0000FF;
text-decoration: none;
background-color: #FFFFFF
}
-->
</style>

So now, further down on the same web page, I type the following when I create the links:

code:
<p>
  <a class="sample1" href="/pg1.html">Page I</a>
  <br />
  <a class="sample2" href="/pg2.html">Page II</a>
</p>

Link? Visited? Hover? Active?

Lastly, and this may seem trivial, but it's actually important - you must pay attention to the order of the different settings (i.e. 1. link, 2. visited, 3. hover, 4. active), or you will find that MSIE will be buggy with your CSS links. Opera is not so and Netscape has not been installed on my PC yet (this month) so I wouldn't know...

This is too much work - show me something easier with CSS

Of course - CSS Links II.

TOP

Do you like the new design?

 Yes

 No

 Don't know