2 different css link styles

[slayerment]

dont know if this has been posted before but how could i make 2 different css styles for links. i want to have one set of buttons change one color on hover and another set change another color. thanks everyone!

[PalmerB]

Just use a class for the second style then reference it in your code <a class="sidelink" href="http://www.yourdomain.com/yourlink.htm">

This particular style sheet is from the following page...
http://www.morningstarwebdesigns.com...m/template.htm

All links

a:link { font-size: 12px; font-family:  "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
a:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
a:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold }
a:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #006633; text-decoration: underline; font-weight: bold }

Your button links

.sidelink:link { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #ffffff; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px; }
.sidelink:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}
.sidelink:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}
.sidelink:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: underline; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}

Good luck,
Palmer

[Paul O'B]

And to save typing (if your layout allows and you have a lot of links) put a <div> around the items you want to have a different link colour.

i.e
<div class="sidebar">
<a href="etc....
<a href="etc....
<a href="etc....
<a href="etc....
<a href="etc....
</div>

This will save writing <a class="sidebar" href="etc... on all the links.

Hope this helps.

Paul

[PalmerB]

Ah, I did not know that Thanks for pointing that out. The million dollar question is, does it work in Netscape 4.7?

Palmer

[Paul O'B]

The million dollar question is, does it work in Netscape 4.7?

Does anything!!

Sorry, don't know. I've only got Netscape 6.2, IE6, Opera6 and Mozilla 1.1 and it works fine in those.

Paul

[Bill Posters]

Palmer B,
I be inclined to say that it's best to still use a selector with the anchor pseudo-class even though some browsers will function without being literal.

a.sidelinks:link {...

not

.sidelink:link {...

It's the 'officially specified' way, so the least likely to cause problems with very strict (future?) browser versions.


Also, Paul O'B,
I've always understood that it's better to 'group' links as follows...

.sidelinks a:link {...

...

<span class="sidelinks"><a href="linkurl.html">Link text</a></span>

Can someone who knows the full sp on this subject let me know which method is most 'correct'* and why? TIA
(* pedantically and semantically? )


Of course, you can avoid using a span tag altogether by placing the class into whichever tag encapsulates the set.

<p class="sidelinks><a href="url.html">Link text</a></p>

By placing the classes more wisely, the span tag becomes almost completely redundant.
(At least that's what occurs to me after the whole 60 seconds I've spent thinking about it)

[Paul O'B]

Hi,

I've always understood that it's better to 'group' links as

I used div as it would covers links block level whereas the span would only cover inline. If all the links on one side of a page needed to be one colour and the ones on the other side needed to be another colour with other content in-between I would use div.

But now you mention it I'll suppose I'll have to go and see which is politically correct.

Paul

[Bill Posters]

My mistake.

Your "div" somehow became a "span" somewhere between the time I read your post and the time I wrote about your post.

Quite odd really. Anyone would think I have a psychotic/neurotic aversion to the use of <span> tags*.

Ergo, I retract my redundant blurb about redundant spans.


I'm still curious about the right/wrong way of coding class-grouped anchor pseudo-classes in the css though.

*

I see dead span tags.

When?

All the time!

[Paul O'B]

I know how you feel!

I've been thinking about this (not a lot) but:

a.sidebar :link

Doesn't this mean that only anchors with a class of sidebar will be affected?

Whereas

sidebar a:link

would affect all anchors within the class of sidebar.

The difference being that in the first one you would have to name all anchors <a class=" etc... and in the second one only the surrounding block needs to be named.

I've had a quick look at W3C and couldn't find much info one way or the other. I'll have to have a look when I've got more time!

Paul

[slayerment]

thank you everyone, you have all been very helpful

[Bill Posters]

Correct on both points, Paul, though in your first example you should remove the space before the :link

a.sidebar :link > a.sidebar:link

and in the second example you should replace the full-stop/period before the class name.

sidebar a:link > .sidebar a:link

---

Another point that has yet to be mentioned (in the name of efficiency)...

You don't need to restate attributes unless they differ from the root a:link (or the a:link for that class)

a:link { font-size: 12px; font-family:  "trebuchet ms", verdana, geneva, sans-serif; color: #404040; text-decoration: none; font-weight: bold }
a:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
a:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold }
a:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #006633; text-decoration: underline; font-weight: bold }

...can rightly be reduced to...

a:link { font: bold 12px "trebuchet ms", verdana, geneva, sans-serif; color: #404040; text-decoration: none; }
a:hover { color: #063; text-decoration: underline; }

Also, don't forget to follow the...

a:link {...
a:visited {… 
a:hover {…
a:active {…

...running order.
Some browsers will not show one or more of the states correctly if this running order is not followed.

---

Palmer B,
What is the !important that appears in the font-family attribute of your stylesheet sample?