Will using body {font-size: 10px} change the way ems work?

Question

I'm trying to design a responsive layout and I'm using a trick to make the use of EMs easier. In my body, I have this: body {font-size: 10px}. My question is: Will this change the way EMs work? If I set p {font-size: 1em} will it be 10px regardless of your screen size?

Answer 1

Setting font-size does not change the way the em unit works.

If you set p {font-size: 1em}, then, with the usual CSS Caveats (other style sheets might set font-size on p, etc.), the font size in any p will be equal to the font size of its parent, which is what happens by default anyway via inheritance (when no style sheet sets font-size on the p element).

If a p element is a child of body and you have set body {font-size: 10px}, then, with the Caveats, the p element’s font size will be 10 CSS pixels. The size of a CSS pixel depends on the device and need not equal physical device pixel; see 5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units in CSS Values and Units Module Level 3 CR (which is more realistic than CSS 2.1).