Override inheritance of font-weight

Seems to be a simple problem, just can't get it to work :-)

[Lupi]

Hi,

I got a somewhat simple problem (I believe):

#sidebar p {
font-weight: bold;
}
#stats {
font-weight: normal;
}

<div id="sidebar">
<p id="stats">THIS TEXT IS NOT TO BE BOLD</p>
<p>THIS TEXT IS TO BE BOLD</p>
</div>

Problem occurs in IE6 and FF (didn't bother checking Opera and NN yet).

As you can see, the #stats text is to be normal font weight, all other <p>s are to be bold. I'm wondering why this doesn't work, shouldn't the font-weight: normal; in #stats override the inherited font-weight: bold;?

I know I could work around this by using <span id="stats">...</span>, but it means more code, more style definitions etc... And I also want to understand why my code doesn't work, I'm learning :-)!

- Lupi

[bunltd]

Hi, Lupi, welcome to WebmasterWorld.

You've used an ID on your <P>

ID is something you'd use once on a page, where a class you can re-use where needed.

Try this:

#sidebar {
font-weight: bold;
}
.stats {
font-weight: normal;
}

with this

<div id="sidebar">
<p class="stats">THIS TEXT IS NOT TO BE BOLD</p>
<p>THIS TEXT IS TO BE BOLD</p>
</div>

More on ID vs Class [google.com]

LisaB

[iamlost]

Your problem is specificity.

The #sidebar p is more specific to any <p> within <div>sidebar and so trumps any general id or class.

Change #stats to #sidebar p#stats and results will be what you want.

I agree with LisaB that a class is often best practice on any element smaller than a <div> i.e. #sidebar p.stats.

<edit>Added following links:</edit>

For CSS 1:
[w3.org ]
Note No. 4.

For CSS 2.1:
[w3.org ]

[Lupi]

Thank you for your help, Lisa and iamlost.

The reason for using #stats as opposed to .stats is that it appears only once per site.

- Lupi