Link styles - main style for "a" rules all link styles. Help please.

[Chappers]

Hi,

I'm trying to set different styles for links on my website, depending on whether they're menu links, links on a certain page, etc. Here's the CSS:

[code]a:link, a:visited{
font:14px Verdana, Helvetica, sans-serif;
color: #00FF00;
text-decoration: none;
}

a:hover{
font:14px Verdana, Helvetica, sans-serif;
color: #FF0000;
text-decoration: none;
}

a.spiritlink:link, a.spiritlink:visited{
font:11px Verdana, Helvetica, sans-serif;
color:#00FF00;
text-align:justify;
text-decoration: none;
}

a.spiritlink:hover{
font:11px Verdana, Helvetica, sans-serif;
color:#FF0000;
text-align:justify;
text-decoration: none;
}

a.menu:link, a.menu:visited{
font:12px Verdana, Helvetica, sans-serif;
color: #166503;
width:150;
margin-left: 6px;
text-decoration: none;
filter:Glow(color=#4FFF25, strength=5);
}

a.menu:hover{
font:12px Verdana, Helvetica, sans-serif;
color: #FF0000;
width:150;
margin-left: 6px;
text-decoration: none;
filter:Glow(color=#FC8322, strength=5);
}[/code]

Trouble is, the basic link style (a:link) has an effect on all the link classes I create afterwards. I can remove the basic style for "a" links, but then it just uses the default font type, size and colours of IE anyway. If I set a:link, etc., to 14px font size, then my a.menu class displays at that size too, regardless of having a separate font size value entered for that class.

Is there a way around this that will let me set unique "a" classes for links that conform to whatever parameters I set (font, size, glow, padding, hover effects...) without being affected by the default "a" class?

Thanks,
James

[ToonMariner]

try doing this on the basis of the parent element.

If all your menu links are in a div like so..

<div id="menu"><a href".......

then you can use this in your style sheet

#menu a,
#menu a:visited,
#menu a:link {
font:12px Verdana, Helvetica, sans-serif;
color: #166503;
width:150;
margin-left: 6px;
text-decoration: none;
filter:Glow(color=#4FFF25, strength=5);
}

#menu a:hover {
font:12px Verdana, Helvetica, sans-serif;
color: #FF0000;
width:150;
margin-left: 6px;
text-decoration: none;
filter:Glow(color=#FC8322, strength=5);
}

these styles will only ever apply to a tags that are a decendant of any element with an id of menu.

Similarly you can do the same for other sections of you site....

You just need to isolate elements that contain the links you wish to alter and use that elements id (or class) to manipulate them.

[dbrimlow]

You are using what looks like either MS proprietary or just plain wrong CSS in many instances. But first, as ToonMariner noted, you need to redifine the a:link, a:visited and a:hover, etc within an id (#divname - can only be used once per page) or class (.divname - can be used more than once per page).

You do NOT redfine the tag itself from line to line because of the cascade in "cascading" - remember that the style element of any element "tag", "id" or "class" is determined by the last use of it within the sheet.

So you always want to redefine a tag level element used within an id or class by actually defining it in the id or class itself. for example (using your sheet):

This sets the page default link and visited style. Unless properly instructed otherwise, all links will use this:
a:link, a:visited{
font:14px Verdana, Helvetica, sans-serif;
color: #00FF00;
text-decoration: none;
}

*********************
This sets the link in the class ".spiritlink":

.spiritlink a:link, a:visited{
font:11px Verdana, Helvetica, sans-serif;
color:#00FF00;
text-align:justify;
text-decoration: none;
}
**************
This is not "valid" css:

a.menu:link, a.menu:visited{
font:12px Verdana, Helvetica, sans-serif;
color: #166503;
width:150;
margin-left: 6px;
text-decoration: none;
filter:Glow(color=#4FFF25, strength=5);
}

First, you need to define the link within the class like above - .menu a:link, a:visited{styles},
second, "width 150;" is useless ... 150 what? pixels? percent? em? points?

You need to define a size type.

Last, "filter:Glow(color=#FC8322, strength=5);" - as you are using it, this is an IE only tag and will be ignored (not work) by "real" browsers. The proper use of "filter" in CSS is usually as a "hack" to get IE to behave like a real browser.

So it seems as if you are targeting your website design to IE only. You really should beware of falling into the IE only trap and nip this in the bud.

I was an IE only designer myself for years up until the release of Firefox 1.1. When I discovered that 90% of the "styles" (like scrollbar colors and filters), DHTML, javascript and "layers" I was using didn't work in FF, Mozilla, Netscape, Safari, Opera.

It has taken me nearly two years to learn how much I didn't know, how much I knew was wrong, how much I don't know and how much I most likely will never know. But at least in those 2 years I have finally learned enough how to make a web page behave in most browsers including IE 5.1, 5.5, 6.0 - although, again, I've only learned enough about this to still have the occasional 3 hour bouts of fighting with IE regardless.

Books only helped so much - because they usually just pepper the page with footnotes about what browsers it doesn't work in and how you need to go learn all of the "hacks" to get it to work; and I have yet to find a hack thatworks every time).

One of the only ways I was able to get a true handle on it was to reverse engineer free, web standards tableless css layouts - I started with www.csszengarden.com, then found [url=http://www.ex-designz.net/template/tempcat.asp?cat_id=13]http://www.ex-designz.net/template/tempcat.asp?cat_id=13[/url]

[ToonMariner]

After scrapping with hacks just as dbrimlow has. I know design sites so that I don't use them anymore - haven't used hacks/workrounds for months now.

You can - if you take your time and plan well - negate the need to use anything other than css and get your sites lokking pretty damn similar in all the popular browsers.  Admittedly you may missout on a few bits here and there BUT it makes your site look so much more professional and clean.