Home/ Questions/Q 8547441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:16:01+00:00

How do you override the font-size property when you have nested elements? Using !important

  • 0

How do you override the font-size property when you have nested elements? Using !important doesn’t seem to have any effect.

div {
    font-size:6em;  
}
p {
    font-size:1em !important;
}
span {

    font-size:1em;
}

–

<html>
<body>
    <div><span>span</span><p>paragraph</p></div>
</body>
</html>​

​

http://jsfiddle.net/dvUTQ/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Em’s are relative sizes to their parent elements.

    http://jsfiddle.net/dvUTQ/3/

    div#small {
  font-size:2em; 
}
div#big {
  font-size:6em;
}
p {
  font-size:.5em; /* effective sizes: big: 3em, small: 1em */
}
span {
  font-size:2em; /* effective sizes: big: 12em, small: 4em */
}

    Setting a child element to 1em just makes it the same size as its parent. .5em on p in this case would effectively make it 3em.

    http://www.w3schools.com/cssref/css_units.asp

    • 0