CODEWITHSUNDEEP
csshtmloverridingfont-size
Sascha C
Sascha C

Reputation: 115

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.

Upvotes: 9

Views: 70752

Answers (5)

user12247270
user12247270

Reputation:

Thanks had same problem couldn't override font-size of footer of a nested element a.

.footer ul li a {

    font-size: 20px ;
    height: 25px;
}

Upvotes: 0

Zuul
Zuul

Reputation: 16269

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>

Upvotes: 6

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 11

yujust
yujust

Reputation: 133

How about stripping the "font" tags from the text before inserting into the div? Then just style the div with a font size.

Upvotes: 0

Viele
Viele

Reputation: 2336

One idea: give these text tags an id or class, then use JavaScript to find these elements and change the style on them.

Upvotes: 0

Related Questions