Appearance:
 font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
 <absolute-size>
xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
larger | smaller
<length>
<percentage> (in relation to parent element)
Initial Value:
 medium
Applies to:
 All elements
Inherited:
 Yes

The font-size property is used to modify the size of the displayed font. Lengths should be used sparingly, due to their weakness in adjusting to varying resolutions.

Some example size assignments would be:

H1 { font-size: large }
P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like:

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a "medium" font size, whereas the default level-one heading font size imposed by IE would probably be considered "xx-large."
Given this bug, authors should take care in using percentage values for font-size.

The following code :

     <html>
     <head>
     <style>
     <!--
          H1 { font-size: large }
          P { font-size: 12pt }
          LI { font-size: 90% }
          STRONG { font-size: larger }
     -->
     </style>
     </head>
     <body>
     <font size=2 face=arial>
     Starting with a font size of 2 we then add <h1>h1 to the code</h1>
     <p>followed by p<li>Now li <strong>AND FINALLY STRONG</p>
     </body>
     </html>

would give

Starting with a font size of 2 we then add h1 to the code

followed by p
• Now li AND FINALLY STRONG