[Next] [Up] [Previous]

Formatting with CSS

Cascading Style Sheets (CSS) make it possible to customize the appearance of your web page, by specifying such things as the size and style of type used for different elements of the page.

A web page is a file with the extension .htm or .html and a Cascading Style Sheet is a file with .css as its extension.

In the head section of your web page, you can specify the style sheet to be used with a web page with a command of this form:

<link rel="stylesheet" type="text/css" href="mystyle.css">

This would cause a file with the name mystyle.css in the same directory as the web page to be read to supply the styles for the page.

The content of that file might look like this:

 p + p { text-indent: 3em ;
         margin-top: 0 }
 p { margin-bottom: 0 ;
     font-family: Times, serif ;
     font-size: 14pt ;
     line-height: 16pt ;
     text-align: justify }
 ul { font-family: Verdana, sans-serif ;
      font-size: 14pt ;
      line-height: 16pt }
 ol { font-family: Verdana, sans-serif ;
      font-size: 14pt ;
      line-height: 16pt }     
 pre { font-family: Courier, monospace ;
       font-size: 12pt ;
       line-height: 12pt }
 h1 { font-family: Times, serif ;
      font-size: 36pt ;
      font-weight: bold }

specifying fonts for the various types of elements - here, a paragraph, an unordered list, an ordered list, preformatted text, and header 1.

Note that font size and line height can be specified separately, so one has control over what printers call leading. The font family tag allows one to have multiple fallback choices, so as to achieve the closest result to what you are seeking, even if the person viewing your page only has a limited selection of fonts.

Note that "p + p" was used before one group of formatting instructions. This causes only those paragraphs which are immediately preceded by another paragraph to be indented; the commands reducing the top and bottom margins of a paragraph to zero remove the space between paragraphs, which is no longer required.

And note that one can have justified text on one's web pages, instead of having it set ragged right!

Instead of the name of a standard HTML element, one can also have a name of one's own with a dot in front of it; that will then be followed, within braces, by a style for whatever is enclosed within a span element, with class=name, where name is the name that came after the dot in the stylesheet.

For example,

 .navbar { font-family: Verdana, sans-serif ;
           font-weight: bold ;
           font-size: 11pt ;
           line-height: 18pt }

might be used to specify a style for a navigation bar in your page, and then the text intended to serve as a navigation bar would be enclosed in the tags <span class="navbar"> and </span>.


[Next] [Up] [Previous]