Tue, 2005-03-29 23:15
Why doesn't the following code work to change the font size?
div.main_item h1 {
background: #409740;
color:#FFFFFF;
font-size:12px;
}
....
<div class="main_item">
<h1>Header</h1>
</div>
The header's background and text color have changed, but not the font size. In order to change the font size, I have to do"
div.main_item h1 {
background: #409740;
color:#FFFFFF;
}
....
<div class="main_item">
<h1 style="font-size:12px;">Header</h1>
</div>
Why doesn't the first one work? How can I make it so that I all h1's in main_item divs have a set font-size?
Thanks, Sam
Tue, 2005-03-29 23:41
#1
text formatting h1
The fact that you have managed to change the size using an inline style should give you the clue to what is likely to be happening. Inlining styles carrys the heaviest weight and will trump other rules and class rules will be trumped by ID rules basically the more specific the rule is the heavier it's weight is.
Look for all possible instances of sizing of h1 tags and see if they are overriding your descendant class rules.
p.s your not really going to re-size your main heading to 12px are you ?
Hugo.