why !important doesn't work in css?

Question

i want to zoom in all the font-size to 200% in my web, here are some test code in fiddle,

if really PX issue, but why here the code are working if i add the style in "<-h2>" ?

<div >
<h2 class="test" style="font-size:300% !important">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello
</h2>

or, there is another question how can i enlarge all the font-size on a same rate?

• Jacek Szymański: Start using "rem" units.
• Mukesh Ram: It's because you have add specific css for all h2 tag.. if you add any content in without any tag it working..

Answer 1

Use em and rem.

You can use this http://pxtoem.com/

HTML

<div style="font-size:2rem !important" >
 <h2 class="test">
 hello
 </h2>
 <h2 class="test2">
 hello
 </h2>
 <h2 class="test3">
 hello
 </h2>
</div>

CSS

.test{
 font-size:1em;
}
.test2{
 font-size:2em;
}
.test3{
 font-size:3em;
}

Working fiddle: https://jsfiddle.net/eom40w0L/8/

• hdotluna: @kernallora Maybe, it is because the parent won't affect the children. Rem and em are from css3.
• AdvancingEnemy: please get my update in my question, if it's px issue, but why here the code are working if i add the style in "<-h2>" ?
• hdotluna: It's because you add it to the h2 which is the child of div that has the font-size attribute. This is the only way to manipulate font-size in css. Or maybe you can find js library. There's alot out there.

Answer 2

Here it is not working because you have used PX

you can use relative units for that

click here for absolute and relative units

Answer 3

.test{
 font-size:10px;
}
.test2{
 font-size:20px;
}
.test3{
 font-size:30px;
}
div h2{
 zoom:300%!important;
}

<div class="data">
<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>
</div>

you can also use Zoom property like this

.test{
 font-size:10px;
}
.test2{
 font-size:20px;
}
.test3{
 font-size:30px;
}
.data{
 zoom:300%!important;
}

<div class="data">
<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>
</div>

• AdvancingEnemy: it's cool , but this will zoom the whole web, now i just want to enlarge the font in my web, any other workaround?
• Surya Teja: im not sure but....im adding another answer with a minor change...i think this will help you...instead of not reaching ur expectation im sorry..