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?
You can use
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:
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