<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="1font-size.css">
</head>
<body>
<h1>font-size Properties</h1>
<table>
<tr>
<th>Absolute Size<th>Pixel<th>Point<th>Pica
<tr>
<td valign="top">
<p class="absolute1">xx-small</p>
<p class="absolute2">x-small</p>
<p class="absolute3">small</p>
<p class="absolute4">medium</p>
<p class="absolute5">large</p>
<p class="absolute6">x-large</p>
<p class="absolute7">xx-large</p>
</td><td valign="top">
<p class="pixels1">9 px</p>
<p class="pixels2">12 px</p>
<p class="pixels3">14 px</p>
<p class="pixels4">18 px</p>
<p class="pixels5">24 px</p>
<p class="pixels6">36 px</p>
<p class="pixels7">48 px</p>
</td><td valign="top">
<p class="point1">9 pt</p>
<p class="point2">12 pt</p>
<p class="point3">14 pt</p>
<p class="point4">18 pt</p>
<p class="point5">24 pt</p>
<p class="point6">36 pt</p>
<p class="point7">48 pt</p>
</td><td valign="top">
<p class="pica1">1 pc</p>
<p class="pica2">2 pc</p>
<p class="pica3">3 pc</p>
<p class="pica4">4 pc</p>
</td></tr>
</table>
<br>
<table >
<tr>
<th>Relative Size<th>Em<th>Ex<th>Percent
<tr>
<td valign="top">
<p class="relative1">smaller</p>
<p class="relative2">no style</p>
<p class="relative3">larger</p>
</td><td valign="top">
<p class="em1">1em</p>
<p class="em2">2em</p>
<p class="em3">3em</p>
<p class="em4">4em</p>
</td><td valign="top">
<p class="ex1">1ex</p>
<p class="ex2">2ex</p>
<p class="ex3">3ex</p>
<p class="ex4">4ex</p>
<p class="ex5">5ex</p>
<p class="ex6">6ex</p>
<p class="ex7">7ex</p>
</td><td valign="top">
<p class="percent1">50%</p>
<p class="percent2">75%</p>
<p class="percent3">100%</p>
<p class="percent4">150%</p>
<p class="percent5">200%</p>
<p class="percent6">400%</p>
</td></tr></table>
</body>
</html>