How to use two different styles for links

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

How to use two different styles for links

Post 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.
Coco
Forum Contributor
Posts: 339
Joined: Sat Sep 07, 2002 5:28 am
Location: Leeds, UK
Contact:

Post 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
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Do you have an example of how to override for an individual link?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Volka...thanks for the tip! That's exactly what I was needing!
CodeEye
Forum Commoner
Posts: 25
Joined: Fri Jul 05, 2002 7:19 am

Post 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>
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

I see...so, the #speciallinks takes precedence over the "default" link style? That's cool...thanks! :)
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

if you're amazed by now, take a look at http://www.w3.org/Style/CSS/learning

CSS2 go go go ;)
Post Reply