Setting different CSS styles for different tables?

[BlackReefDesign]

Im still learning CSS. I am having a hell of a time trying to get different styles for different tables. Every time I change something in the CSS, it changes the whole page!

On the right nav, I have a dark background. So the links need to be light colored

In the body, I have a white background, so the links need to be dark colored.

Its either one or the other so far...

help!

[WebJoel]

Makes the links on page one be:

#page-one {....}

and the links on page two be:

#page-two {....}

Assuming that you are using the correct element "<ul>" for this, you have segregated the two lists with different styles.

You would STILL want to have a 'default' style for links, however, so you embedded "<STYLE></STYLE> might look like this:

<style>
ul {....}
li {....}
li a {....}
li a:hover {....}

#page-one {....}
#page-one li {....}
#page-one li a {....}
#page-one li a:hover {....}

#page-two {....}
#page-two li {....}
#page-two li a {....}
#page-two li a:hover {}
....
</style>

html
<ul id="page-one">
<li></li>....
</ul>

<ul id-"page-two">
<li></li>....
</ul>

Now, you CAN shorten all of this and use maybe a javascript to determine what page # it is, and take the CSS to apply that way, but I might think that this approach would be problematic if you later added a page or two then things would really mess-up. As it would be, you'd have to rename the CSS from what I have (you would not want "#page-one" to apply to any page that is NOT 'page #1' just for the sake of simplicity and nothing else..)