6. Style Sheets

Style sheets are a language, separate from HTML, for specifying formating and layout properties for a document, such as one marked up in HTML.

Indeed, style sheets are not formally part of HTML 3.2, but as they were/are being developed at the same time, this seemed a good place to mention them.

HTML does not contain much formatting information. At the same time, authors want the ability to specify how they want their data displayed. The idea behind style sheets is that this display formatting information can be stored as a separate piece of information, called a style sheet, and that the style sheet can then be applied to a document while it is being formatted for display.

For example, a style sheet could contain commands such as:

Format H3 headings in red 18pt Times-Roman.
Format Paragraphs in 12pt times roman, with a left and right margin of 0.5".

and so on. The CLASS attribute could be further used to subdivide formatting instructions. Thus <P CLASS="abstract"> could be given characteristics different from <P CLASS="body">.

6.1 Specifying Stylesheets

A Style sheet is specified in a document using a STYLE element in the HEAD. For example,

  <HEAD>
  <STYLE HREF="../styles/style_form.css">
  ...
  </HEAD>

would give the URL of the style sheet to be loaded and used. Here the extension CSS refers to Cascading Stylesheets, one of the methods currently in use. This is discussed in more detail in the STYLE element section.

6.2 Example Style Sheets

As an example, the following is the style sheet used to format the different pages in this HTML documentation collection:



BODY {
       font-family:      Arial,helvetica,sans-serif;
       color:            black;
       background-color: white;
     }

DL,UL,OL,DIR,MENU   {
       margin-left: 10%;
       font-family: arial,helvetica,sans-serif
                    }

P    { margin-left: 5%; 
       font-family: arial,helvetica,sans-serif
     }
PRE  { margin-left: 5%; 
       font-family: "courier new", courier, monospace;
     } 

H2,H3,H4  
     { color:  #669999;
       font-family: "arial black", arial, helvetica, sans-serif;
       font-weight: bold; 
       margin-left: 0%;  
     }

H3,H4,H5  {margin-left: 5%}

DIV.leftmarg 
    {  margin-left: 5%;
       font-family: arial,helvetica,sans-serif
    }

A         {text-decoration: none; }
A:active  {color: #ff0000; text-decoration: underline}
A:visited {color: #999999; }

.note    {color: orange;}
.warning {color: red; font-weight: bold}

For additional information about style sheets, please see the references in the bibliography section.