topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

basic-web-html-07-ch07-eg03.htm / htm



  <?xml version="1.0" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  
  <head>
    <title>CSS Example</title>
    <link rel="stylesheet" type="text/css" href="basic-web-html-07-ch07-eg03.css" />
  </head>
  
  <body>
  <h1>Font Sizes</h1>
  
  <table><tr><td valign="top">
  
  <h2>Absolute</h2>
  <p class="absoluteone">xx-small</p>
  <p class="absolutetwo">x-small</p>
  <p class="absolutethree">small</p>
  <p class="absolutefour">medium</p>
  <p class="absolutefive">large</p>
  <p class="absolutesix">large</p>
  <p class="absoluteseven">large</p>
  
  </td><td valign="top">
  
  <h2>Pixels</h2>
  <p class="pixelsone">9 px</p>
  <p class="pixelstwo">12 px</p>
  <p class="pixelsthree">14 px</p>
  <p class="pixelsfour">18 px</p>
  <p class="pixelsfive">24 px</p>
  <p class="pixelssix">36 px</p>
  <p class="pixelsseven">48 px</p>
  
  </td><td valign="top">
  
  <h2>Points</h2>
  <p class="pointone">9 pt</p>
  <p class="pointtwo">12 pt</p>
  <p class="pointthree">14 pt</p>
  <p class="pointfour">18 pt</p>
  <p class="pointfive">24 pt</p>
  <p class="pointsix">36 pt</p>
  <p class="pointseven">48 pt</p>
  
  </td><td valign="top">
  
  <h2>Picas</h2>
  <p class="picaone">1 pc</p>
  <p class="picatwo">2 pc</p>
  <p class="picathree">3 pc</p>
  <p class="picafour">4 pc</p>
  
  </td></tr></table>
  <br /><hr /><br />
  <table><tr><td valign="top">
  
  <h2>Relative Sizes</h2>
  <p class="relativeone">smaller</p>
  <p class="relativetwo">no style</p>
  <p class="relativethree">larger</p>
  
  </td><td valign="top">
  
  <h2>Ems</h2>
  <p class="emone">1em</p>
  <p class="emtwo">2em</p>
  <p class="emthree">3em</p>
  <p class="emfour">4em</p>
  
  </td><td valign="top">
  
  <h2>Exs</h2>
  <p class="exone">1ex</p>
  <p class="extwo">2ex</p>
  <p class="exthree">3ex</p>
  <p class="exfour">4ex</p>
  <p class="exfive">5ex</p>
  <p class="exsix">6ex</p>
  <p class="exseven">7ex</p>
  
  </td><td valign="top">
  
  <h2>Percents</h2>
  <p class="percentone">50%</p>
  <p class="percenttwo">75%</p>
  <p class="percentthree">100%</p>
  <p class="percentfour">150%</p>
  <p class="percentfive">200%</p>
  <p class="percentsix">400%</p>
  
  </td></tr></table>
   
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.