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?

It's because you have add specific css for all h2 tag.. if you add any content in without any tag it working.. — Mukesh Ram
– Mukesh Ram, Commented Aug 29, 2016 at 6:20

hdotluna · Accepted Answer · 2016-08-29 06:15:04Z

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/

answered Aug 29, 2016 at 6:15

hdotluna

5,7424 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hdotluna Over a year ago

@kernallora Maybe, it is because the parent won't affect the children. Rem and em are from css3.

AdvancingEnemy Over a year ago

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 Over a year ago

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.

Head In Cloud · Accepted Answer · 2016-08-29 06:24:12Z

0

Here it is not working because you have used PX

you can use relative units for that

click here for absolute and relative units

answered Aug 29, 2016 at 6:24

Head In Cloud

2,0511 gold badge10 silver badges10 bronze badges

Comments

Surya Teja · Accepted Answer · 2016-08-29 06:54:22Z

0

.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>

edited Aug 29, 2016 at 6:54

answered Aug 29, 2016 at 6:25

Surya Teja

1,5444 gold badges18 silver badges34 bronze badges

2 Comments

AdvancingEnemy Over a year ago

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 Over a year ago

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..

Collectives™ on Stack Overflow

why !important doesn't work in css?

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related