setting different style for tags in different ids/classes

[gamblor01]

Hi everyone,

 

I read through the w3 schools section for CSS, because I'm not very good with them.  I am just playing around with things and I wanted to know how to properly setup a page so that, for example, I have 2 different "boxes".  Let's suppose that I have a navigation menu on the left side of my page with hyperlinks it in.  I want to define certain styles for the links in that navigation menu that are different than the ones defined in the body of the page.  How would I accomplish this?

 

For example, suppose I want the following in the "navigation" bar:

 

a:link {color:#000000}
a:visited {color:#000000}

 

but then for my main page I want:

 

a:link {color:#cfcfcf}
a:visited {color:#cfcfcf}

 

 

I'm looking at using ids or classes here, though I am not really sure what the most appropriate choice is.  The w3 school's tutorial does not really clarify this to any extent:

 

http://www.w3schools.com/css/css_id_class.asp

 

 

Do I just do something like this:

 

#menu
{
a:link {color:#000000}
a:visited {color:#000000}
}

#content
{
a:link {color:#cfcfcf}
a:visited {color:#cfcfcf}
}

 

 

and then later in my HTML code do:

 

<div id="menu">
<p>Visit <a href="www.google.com">www.google.com</a> to search for some stuff!</p>
</div>

<div id="content">
<p>Lots of content <a href="www.google.com">here!</a></p>
</div>

 

 

Is this the correct syntax?  It doesn't seem to work when I try it so I'm guessing the answer is no.  Ideally I would like to be able to specify all sorts of different formatting/colors/decoration/etc. for one section of a page, and change some or all of those in another section of the page.  Thus, I would want some div tag with one id that has definitions for the a:* tags, the p tag, the hr tag, and so on -- and another div tag with a different id that has completely different definitions.

 

Can anyone explain to me how this is done?  If you can recommend a good CSS book or online tutorial that is fantastic as well.  The w3 tutorial is OK but I need more. 

[haku]

Here is an example.

HTML:

<div id="navigation">
  <a href="#">navigation link</a>
</div>
<div id="content">
  <a href="#">content link</a>
</div>

CSS:

#navigation a
{
  color:red;
}
#navigation a:hover
{
  color:blue;
}

 

#content a

{

  color:green;

}

 

#content a:hover

{

  color:yellow;

}