Overriding Percentage Font-size Attribute From Html Tag

Question

I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file. ... some js and css ...

Solution 1:

If you can add all your new content in a div, as you say, and then add a class to that div like:

<divclass="content">…</div>

Then your css to set the font size would be:

html.content {
  font-size: 100%;
}

Now for your specific problem:

Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:

html.content {
  font-size: 160%;
}

You should not need the !important flag for this to work.

body {
font-size: 137.5%!important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}