stylesheet issue

[TimBWolf]

I am working at learning and understanding style sheets. Below is a snippet of code from the styesheet included in the basic zencart deployment. My problem is I want to have the links at the top of the page behave differently then the links in the right boxes and left boxes. I am thinking in the code below the hover action is being set for 4 distinct areas on the page. How do I separate them so I can assign different properties/actions to links in different areas of the pages?

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FFFFFF;
font-family:Arial;
font-size:12px;
text-decoration: none;
font-weight: bold;
}

[Get Em Fast]

What's the url for your site?
Which links do you want changed, and to what color? hover color?

[TimBWolf]

No offense but I need to learn how to do this myself. Am i correct in thinking that the code is covering 4 distinct areas and if so how do I separate them?

[TimBWolf]

I can't say for sure what the final color will be i'm just playing around with the entire thing at the moment

[TimBWolf]

thank you. I was thinking that was how it was done but I thought it best to start asking questions. Sometimes I get to messing around too much and then forget where I am at in this process.

[Goldenis]

Just some advice from my experience being new at this too.

I started copying my whole style sheet into a Word document any day I planned extensive changes. This way I had an easy reference point where things started. Next time I just copied over the last version. Periodically archiving a copy.

I try to make this a habit now, learning from my mistakes.

Of course always do back ups.

[gjh42]

Generically, separate out the selectors you want to style differently:

a:hover, #navEZPagesTOC ul li a:hover {
color: #FFFFFF;
font-family:Arial;
font-size:12px;
text-decoration: none;
font-weight: bold;
} 
#navMain ul li a:hover, #navCatTabs ul li a:hover {
color: #ffeedd;
font-size:10px;
} 
#navSupp ul li a:hover {
color: #aaaaaa;
font-weight: normal;
}

You only need the properties that you want different in the second/third rules.