***
FLEXIBLE TEXT USING EMS

the current font-size default is the medium setting, which is 16px in most browsers.

body { font-size: 62.5% } /* gives us a base of 10px */

h1 { font-size: 2em; } /* 20px */

h2 { font-size: 1.8em; } /* 18px */

p { font-size: 1.2em; } /* 12px */

#sidebar { font-size: 1em; } /* 10px */

when nesting occurs, remember the formula:

child pixels / parent pixels = child ems
ex. 24 / 12 = 2

hence:

p { font-size: 1.2em; } /* 12px */

p abbr { font-size: 2em; } /* 24px */

for the external CSS document click here .