HTML/CSS/CSS Attributes and Javascript Style Properties

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

Содержание

font: 1em/1.5 Georgia, serif

   <source lang="html4strict">

<?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>Using the font shorthand property</title>
 <style type="text/css">
   body { 
     font-size: 12px;
   }
   h1 {
     font: bold 1.2em/1.25em Georgia, serif;
     margin: 1.5em 0 0.25em 0;
   }
   p { 
       margin: 0; 
       width: 35em; 
     }
   p.one { 
       font: 1em/1.5 Georgia, serif; 
   }
 </style>

</head> <body>

font: 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

font: bold 1em/1.5 Verdana, sans-serif

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. this is a test. this is a test. this is a test. this is a test.

font: italic 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>
   
  


font: bold 1em/1.5 Verdana, sans-serif

   <source lang="html4strict">

<?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>Using the font shorthand property</title>
 <style type="text/css">
   body { 
     font-size: 12px;
   }
   h1 {
     font: bold 1.2em/1.25em Georgia, serif;
     margin: 1.5em 0 0.25em 0;
   }
   p { 
       margin: 0; 
       width: 35em; 
   }
   p.one {  
       font: bold 1em/1.5 Verdana, sans-serif; 
   }
 </style>

</head> <body>

font: 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

font: bold 1em/1.5 Verdana, sans-serif

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. this is a test. this is a test. this is a test. this is a test.

font: italic 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>
   
  


Font color

   <source lang="html4strict">

<?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-family: arial, verdana, sans-serif;
 font-size: 12px;

} span.color {

 color: #FF0000;

} </style> </head> <body>

color

fontthere is some writing in red here in the middle.

</body> </html>

</source>
   
  


"font" Example

   <source lang="html4strict">
   

<html> <body>

font font

Move the mouse to change the font style.

</body> </html>


     </source>
   
  


"font-face" Example

   <source lang="html4strict">
   

<head> <style type="text/css"> @font-face { font-family: Lucida;

            font-style: normal; 
            font-weight: normal; 
            src: url("fontFile.eot")
          }

</style> </head> <body>

Paragraph text

</body> </html>


     </source>
   
  


font-family: cursive;

   <source lang="html4strict">

<!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#cursive {
           font-family: cursive;
         }
       </style>
   </head>
   <body>

This is cursive.

   </body>

</html>

</source>
   
  


"font-family" Example

   <source lang="html4strict">
   

<html> <body>

    Move the mouse pointer to change the font-family value.

</body> </html>


     </source>
   
  


font-family: fantasy;

   <source lang="html4strict">

<!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#fantasy {
           font-family: fantasy;
         }
       </style>
   </head>
   <body>

This is fantasy.

   </body>

</html>

</source>
   
  


font-family: monospace;

   <source lang="html4strict">

<!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#monospace {
           font-family: monospace;
         }
       </style>
   </head>
   <body>

This is serif.

This is monospace.

   </body>

</html>

</source>
   
  


font-family: "Rockwell"

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>font-size</title>
       <style type="text/css">
           
           body {
               font-family: "Rockwell";
               font-size: 34px;
           }
       </style>
   </head>
   <body style="background: rgb(160, 160, 160);">
    font-size: 34px;
   </body>

</html>

</source>
   
  


font-family: sans-serif;

   <source lang="html4strict">

<!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#sans-serif {
           font-family: sans-serif;
         }
       </style>
   </head>
   <body>

This is sans-serif.

   </body>

</html>

</source>
   
  


font-family: serif;

   <source lang="html4strict">

<!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;  
         }
       </style>
   </head>
   <body>

This is serif.

   </body>

</html>

</source>
   
  


font: icon

   <source lang="html4strict">

<!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>

This is the icon font.

 </body>

</html>

</source>
   
  


font: italic 1em/1.5 Georgia, serif;

   <source lang="html4strict">

<?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>Using the font shorthand property</title>
 <style type="text/css">
   body { 
     font-size: 12px;
   }
   h1 {
     font: bold 1.2em/1.25em Georgia, serif;
     margin: 1.5em 0 0.25em 0;
   }
   p { 
       margin: 0; 
       width: 35em; 
   }
   p.one { 
       font: italic 1em/1.5 Georgia, serif;
   }
 </style>

</head> <body>

font: 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

font: bold 1em/1.5 Verdana, sans-serif

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. this is a test. this is a test. this is a test. this is a test.

font: italic 1em/1.5 Georgia, serif

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. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>
   
  


font: menu

   <source lang="html4strict">

<!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>system fonts</title>
       <style rel="stylesheet" type="text/css">

p#menu {

   font: menu;

}

       </style>
   </head>
   <body>
   </body>

</html>

</source>
   
  


font: message-box

   <source lang="html4strict">

<!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>system fonts</title>
       <style rel="stylesheet" type="text/css">

p#message-box {

   font: message-box;

}

       </style>
   </head>
   <body>

This is the message-box font.

   </body>

</html>

</source>
   
  


Font Property and Purpose

   <source lang="html4strict">

font Allows you to combine several properties into one font-family family of font (the user must have this installed on his or her computer) font-size size of a font font-weight normal, bold, or bolder than the containing element font-style normal, italic, or oblique font-stretch width of the actual letters in a font (not spaces between them) font-variant normal or smallcaps font-size-adjust aspect ratio of the size of characters of the font

</source>
   
  


font shortcut

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Chapter Five</title> <style type="text/css"> body {

   font: 16px Verdana, Arial, Helvetica, sans-serif;
   margin: 20px;

} h1 {

   font: bold 28px Verdana, Arial, Helvetica, sans-serif;

} h2 {

   font: bold 24px Verdana, Arial, Helvetica, sans-serif;

} </style> </head> <body>

color my world

gender and color

following:

  • B
  • M
  • M
  • W

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. this is a test. this is a test. this is a test. this is a test.


</body> </html>

</source>
   
  


Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", serif;

   <source lang="html4strict">

<!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>font: bold italic 2em Georgia, Times, "Times New Roman", serif;</title> <style type="text/css"> h2 {

  font: bold italic 2em Georgia, Times, "Times New Roman", serif;

} </style> </head> <body>

This is a header

This is a test

</body> </html>

</source>
   
  


font-size: 18px

   <source lang="html4strict">

<!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> <head> <title>css typography</title> <style type="text/css"> h2 {

   font-family: Georgia, Times, serif;
   font-size: 18px;

} </style> </head> <body>

this is a test.

this is a test.

this is a test. this is a test. this is a test.

this is a test.

</body> </html>

</source>
   
  


"font-size" Example

   <source lang="html4strict">
   

<html> <body>

This text will be rendered in 14pt size.


Move the mouse pointer to change the font-size value.

</body> </html>


     </source>
   
  


font-size: from 24pt to 7pt

   <source lang="html4strict">

<!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-family: "Rockwell";
           }
           h1, h2, h3, h4, h5, h6 {
             display: inline;
             margin: 0;
             font-weight: normal;
           }
       </style>
   </head>
   <body>

<h1>

        
            font-size: 24pt;
          
          
            font-size: xx-large;
          

<h2>

         
              font-size: 18pt;
          
          
            font-size: x-large;
                        

<h3>

          
            font-size: 14pt;
          
          
            font-size: large;
          

<h4>

          
            font-size: 12pt;
          
          
            font-size: medium;
          
<h5>
       
         font-size: 10pt;
       
       
         font-size: small;
       
<h6>
       
         font-size: 8pt;
       
       
         font-size: x-small;
       
       
         font-size: 7pt;
       
       
         font-size: xx-small;
       
   </body>

</html>

</source>
   
  


font-size: larger

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>font-size</title>
   </head>
   <body style="background: rgb(240, 240, 240);">
   font-size: 16px;
     font-size: larger; font-size: 20px;
       font-size: larger; font-size: 24px;
         font-size: larger; font-size: 28px;
           font-size: larger; font-size: 34px;
   </body>

</html>

</source>
   
  


font-size larger is incremental

   <source lang="html4strict">

<!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: "Rockwell";
               font-size: 16px;
           }
           div {
            border: 1px solid gray;
            padding: 5px;   
            margin-left: 20px;
           }
       </style>
   </head>
   <body style="background: rgb(240, 240, 240);">
   font-size: 16px;
       font-size: larger; font-size: 18px;
       font-size: larger; font-size: 24px;
       font-size: larger; font-size: 32px;
       font-size: larger; font-size: 48px;
       font-size: larger; font-size: 18px;
         font-size: larger; font-size: 24px;
           font-size: larger; font-size: 32px;
             font-size: larger; font-size: 48px;
   </body>

</html>

</source>
   
  


font-size percent

   <source lang="html4strict">

<!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Leading paragraph</title> <style type="text/css"> h3 {

 font-size: 175%;

} .intro {

 font-size: 150%;
 font-style: italic;

} </style> </head> <body>

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.

</body> </html>

</source>
   
  


Font size relative selector

   <source lang="html4strict">

<!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.

this is a test. this is a test.

 </body>

</html>

</source>
   
  


font size: small

   <source lang="html4strict">

<!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 {

width: 120px;
margin: 260px 100px 0 170px;
font-family: Verdana, sans-serif;
font-size: small;
font-weight: bold;

}

</style> </head>

before <a href="more.html">after</a></p </body> </html> </source>

font-size: smaller

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>font-size</title>
       <style type="text/css">
           
           div {
            border: 1px solid gray;
            padding: 5px;
            margin-left: 20px;
           }
       </style>
   </head>
   <body>
     font-size: smaller; font-size: 28px;
   </body>

</html>

</source>
   
  


font-size smaller is incremental

   <source lang="html4strict">

<!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: "Rockwell";
               font-size: 48px;
           }
           div {
            border: 1px solid gray;
            padding: 5px;   
            margin-left: 20px;
           }
       </style>
   </head>
   <body style="background: rgb(160, 160, 160);">
   font-size: 48px;
       font-size: smaller; font-size: 32px;
       font-size: smaller; font-size: 24px;
       font-size: smaller; font-size: 18px;
       font-size: smaller; font-size: 16px;
       font-size: smaller; font-size: 32px;
         font-size: smaller; font-size: 24px;
           font-size: smaller; font-size: 18px;
             font-size: smaller; font-size: 16px;
   </body>

</html>

</source>
   
  


font: small-caption

   <source lang="html4strict">

<!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>system fonts</title>
       <style rel="stylesheet" type="text/css">

p#small-caption {

   font: small-caption;

}

       </style>
   </head>
   <body>
       <p id="small-caption">
           This is the small-caption font.

   </body>

</html>

</source>
   
  


font: status-bar

   <source lang="html4strict">

<!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>system fonts</title>
       <style rel="stylesheet" type="text/css">

p#status-bar {

   font: status-bar;

}

       </style>
   </head>
   <body>

This is the status-bar font.

   </body>

</html>

</source>
   
  


"font-style" Example

   <source lang="html4strict">
   

<html> <body>

    Move the mouse pointer to change the font style value.

</body> </html>


     </source>
   
  


font-style: italic

   <source lang="html4strict">

<!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> <head> <title>css typography</title> <style type="text/css"> h2 {

   font-family: Georgia, Times, serif;
   font-size: 20px;
   font-style: italic;

} </style> </head> <body>

this is a test.

this is a test.

this is a test. this is a test. this is a test.

this is a test.

</body> </html>

</source>
   
  


Font style: normal

   <source lang="html4strict">

<!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: "Lucida Sans Typewriter";
         font-size: 25px;
     }
     p#normal {
       font-style: normal;
     }
       </style>
   </head>
   <body>

This font is normal.

   </body>

</html>

</source>
   
  


Font style: oblique

   <source lang="html4strict">

<!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-size: 25px;
     }
     p#oblique {
       font-style: oblique;
     }
       </style>
   </head>
   <body>

This font is oblique.

   </body>

</html>

</source>
   
  


"font-variant" Example

   <source lang="html4strict">
   

<html> <body>

   Move the mouse to change the font-variant value.

</body> <html>


     </source>
   
  


font-variant: normal

   <source lang="html4strict">

<?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-family: arial, verdana, sans-serif;
 font-size: 12px;

} p {

 font-variant: normal;

} span.smallcaps {

 font-variant: small-caps;

} </style> </head> <body>

font-variant

a normal font, but then there are some small caps in the middle.

</body> </html>

</source>
   
  


font-variant: small-caps

   <source lang="html4strict">

<!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> <head> <title>css typography</title> <style type="text/css"> h1 {

   font-family: Georgia, Times, serif;
   font-size: 24px;
   font-variant: small-caps;

} </style> </head> <body>

this is a test.

this is a test.

this is a test. this is a test. this is a test.

this is a test.

</body> </html>

</source>
   
  


font-weight: bolder

   <source lang="html4strict">

<!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.
         This font is bolder than the font for the <body> element.
 </body>

</html>

</source>
   
  


font-weight by number from 100 to 900

   <source lang="html4strict">

<!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: "Rockwell";
           }
       </style>
   </head>
   <body>

This font is normal.

This font is bold.

This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

   </body>

</html>

</source>
   
  


"font-weight" Example

   <source lang="html4strict">
   

<html> <body>

Move the mouse to change the font-weight value.

</body> </html>


     </source>
   
  


font-weight: lighter

   <source lang="html4strict">

<!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;
               font-weight: bold;
           }
           div {
               font-weight: lighter;
           }
       </style>
   </head>
 <body>
     This font is bold.
         This font is lighter than the font for the <body> element.
 </body>

</html>

</source>
   
  


font-weight: normal, bold, bolder, lighter

   <source lang="html4strict">

<!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: "Rockwell";
           }
       </style>
   </head>
   <body>

This font is normal.

This font is bold.

This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

   </body>

</html>

</source>
   
  


Make font sizes smaller by percentage.

   <source lang="html4strict">

<!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-size</title>
       <style rel="stylesheet" type="text/css">

span {

   background: pink;
   font-size: 75%;

} span span {

   background: gold;
   font-size: 75%;

}

       </style>
   </head>
   <body>

This font size is 25% smaller than that of the <p> element.
This font is 25% smaller than the font used for the parent <span> element.

   </body>

</html>

</source>
   
  


Percentage font sizes apply a font size relative to the parent element"s font size.

   <source lang="html4strict">

<!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-size</title>
       <style rel="stylesheet" type="text/css">

span {

   background: mistyrose;
   font-size: 150%;

} span span {

   background: pink;
   font-size: 125%;

}

       </style>
   </head>
   <body>

This font size is 50% bigger than that of the <p> element.
This font is 25% bigger than the font used for the parent <span> element.

   </body>

</html>

</source>
   
  


Percentange larger

   <source lang="html4strict">

<!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.

This font is 100% of the size of the font used for the <body> element.

 </body>

</html>

</source>
   
  


Percentange smaller

   <source lang="html4strict">

<!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.

This font is 90% of the 18 pixel size specified for the <body> element.

 </body>

</html>

</source>
   
  


Set font size to 6em

   <source lang="html4strict">

<!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 text indent to 37%</title> <style type="text/css"> p {

text-indent: 37%;
line-height: 1em;

} p span.initcap {

font-size: 6em;
line-height: 0.6em;
font-weight: bold;

} </style> </head> <body>

Online. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test.

</body> </html>

</source>
   
  


The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.

   <source lang="html4strict">

<!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-size</title>
       <style rel="stylesheet" type="text/css">

body {

   font-size: medium;

} p#larger {

   font-size: larger;

} p#larger span {

   font-size: 20px;

} p#smaller {

   font-size: smaller;

} p#smaller span {

   font-size: 12px;

} span {

   background: mistyrose;

}

       </style>
   </head>
   <body>

This font is 1.2 times the default font, or 20 pixels.
this is a test.

This font is 1.2 smaller than the default size, or pixels.
this is a test.

   </body>

</html>

</source>
   
  


This font is 1.2 times the default font, or 20 pixels

   <source lang="html4strict">

<!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-size</title>
       <style rel="stylesheet" type="text/css">

body {

   font-size: medium;

} p#larger {

   font-size: larger;

} p#larger span {

   font-size: 20px;

} span {

   background: mistyrose;

}

       </style>
   </head>
   <body>

This font is 1.2 times the default font, or 20 pixels.
this is a test.

   </body>

</html>

</source>