Question

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 with anything.

Thanks so much!

Answer 1

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; }