Why doesn't my CSS code turn all the text white in the specified div?

I'm diving into web development and CSS is getting the best of me very early on. I have the following html...

<div class="span-6" id="left-sidebar"> 
    <h4>Left Sidebar</h4> 
    <ul> 
        <li>fruits</li> 
        <li>meats</li> 
    </ul> 
    <h4>This is a header</h4> 
</div> 

and my CSS code...

#left-sidebar, #right-sidebar {
    background-color: black;
    color: white;
}

but only the text "fruits" and "meats" are rendered in white text, the other text is rendered is a dark grey color. Why isn't all the text rendered in white?

Also, I find I can fix this when I'm more specific, using the CSS code...

#left-sidebar, #left-sidebar h4,   {
    background-color: black;
    color: white;
}

Why do I have to be more specific? Doesn't #left-sidebar mean, "render all text in the left-sidebar using white, unless it's been overwritten with a more specific CSS statement"?

I should also note that I don't have any other CSS code that's related to the left-sidebar div. Also, I'm using Blueprint CSS (as you can see in the "span-6" class), but I don't know how that could be conflicting wi开发者_Go百科th anything.

Thanks so much!

Blueprint css has default colours for heading tags. (see screen.css)

You need to specify:

#left-sidebar h2, #left-sidebar h4, 
#right-sidebar h2, #right-sidebar h4 { color: white; }

Basically, the h (header) definitions are sometimes pre-set by the browser. Are you using a CSS reset? Try this out http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - it essentially gets rid of browser defaults and makes it much easier to develop websites across multiple browsers.

In the short term, try setting the definitions of the h2 and h4 individually, like this:

h2,h4 {
     color: white;
}

Or add an important tag to your current CSS, like such:

#left-sidebar, #right-sidebar {
    background-color: black;
    color: white !important;
}

You can use Firebug in Firefox or the developer tools in Chrome to see what classes are being applied to each element. You just "Inspect" the element and view the applied CSS rules in the pane on the left.

the header tags need their own CSS Class.

h2, h4{
color:white;
}

should do the trick