Override font size in a DIV using CSS

css, font-size, html, overriding

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:

- `font` element, at the W3.org.

- `font` element at the MDN.

Problem

Original source