[Turtle91]

Hi,

Generally, when you define an element like you did, you are defining each element's attributes (it's box model: margin, border, padding, etc.). You are not defining it's child element's. If you want a specific attribute to inherit from it's parent you need to set it to 'inherit'.

eg.

p {color: inherit}

Here is a link to a better explanation of inheritance.

Having said that, when you set the body font-size to 100% your are setting the baseline font size for the document. When you then define font-size within a child element using EMs then that is relative to the font-size you set in the body. Clear as mud?
1em = 1 times the size you set in body
1.2em = 1.2 times the size you set in the body
2em = 2 times, etc.

That way, when a browser/reader/app changes the overall font size, then each font remains the same size relative to each other, ie the header will still stay 1.2 times the size of the normal paragraph font size if you used the following css:

body {font-size: 100%; margin: 0; padding: 0; border: 0}
h1   {font-size: 1.2em; font-weight: bold}
p    {font-size: 1em}