1 reply [Last post]
swoodard
Offline
Regular
San Francisco, CA
Last seen: 12 years 9 weeks ago
San Francisco, CA
Joined: 2004-11-19
Posts: 44
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me