Override font size in a DIV using CSS

Question

In a DIV I place some text/html code which get loaded from a database. This text sometimes contains font size definitions (ex: font size="3"). is there a way to override this font size in this specific DIV using CSS.

I am grateful for any help.

Solution 1

Assuming mark-up similar to the following:

<div>
    <font size="1">Some text at 'size="1"'</font> and natively-sized text, with more at <font size="26">'size="26".'</font>
</div>​

Then you can explicitly instruct CSS to inherit the font-size from the parent element:

div {
    font-size: 1.5em;
}
div font {
    font-size: inherit;
}

JS Fiddle demo.

Please note, of course, that font is deprecated and should, therefore, not be used (as support for the element can stop without notice, and/or implementations change without warning).

Incidentally, while !important will force a declaration to override the usual cascade of styles, it's taking a sledgehammer to crack a nut; and, if it can be avoided (and in this case, it seems, it can be avoided) it should be, since it complicates later debugging of styles, and associated inheritance problems.

Further, this is treating the symptom of your problem; the problem you're really facing is the presence of the font tags in your content/database. This should be corrected, by removing the elements, and replacing them with appropriately-styled elements, such as em, span and so forth...

References:

• font element, at the W3.org.
• font element at the MDN.

Solution 2

Using the CSS !important notation you are telling the browser to overwrite any font-size defined inside your div:

From the above link it reads:

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.

Example

See this working Fiddle Example!

.htmlContents * {font-size:10px!important;}

<div class="htmlContents">my database html content</div>