Search code examples
csshtmloverridingfont-size

Override font size in a DIV using CSS

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

  • 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: