CSS Link Problems

I'm a newbie with CSS, and having problems with link changing color.

[BlackIce]

Hey All,

I'm fairly new to CSS. What I want to do is have certain links in a document that are different colors. I'm using the following code:

.lcolors {

a:link {color: #FFFFFF;}
a:visited {color: #CCCCCC;}
a:active {color: #00FF00;}
a:hover {color: #ffffff;}

}

Here's the link I'm trying to change:

<a href="solutions.html" class="lcolors">Solutions</a>

The link color isn't changing to the colors specified. I'm sure the answer to this is fairly simple, and ANY help would be greatly appreciated.

Thanks.

[MonkeeSage]

Welcome to WebmasterWorld, BlackIce!

Are you wanting to only change that single link color, or all links in the document?

For all links, take out the

class="lcolors"

attribute from the link and just delete the

.lcolors {}

and leave the a rules that are inside it.

For just that link, leave the class attribute and make your css like this:

.lcolors {color: #FFFFFF;}
.lcolors:visited {color: #CCCCCC;}
.lcolors:active {color: #00FF00;}
.lcolors:hover {color: #ffffff;}

Jordan

[nancyb]

The recommended order is:
a:link
a:active
a:visited
a:hover

You might try changing to this order and see if it solves your problem. I had a similar problem when I started using CSS :)

[BlackIce]

Thanks MonkeeSage, I used your second suggestion for the NavBar, and it worked. I'm only changing links for a certain links, and it worked.

Thanks for the tip NancyB. I'll keep that in mind.

Can you exlplain to me why my code didn't work the first time around?

I hate being a newbie again...

[MonkeeSage]

BlackIce:

I'm still learning CSS myself, so this isn't authoritative or anything. Perhaps another more experienced user can explain it better if I'm mistaken or not precise enough.

From what I understand, this:

.lcolors {
 
a:link {color: #FFFFFF;}
a:visited {color: #CCCCCC;}
a:active {color: #00FF00;}
a:hover {color: #ffffff;}
 
}

...is the shorthand for either these selectors:

.lcolors a:link {color: #FFFFFF;}
.lcolors a:visited {color: #CCCCCC;}
.lcolors a:active {color: #00FF00;}
.lcolors a:hover {color: #ffffff;}

...which would apply to all the links descended from the element with the class "lcolors." But since the class was set on the links themselves, there are no descendant links inside of them, so these the selectors doesn't apply to anything. (See: [w3.org...] ).

Or is shorthand for these:

.lcolors > a:link {color: #FFFFFF;}
.lcolors > a:visited {color: #CCCCCC;}
.lcolors > a:active {color: #00FF00;}
.lcolors > a:hover {color: #ffffff;}

...which have a similar problem.
(See: [w3.org...] ).

Another alternate way of using your original selectors and still making it work is to wrap the links in a

<div></div>

or

<p></p>

and set the class "lcolors" on that element. But I usually find it more convenient to make a separate class for things like this so that I can throw it on any link I want without having to alter the content (after all the whole reason we want to take the CSS approach is to distinguish between form and content, right?).

Hope that helps. :)

Jordan

[BlackIce]

Makes perfect sense. Thanks a million.