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

You could use the CSS3 rem unit, which is relative to the root, not the parent. I've been stuck in this same dilema as the project I'm working on has so many nested elements that the em is not reliable.

You can find more information here http://snook.ca/archives/html_and_css/font-size-with-rem.

The only issue is fallback browser support for IE8 and below. You still need to provide a pixel size before declaring the rem size. Despite this extra coding, it may still be worth looking into.