HTML/CSS/Text — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 08:17, 26 мая 2010

Содержание

Example of Simple Font Styling

 
<!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">
<head>
<title>Example of Simple Font Styling</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, Times, serif;
}
p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>header 1</h1>
<h2>header 2</h2>
<p>this is a test.</p>
</body>
</html>



font color

 
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .color1 {
  color: black;
}
* .color2 {
  color: gold;
}
</style>
</head>
<body>
<p>
    <code>color:</code>
    <span class="color1">black</span> 
    <span class="color2">gold</span>
</p> 
</body>
</html>



font-family: Arial

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#arial {
          font-family: Arial;
      }
        </style>
    </head>
    <body>
    <p id="arial">
        This font is Arial.
    </p>
    </body>
</html>



Font family cascade

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Property Inheritance </title>
        <style type="text/css">
      * {
          font-family: sans-serif;
      }
      div {
          font-family: "Times New Roman";
      }
        </style>
    </head>
  <body>
      This font is sans-serif.
      <div>
          This font is Times New Roman.
      </div>
  </body>
</html>



font-family: cursive;

 
<html>
<head>
<title></title>
<style type="text/css">
h2 {
  text-decoration: underline;
}
.serif {
  font-family: serif;
  text-align: right;
}
.sans-serif {
  font-family: sans-serif;
  text-align: center;
}
.monospace {
  font-family: monospace;
  text-align: justify;
}
.cursive {
  font-family: cursive;
  text-align: left;
}
.fantasy {
  font-family: fantasy;
}
</style>
</head>
<body>
<h1>Font Sampler</h2>
<h2>Serif</h2>
<div class="serif">Serif<br />
Serif</div>
<h2>Sans Serif</h2>
<div class="sans-serif">Sans Serif<br />
Sans Serif</div>
<h2>Monospace</h2>
<div class="monospace">Monospace<br />
Monospace</div>
<h2>Cursive</h2>
<div class="cursive">Cursive<br />
Cursive</div>
<h2>Fantasy</h2>
<div class="fantasy">Fantasy<br />
Fantasy</div>
</body>
</html>



font-family Demo

 

<html>
<head>
<title>Generic Font Demo</title>
</head>
<body>
<p style="font-family: serif; font-size: 1.3em">This is a serif font.</p>
<p style="font-family: sans-serif;font-size: 1.3em">This is a sans-serif font.</p>
<p style="font-family: monospace;font-size: 1.3em">This is a monospace font.</p>
<p style="font-family: cursive;font-size: 1.3em">This is a cursive font.</p>
<p style="font-family: fantasy;font-size: 1.3em">This is a fantasy font.</p>
</body>
</html>



font-family: fantasy;

 
<html>
<head>
<title></title>
<style type="text/css">
h2 {
  text-decoration: underline;
}
.serif {
  font-family: serif;
  text-align: right;
}
.sans-serif {
  font-family: sans-serif;
  text-align: center;
}
.monospace {
  font-family: monospace;
  text-align: justify;
}
.cursive {
  font-family: cursive;
  text-align: left;
}
.fantasy {
  font-family: fantasy;
}
</style>
</head>
<body>
<h1>Font Sampler</h2>
<h2>Serif</h2>
<div class="serif">Serif<br />
Serif</div>
<h2>Sans Serif</h2>
<div class="sans-serif">Sans Serif<br />
Sans Serif</div>
<h2>Monospace</h2>
<div class="monospace">Monospace<br />
Monospace</div>
<h2>Cursive</h2>
<div class="cursive">Cursive<br />
Cursive</div>
<h2>Fantasy</h2>
<div class="fantasy">Fantasy<br />
Fantasy</div>
</body>
</html>



font-family: monospace;

 
<html>
<head>
<title></title>
<style type="text/css">
h2 {
  text-decoration: underline;
}
.serif {
  font-family: serif;
  text-align: right;
}
.sans-serif {
  font-family: sans-serif;
  text-align: center;
}
.monospace {
  font-family: monospace;
  text-align: justify;
}
.cursive {
  font-family: cursive;
  text-align: left;
}
.fantasy {
  font-family: fantasy;
}
</style>
</head>
<body>
<h1>Font Sampler</h2>
<h2>Serif</h2>
<div class="serif">Serif<br />
Serif</div>
<h2>Sans Serif</h2>
<div class="sans-serif">Sans Serif<br />
Sans Serif</div>
<h2>Monospace</h2>
<div class="monospace">Monospace<br />
Monospace</div>
<h2>Cursive</h2>
<div class="cursive">Cursive<br />
Cursive</div>
<h2>Fantasy</h2>
<div class="fantasy">Fantasy<br />
Fantasy</div>
</body>
</html>



font-family: sans-serif;

 

<html>
<head>
<title></title>
<style type="text/css">
h2 {
  text-decoration: underline;
}
.serif {
  font-family: serif;
  text-align: right;
}
.sans-serif {
  font-family: sans-serif;
  text-align: center;
}
.monospace {
  font-family: monospace;
  text-align: justify;
}
.cursive {
  font-family: cursive;
  text-align: left;
}
.fantasy {
  font-family: fantasy;
}
</style>
</head>
<body>
<h1>Font Sampler</h2>
<h2>Serif</h2>
<div class="serif">Serif<br />
Serif</div>
<h2>Sans Serif</h2>
<div class="sans-serif">Sans Serif<br />
Sans Serif</div>
<h2>Monospace</h2>
<div class="monospace">Monospace<br />
Monospace</div>
<h2>Cursive</h2>
<div class="cursive">Cursive<br />
Cursive</div>
<h2>Fantasy</h2>
<div class="fantasy">Fantasy<br />
Fantasy</div>
</body>
</html>



font family sequence

 
<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}
p.one {
  font-family: arial, verdana, sans-serif;
}
p.two {
  font-family: times, times new roman, serif;
}
p.three {
  font-family: courier, courier new, serif;
}
</style>
</head>
<body>
<h1>Font Properties</h1>
<p class="one">Here is some text.</p>
<p class="two">Here is some text.</p>
<p class="three">Here is some text.</p>
 
</body>
</html>



font-family: serif;

 
<html>
<head>
<title></title>
<style type="text/css">
h2 {
  text-decoration: underline;
}
.serif {
  font-family: serif;
  text-align: right;
}
.sans-serif {
  font-family: sans-serif;
  text-align: center;
}
.monospace {
  font-family: monospace;
  text-align: justify;
}
.cursive {
  font-family: cursive;
  text-align: left;
}
.fantasy {
  font-family: fantasy;
}
</style>
</head>
<body>
<h1>Font Sampler</h2>
<h2>Serif</h2>
<div class="serif">Serif<br />
Serif</div>
<h2>Sans Serif</h2>
<div class="sans-serif">Sans Serif<br />
Sans Serif</div>
<h2>Monospace</h2>
<div class="monospace">Monospace<br />
Monospace</div>
<h2>Cursive</h2>
<div class="cursive">Cursive<br />
Cursive</div>
<h2>Fantasy</h2>
<div class="fantasy">Fantasy<br />
Fantasy</div>
</body>
</html>



font-family: "Times New Roman"

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#times-new-roman {
          font-family: "Times New Roman";
      }
        </style>
    </head>
    <body>
    <p id="times-new-roman">
        This font is Times New Roman.
    </p>
    </body>
</html>



font family with generic fonts

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
          body {
            font-size: 40px;
          }
          p {
            margin: 0;
          }
          p#serif {
            font-family: serif;  
          }
          p#sans-serif {
            font-family: sans-serif;
          }
          p#cursive {
            font-family: cursive;
          }
          p#fantasy {
            font-family: fantasy;
          }
          p#monospace {
            font-family: monospace;
          }
        </style>
    </head>
    <body>
    <p id="serif">
      This is serif.
    </p>
    <p id="sans-serif">
      This is sans-serif.
    </p>
    <p id="cursive">
      This is cursive.
    </p>
    <p id="fantasy">
      This is fantasy.
    </p>
    <p id="monospace">
      This is monospace.
    </p>
    </body>
</html>



font: menu

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#menu {
          font: menu;
      }
        </style>
    </head>
  <body>
    <p id="menu">
        This is the menu font.
    </p>
  </body>
</html>



font: message-box

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#message-box {
          font: message-box;
      }
        </style>
    </head>
  <body>
    <p id="message-box">
        This is the message-box font.
    </p>
  </body>
</html>



font-size:20px; assigns a length of 20 pixels to font-size.

 
<!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" xml:lang="en" lang="en"> 
<head><title>CSS Syntax</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style><!-
body { 
   font-size:20px;
} 
</style>
</head> 
<body> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



font size and relative keyword: larger and large

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      body {
          font-size: 17px;
      }
      p {
          font-size: larger;
      }
        </style>
    </head>
  <body>
      This font is 14 pixels in size.
      <p>
          This is a test. <span style="font-size: large;"> 
          This is a test. </span>
      </p>
  </body>
</html>



Font size by Absolute Sizes

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Font size by Ems

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Font size by Ex

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Font size by percentage

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Font size by Pixels

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Font size by Points

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



font size percentage larger

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      body {
          font-size: 150%;
      }
        </style>
    </head>
  <body>
      This font is 150% of the size of the user"s font size preferences.
      <p>
         This font is 100% of the size of the font used for the &lt;body&gt; element.
      </p>
  </body>
</html>



font size percentage smaller

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      body {
          font-size: 18px;
      }
      p {
          font-size: 90%;
      }
        </style>
    </head>
  <body>
    This font is 18 pixels in size.
    <p>
        This font is 90% of the 18 pixel size 
    </p>
  </body>
</html>



font size relative larger

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body style="background: rgb(240, 240, 240);">
    font-size: 16px;
      <div style="font-size: larger; background: rgb(220, 220, 220);">
        font-size: larger; <span style="font-size: 18px;">font-size: 18px;</span>
        <div style="font-size: larger; background: rgb(200, 200, 200);">
          font-size: larger; <span style="font-size: 24px;">font-size: 24px;</span>
          <div style="font-size: larger; background: rgb(180, 180, 180);">
            font-size: larger; <span style="font-size: 32px;">font-size: 32px;</span>
            <div style="font-size: larger; background: rgb(160, 160, 160);">
              font-size: larger; <span style="font-size: 48px;">font-size: 48px;</span>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>



font size relative smaller

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body style="background: rgb(160, 160, 160);">
    font-size: 48px;
      <div style="font-size: smaller; background: rgb(180, 180, 180);">
        font-size: smaller; <span style="font-size: 32px;">font-size: 32px;</span>
        <div style="font-size: smaller; background: rgb(200, 200, 200);">
          font-size: smaller; <span style="font-size: 24px;">font-size: 24px;</span>
          <div style="font-size: smaller; background: rgb(220, 220, 220);">
            font-size: smaller; <span style="font-size: 18px;">font-size: 18px;</span>
            <div style="font-size: smaller; background: rgb(240, 240, 240);">
              font-size: smaller; <span style="font-size: 16px;">font-size: 16px;</span>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>



Font size with calculation

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
 font: 1em/1.5em sans-serif;
}
</style>
</head>
<body>
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. </p>
  
</body>
</html>



font size with minimal values

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p {
          font: 1em sans-serif;
      }
        </style>
    </head>
  <body>
    <p>
        This font is 1 em in size and sans-serif.
    </p>
  </body>
</html>



font size with relative keyword

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      body {
          font-size: medium;
      }
      p {
          font-size: larger;
      }
        </style>
    </head>
  <body>
      This font is medium in size.
      <p>
          font-size: large; 
          <span style="font-size: large;">
          font-size: large; </span>
      </p>
  </body>
</html>



font-size: xx-small

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
label {
 font-size: xx-small;
}

</style>
</head>
<body>
    <form method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



font-stretch all values

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
body {
  font-family: arial;
  font-size: 12pt;
}
p.normal {
  font-stretch: normal;
}
p.wider {
  font-stretch: wider;
}
p.narrower {
  font-stretch: narrower;
}
p.ultra-condensed {
  font-stretch: ultra-condensed;
}
p.extra-condensed {
  font-stretch: extra-condensed;
}
p.condensed {
  font-stretch: condensed;
}
p.semi-condensed {
  font-stretch: semi-condensed;
}
p.semi-expanded {
  font-stretch: semi-expanded;
}
p.expanded {
  font-stretch: expanded;
}
p.extra-expanded {
  font-stretch: extra-expanded;
}
p.ultra-expanded {
  font-stretch: ultra-expanded;
}
</style>
</head>
<body>
<p class="normal">normal.</p>
<p class="wider">wider.</p>
<p class="narrower">narrower.</p>
<p class="ultra-condensed">ultra-condensed.</p>
<p class="extra-condensed">extra-condensed.</p>
<p class="condensed">condensed.</p>
<p class="semi-condensed">semi-condensed.</p>
<p class="semi-expanded">semi-expanded.</p>
<p class="expanded">expanded.</p>
<p class="extra-expanded">extra-expanded.</p>
<p class="ultra-expanded">ultra-expanded.</p>
</body>
</html>



Font style: italic

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#italic {
        font-style: italic;  
      }
        </style>
    </head>
    <body>
    <p id="italic">
      This font is italic.
    </p>
    </body>
</html>



font-style:italic; assigns the constant value of italic to font-style. The font-style property also allows two other constant values: normal and oblique.

 
<!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" xml:lang="en" lang="en"> 
<head><title>CSS Syntax</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style><!-
body { 
   color:black; 
   font-style:italic;
} 
</style>
</head> 
<body> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



font-style: normal

 

<?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>
  <style rel="stylesheet" type="text/css">
p.one {
  font-style: normal;
}
</style>
</head>
<body>
<h1>font-style</h1>
<p class="one">This is a normal font</p>
</body>
</html>



font-style: oblique

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#oblique {
        font-style: oblique;
      }
        </style>
    </head>
    <body>
    <p id="oblique">
      This font is oblique.
    </p>
    </body>
</html>



Font style shortcut

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
}
</style>
</head>
<body>
  <h2>This is the title</h2>
  <p>This is a text.</p>
</body>
</html>



font-variant: normal

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

p.normal {
  font-variant: normal;
}
p.smallcaps {
  font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">normal.</p>
<p class="smallcaps">small caps.</p>
</body>
</html>



font-variant: small-caps

 
<!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">
<html>
<title>css </title>
<style type="text/css">
h1 {
    font-family: Georgia, Times, serif;
    font-size: 24px;
    font-variant: small-caps;
}

</style>
</head>
<body>
<h1>header 1</h1>
<h2>hader 2</h2>
<p>before<strong>strong</strong>after.</p>
</body>
</html>



font-weight:900; assigns the constant 900 to font-weight.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 { 
 font-weight:900;
}
</style>
</head>
<body>
  <h2>This is a header
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  </h2>
  <p>This is a text.</p>
</body>
</html>



font weight bolder

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
                font-family: monospace;
            }
            div {
                font-weight: bolder;
            }
        </style>
    </head>
  <body>
      This font is normal.
      <div>
          font is bolder than the font for the &lt;body&gt; element.
      </div>
  </body>
</html>



Font Weight by number

 
<?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>
  <style rel="stylesheet" type="text/css">
td {
  width: 200px;
}
p.one {
  font-weight: normal;
}
p.two {
  font-weight: bold;
}
p.three {
  font-weight: bolder;
}
p.four {
  font-weight: lighter;
}
p.five {
  font-weight: 100;
}
p.six {
  font-weight: 200;
}
p.seven {
  font-weight: 300;
}
p.eight {
  font-weight: 400;
}
p.nine {
  font-weight: 500;
}
p.ten {
  font-weight: 600;
}
p.eleven {
  font-weight: 700;
}
p.twelve {
  font-weight: 800;
}
p.thirteen {
  font-weight: 900;
}
</style>
</head>
<body>
<h1>Font Weight</h1>
<table><tr><td valign="top">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three">bolder</p>
<p class="four">lighter</p>
</td><td>
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</td></tr></table>
 
</body>
</html>



Font weight by value

 

<?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>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-size: 12px;
}
td {
  width: 200px;
}
p.one {
  font-weight: normal;
}
p.two {
  font-weight: bold;
}
p.three {
  font-weight: bolder;
}
p.four {
  font-weight: lighter;
}
p.five {
  font-weight: 100;
}
p.six {
  font-weight: 200;
}
p.seven {
  font-weight: 300;
}
p.eight {
  font-weight: 400;
}
p.nine {
  font-weight: 500;
}
p.ten {
  font-weight: 600;
}
p.eleven {
  font-weight: 700;
}
p.twelve {
  font-weight: 800;
}
p.thirteen {
  font-weight: 900;
}
</style>
</head>
<body>
<h1>Font Weight</h1>
<table><tr><td valign="top">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three">bolder</p>
<p class="four">lighter</p>
</td><td>
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</td></tr></table>
 
</body>
</html>



font weight lighter

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
                font-weight: bold;
            }
            div {
                font-weight: lighter;
            }
        </style>
    </head>
  <body>
      This font is bold.
      <div>
          This font is lighter than the font for the &lt;body&gt; element.
      </div>
  </body>
</html>



font weight normal

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 span {
 font-size: 1.1em;
 font-weight: normal;
}
</style>
</head>
<h2>Cross<span>i</span>ng <span>Over</span></h2>
<h4>Gordon (<span>I</span>-Utah) GOP; <br />changes part<span>i</span>es to be <span>I</span>ndependent</h4>
  
</body>
</html>



h1, h2 and p are in Times New Roman font

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css" media="all">
            
            h1, h2, p {
                font-family: "Times New Roman";
            }
        </style>
     </head>
     <body>
        <h1>
            Heading 1
        </h1>
        <h2>
            Heading 2
        </h2>
        <p>
            Some paragraph text.
        </p>
    </body>
</html>



Header text-transform: uppercase;

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

h4 {
 margin: 0;
 padding: 0;
 font-size: 1.25em;
 font-weight: bold;
 text-align: center;
}
</style>
</head>
<h2>Cross<span>i</span>ng <span>Over</span></h2>
<h4>Gordon (<span>I</span>-Utah) GOP; <br />changes part<span>i</span>es to be <span>I</span>ndependent</h4>
  
</body>
</html>



Inline Example of font-family Order

 
<!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">
<head>
<title>Inline Example of font-family Order</title>
</head>
<body>
<p>without style</p>
<p style="font-family: Arial, Helvetica, sans-serif">with style.</p>
</body>
</html>



make text that"s italic, bold, small-caps,24 pixel sans-serif, which looks like a comic book font

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>font</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 16px sans-serif;
}
p.font2 {
    font: italic bold small-caps 24px sans-serif;
}
        </style>
    </head>
    <body>
        <p class="font2">
            make text that"s italic, bold, small-caps,
            24 pixel sans-serif, which looks like a comic
            book font.
        </p>
    </body>
</html>



Nested font size

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
                font-family: sans-serif;
                font-size: 16px;
            }
            div {
             padding-left: 5px;
             margin-left: 5px;
             font-size: larger;
             border: 1px solid gray;
            }
        </style>
    </head>
    <body style="font-size: xx-small; background: rgb(240, 240, 240);">
    font-size: xx-small;
    <span style="font-size: 7pt;">
      font-size: 7pt;
    </span>      
    <span style="font-size: 9px;">
      font-size: 9px;
    </span>
    <div style="background: rgb(230, 230, 230);">
      font-size: larger;
      <span style="font-size: x-small;">
        font-size: x-small;
      </span>
      <span style="font-size: 7.5pt;">
        font-size: 7.5pt;
      </span>
      <span style="font-size: 10px;">
        font-size: 10px;
      </span>
      <div style="background: rgb(220, 220, 220);">
        font-size: larger;
        <span style="font-size: small;">
          font-size: small;
        </span>
        <span style="font-size: 10pt;">
          font-size: 10pt;
        </span>
        <span style="font-size: 13px;">
          font-size: 13px;
        </span>
        <div style="background: rgb(210, 210, 210);">
          font-size: larger;
          <span style="font-size: medium;">
            font-size: medium;
          </span>
          <span style="font-size: 12pt;">
            font-size: 12pt;
          </span>
          <span style="font-size: 16px;">
            font-size: 16px;
          </span>
          <div style="background: rgb(200, 200, 200);">
            font-size: larger;
            <span style="font-size: large;">
              font-size: large;
            </span>
            <span style="font-size: 13.8pt;">
              font-size: 13.8pt;
            </span>
            <span style="font-size: 18px;">
              font-size: 18px;
            </span>
            <div style="background: rgb(190, 190, 190);">
              font-size: larger; 
              <span style="font-size: x-large;">
                font-size: x-large;
              </span>
              <span style="font-size: 18pt">
                font-size: 18pt;
              </span>
              <span style="font-size: 24px;">
                font-size: 24px;
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    </body>
</html>



Overlay font

 

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header h1 {
  color:#aaa;
  background:transparent;
  left:0;right:0;
  font-size:200%;
  font-weight:bold;
}
#header h1.overlay{
  color:red;
  background:transparent;
  position:absolute;
  left:1px;
  top:1px;
}
</style>
</head>
<body>
<div id="header">
    <h1 class="overlay">This is the heading</h1>
    <h1>This is the heading</h1>
</div>
</body>
</html>



Paragraph text is black and in 12pt font

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css" media="all">
            p {
                font-size: 12pt;
            }
        </style>
     </head>
     <body>
        <h1>
            Heading 1
        </h1>
        <h2>
            Heading 2
        </h2>
        <p>
            Some paragraph text.
        </p>
    </body>
</html>



Relative font size

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>An example with sans-serif fonts</title>
<style type="text/css" media="screen">
* {
    margin: 0;
    padding: 0;
    }
html {
    font-size: 100%;
    }
body {
    padding: 20px;
    font-size: 62.5%;
    }
#wrapper {
    margin: 0 auto;
    width: 400px;
    }

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif;
    line-height: 1.5;
    }
    
h1 {
    font-size: 1.8em;
    line-height: 1em;
    padding-bottom: 7px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 7px;
    color: #666666;
    font-weight: normal;
    }    
    
h2, h3 {
    color: #333333;
    }
h2 {
    font-size: 1.3em;
    }
    
h3 {    
    font-size: 1.2em;
    margin-top: 1.65em;
    }
    
p {
    font-size: 1.2em;
    margin-bottom: 1.2em;
    }
    
h1+p {
    font-weight: bold;
    color: #222222;
    }
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <h2>Curabitur sit amet risus</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <h3>Praesent rutrum</h3>
    <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
    <h3>Habitant morbid</h3>
    <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
  </div>
</body>
</html>



Relative Font Sizes

 


<?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>
  <style rel="stylesheet" type="text/css">
body {
  font-size: 18px;
}

td {
  padding: 10px;
  width: 210px;
}
p.absoluteone {
  font-size: xx-small;
}
p.absolutetwo {
  font-size: x-small;
}
p.absolutethree {
  font-size: small;
}
p.absolutefour {
  font-size: medium;
}
p.absolutefive {
  font-size: large;
}
p.absolutesix {
  font-size: x-large;
}
p.absoluteseven {
  font-size: xx-large;
}
p.pixelsone {
  font-size: 9px;
}
p.pixelstwo {
  font-size: 12px;
}
p.pixelsthree {
  font-size: 14px;
}
p.pixelsfour {
  font-size: 18px;
}
p.pixelsfive {
  font-size: 24px;
}
p.pixelssix {
  font-size: 36px;
}
p.pixelsseven {
  font-size: 48px;
}
p.picaone {
  font-size: 1pc;
}
p.picatwo {
  font-size: 2pc;
}
p.picathree {
  font-size: 3pc;
}
p.picafour {
  font-size: 4pc;
}
p.pointone {
  font-size: 9pt;
}
p.pointtwo {
  font-size: 12pt;
}
p.pointthree {
  font-size: 14pt;
}
p.pointfour {
  font-size: 18pt;
}
p.pointfive {
  font-size: 24pt;
}
p.pointsix {
  font-size: 36pt;
}
p.pointseven {
  font-size: 48pt;
}
p.relativeone {
  font-size: smaller;
}
p.relativetwo {
  
}
p.relative {
  font-size: larger;
}
p.emone {
  font-size: 1em;
}
p.emtwo {
  font-size: 2em;
}
p.emthree {
  font-size: 3em;
}
p.emfour {
  font-size: 4em;
}
p.exone {
  font-size: 1ex;
}
p.extwo {
  font-size: 2ex;
}
p.exthree {
  font-size: 3ex;
}
p.exfour {
  font-size: 4ex;
}
p.exfive {
  font-size: 5ex;
}
p.exsix {
  font-size: 6ex;
}
p.exseven {
  font-size: 7ex;
}
p.percentone {
  font-size: 50%;
}
p.percenttwo {
  font-size: 75%;
}
p.percentthree {
  font-size: 100%;
}
p.percentfour {
  font-size: 150%;
}
p.percentfive {
  font-size: 200%;
}
p.percentsix {
  font-size: 400%;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<table><tr><td valign="top">
<h2>Absolute Sizes</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>



Set body font size

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Relative sizing of superior and inferior text</title>
  <style type="text/css">
    body {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div>
    <p>before .</p>
  </div>
</body>
</html>



Set font family for paragraph

 
<html>
 <head>
  <title>Set font family for <P></title>
 <head>
 <body>
  <p style="font-family: sans-serif;">Hello, world!</p>
 </body>
</html>



Set font size to 120% for H1

 
<html>
<head>
<title>Set font size to 120% for <H1></title>
<style type="text/css">
  h1 {
   font-size: 120%;
  }
</style>
</head>
<body>
  <h1>Title of Page</h1>
  <p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After link. <em class="warning"> in em warning</em>. After em.</p>
</body>
</html>



Set font size to 1.2em

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p .initcap {
 font-size: 1.2em;
 background-color: black;
 color: white; 
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. This is a test. </p>
</body>
</html>



Set font size to 90% for paragraph

 
<html>
 <head>
  <title>Set font size to 90% for <P></title>
  <style type="text/css">
  p {
   font-size: 90%;
  }
  </style>  
 </head>
 <body>
  <h1>Title of Page</h1>
  <p>This is a sample paragraph with a 
  <a href="http://www.wbex.ru">link</a>.</p>
 </body>
</html>



Set font size to small

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Set font size to small</title>
<style type="text/css">
p {
  font-size: small;
}
</style>
</head>
<body>
  <p>Hello world!</p>
</body>
</html>



Set font weight to bold for the first text in paragraph

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p:first-line {
 font-weight: bold;
}
</style>
</head>
<body>
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. </p>
  
</body>
</html>



System font: caption

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#caption {
          font: caption;
      }
        </style>
    </head>
  <body>
    <p id="caption">
        This is the caption font.
    </p>
  </body>
</html>



System font: icon

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#icon {
          font: icon;
      }
        </style>
    </head>
  <body>
    <p id="icon">
        This is the icon font.
    </p>
  </body>
</html>



System font: menu

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#menu {
          font: menu;
      }
        </style>
    </head>
  <body>
    <p id="menu">
        This is the menu font.
    </p>
  </body>
</html>



System font: message-box

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#message-box {
          font: message-box;
      }
        </style>
    </head>
  <body>
    <p id="message-box">
        This is the message-box font.
    </p>
  </body>
</html>



system fonts

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#caption {
          font: caption;
      }
        </style>
    </head>
  <body>
    <p id="caption">
        This is the caption font.
    </p>
  </body>
</html>



System font: small-caption

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#small-caption {
          font: small-caption;
      }
        </style>
    </head>
  <body>
    <p id="small-caption">
        This is the small-caption font.
    </p>
  </body>
</html>



System font: status-bar

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#status-bar {
          font: status-bar;
      }
        </style>
    </head>
  <body>
    <p id="status-bar">
        This is the status-bar font.
    </p>
  </body>
</html>



This font is 1 em in size and sans-serif.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p {
          font: 1em sans-serif;
      }
        </style>
    </head>
  <body>
    <p>
        This font is 1 em in size and sans-serif.
    </p>
  </body>
</html>



This font is 24 pixels tall and this div is 3 ems tall

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> em measurement </title>
        <style type="text/css" media="all">
          body {
            border: 1em solid black;
            margin: 0;
            padding: 10px;  
          }       
            div {
                font-size: 24px;
                height: 3em;
                border: 1em solid black;
            }
        </style>
    </head>
    <body>
The body"s border is 1em thick. 
        <div>
            This font is 24 pixels tall and this div is 3 ems tall, 
            which results in a div 72 pixels tall (3 * 24 = 72).
        </div>
    </body>
</html>



This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p {
          font: italic small-caps bold 1em/1.5em sans-serif;
      }
        </style>
    </head>
  <body>
    <p>
This is a test. 
    </p>
  </body>
</html>



This is the caption font

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p#caption {
          font: caption;
      }
        </style>
    </head>
  <body>
    <p id="caption">
        This is the caption font.
    </p>
  </body>
</html>



Two font families, just in case

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
      p {
          font-family: "Times New Roman", Times;
      }
        </style>
    </head>
    <body>
    <p>
        This text appears in Times New Roman font, if Times New Roman is installed, it
        appears in Times if Times New Roman is not installed, but Times is, if neither
        are installed, the default font for the browser is used.
    </p>
    </body>
</html>



Two typefaces with different x-heights shown at the same font-size

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Two typefaces with different x-heights shown at the same font-size</title>
  <style type="text/css">
    body { 
      font-size: 12px;
      }
    p { 
      margin: 0;
      width: 35em;
      font: 1em/1.5 serif;
      }
    .two {
      font-family: Georgia, serif;
      }
    .one {
      font-family: Times, serif;
      }
  </style>
</head>
<body>
  <p><span class="one">Times</span> <span class="two">Georgia</span></p>
  <p class="one"><strong>Times:</strong> after</p>
  <p class="two"><strong>Georgia:</strong> after</p>
</body>
</html>



Use font

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 { 
 font: bold italic 2em  Georgia, Times, "Times New Roman", serif;
} 
</style>
</head>
<body>
  <h2>Designing Instant Gratification</h2>
  <p>This is a test.</p>
</body>
</html>



use the following constants for font-weight: normal, bold, bolder, lighter.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 { 
  font-weight:lighter;
}
</style>
</head>
<body>
  <h2>This is a header
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  </h2>
  <p>This is a text.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text&oldid=5909»