CODEWITHSUNDEEP
htmlcss
codef0rmer
codef0rmer

Reputation: 10530

Why does font-size set on body tag not overwrite the one set on an element?

I'm loading an HTML page in an iframe and trying to set the font-size to 27pt to the body of iframes. but it does not apply that font to all the elements.

Below is the DIV and it's CSS:

<div id="d10" class="fnt12 page2parttext">COLLECTION</div>

.fnt12 {
  font-size: 25px;
  font-family: MyriadPro-SemiExt;
  color: white;
}

And I'm applying this CSS to the body of the page:

font-size: 40pt !important;

Although in the developer tool, the font-size property for .fnt12 is strikthrough but the text size is still 25px in size. I tried to uncheck the checkbox against font-size: 25px in Chrome Inpector and it worked.

Whats the problem? Why it does not overwrite the existing CSS property?

Upvotes: 1

Views: 3053

Answers (2)

dognose
dognose

Reputation: 20899

You can use

* {
   font-size:25px;
}

Setting it in the body won't work, as font-size is usually no inheritable attribue*. (font-color and font-family are). But you can set your divs and other things to:

div {
   font-size:inherit;
}

then it will take the font-size from it's direct parent.

*bad wording, see here for more information: http://webdesign.about.com/od/advancedcss/a/aa073007.htm

Upvotes: 2

Levi Botelho
Levi Botelho

Reputation: 25214

This doesn't work because you are applying the rule to the body element. While your font settings will inherit, if you apply a font setting directly to a child element that will generally override that applied to the parent. While the !important declaration will indeed give precedence to the styles to which it is applied in the body, importance does not cascade down to children. This is a good thing, because !important is generally only used for fine-tuning on a specific element or collection of elements.

For the official spec on specificity see http://www.w3.org/TR/CSS21/cascade.html.

And here is a general article on the topic: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.

Upvotes: 3

Related Questions