CSS question

[thunderstruck]

In my .css file, I have defined some links, eg:

a:link {
text-decoration: none;
color: #003366;
}
a:visited {
text-decoration: none;
color: #003366;
}
a:hover, a:active {
text-decoration: underline;
color: #666666;
}

However, I want more than one style of link on my page. How do I define this in my stylesheet, and then do I use <A HREF="xxx.html" CLASS="XXX"> to use it?

Thanks.

[robbieduncan]

a.classname:link {} etc

[thunderstruck]

Thanks

Seems not to work in Firefox?

[robbieduncan]

I've just tried this in FF. It works?

<html>
<head>
<style type="text/css">
a, a:visited { color:red; }
a.xxx, a.xxx:visited {color:green }
</style>
</head>
<body>
<a href="">test</a><br>
<a href="" class="xxx">test</a>
</body>
</html>

[thunderstruck]

Hmm maybe I'm being daft then. I'll try again...thanks anyway!

[robbieduncan]

thunderstruck said:

Hmm maybe I'm being daft then. I'll try again...thanks anyway!

Note I don't have the :link on mine. This might make a difference?

[GreenV8S]

I remember there was something funny about this, can't remember the details exactly but in order to get mouseover behaviour to work you have to define exactly the right set of anchor states in the correct order, even then I seem to remember it was only approximately right. This was for IE, but might apply to FF too?

[Plotloss]

CSS is not fully supported by all browsers so expect there to be significant differences between IE, Firefox and Opera etc etc.

[PetrolTed]

Plotloss said:

CSS is not fully supported by all browsers so expect there to be significant differences between IE, Firefox and Opera etc etc.

In my experience only older browsers don't conform. All browsers in common use today support 98% of CSS and pretty consistently.

The order of declaration is important for link styling (i.e. active/hover/etc.).

Check out Eric Meyer

www.meyerweb.com/eric/css/link-specificity.html

[Plotloss]

PetrolTed said:

Plotloss said: CSS is not fully supported by all browsers so expect there to be significant differences between IE, Firefox and Opera etc etc. In my experience only older browsers don't conform. All browsers in common use today support 98% of CSS and pretty consistently. The order of declaration is important for link styling (i.e. active/hover/etc.). Check out Eric Meyer www.meyerweb.com/eric/css/link-specificity.html

If comparing relatively thick browsers I would say thats correct however

[Nielsen]
Moving foward mobile browsers, PDA browsers, screen readers etc will have a bearing on CSS based design
[/Nielsen]

But yes, >95% are probably viewing via Windows.

[wildeep]

I do it a slightly different way. Works fine in FF,IE, Safari etc.

Example:

.g12 { color: black; font-size: 12px; font-family: Geneva, Arial, Helvetica, Swiss, SunSans-Regular }
.g12 a:link { color: #8492BC; text-decoration: underline }
.g12 a:visited { color: #8492BC; text-decoration: underline }
.g12 a:hover { color: black; text-decoration: none }
.g12 a:active { color: black; text-decoration: none }

>> Edited by wildeep on Wednesday 28th September 15:07

[RameshUK]

www.alistapart.com is good resource as well.