Page 1 of 1

How to use two different styles for links

Posted: Wed Sep 25, 2002 1:51 pm
by Crashin
Is it possible? I've got one style setup in my linked stylesheet. However, I'd like to use a different style for certain links on my page while leaving the default style for the other links. Can different classes be setup for links? I've searched far and wide for a definitive answer, but haven't found one yet.

Posted: Wed Sep 25, 2002 1:54 pm
by Coco
hmmm i dont think you can have 2 different styles in a css (tho i wouldnt be surprised to hear im wrong) but what you can do is set your default style in your css and manually override it for individual links

Posted: Wed Sep 25, 2002 1:56 pm
by Crashin
Do you have an example of how to override for an individual link?

Posted: Wed Sep 25, 2002 2:04 pm
by volka
always the most specialized selector of a css statement is used.
i.e. the body

Code: Select all

<a href="somewhere">click me</a>
<a class="specialAnchor" href="somewhere">click me, too</a>
a{ color: #ff0000; } .specialAnchor{ color: #00ff00; }
a class-id is more specific than a simple tag-selector --> the first link will be red, the second green


a:hover { color: #ff0000; } a.specialAnchor:hover{ color: #00ff00; }
the same goes for pseudo-classes

Posted: Wed Sep 25, 2002 3:54 pm
by Crashin
Volka...thanks for the tip! That's exactly what I was needing!

Posted: Fri Sep 27, 2002 8:29 am
by CodeEye
if you have those links in a certain place you could also insert them into a div tag and set the style for that eg

css code
#speciallinks a:hover{color: #00ff00; }

a:hover { color: #ff0000; }

html code
<div id="speciallinks">
<a href="#">da</a>
<a href="#">da</a>
<a href="#">da</a>
</div>

Posted: Fri Sep 27, 2002 9:19 am
by Crashin
I see...so, the #speciallinks takes precedence over the "default" link style? That's cool...thanks! :)

Posted: Fri Sep 27, 2002 9:33 am
by volka
if you're amazed by now, take a look at http://www.w3.org/Style/CSS/learning

CSS2 go go go ;)