Override em font-size when elements are nested

Question

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         


        

Answer 1

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