CODEWITHSUNDEEP
htmlcss
BeachRunnerFred
BeachRunnerFred

Reputation: 18558

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

Thanks so much!

Upvotes: 1

Views: 6527

Answers (4)

ghoppe
ghoppe

Reputation: 21784

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

Upvotes: 4

iOSDevSF
iOSDevSF

Reputation: 1179

the header tags need their own CSS Class.

h2, h4{
color:white;
}

should do the trick

Upvotes: 0

Micah Carrick
Micah Carrick

Reputation: 10187

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.

Upvotes: 2

Walker
Walker

Reputation: 134443

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

Upvotes: 3

Related Questions