What Font is Best?

The Web's default font is Times New Roman. It is a serif font (a font where the characters have little hooky tails).

Serif fonts are chosen because they have greater legibility and readability in large pieces of text. For this reason they are always used in paperbacks.

Times New Roman is serviceable serif font but Georgia is a better choice as it was designed for improved readability on monitors.

When selecting a sans-serif font the default is Arial/Helvetica but there is also a sans-serif font specifically designed for use on computer displays. This font is called Verdana.

Esperfonto is an excellent site for more typographical information.

Valid XHTML 1.0 Transitional

In-line Level Elements

In-line level elements are small pieces of code that occur between block level tags. They usually only apply to small amounts of text, hyperlinks or images.

In this section you will learn how to use the <span> tag to style small portions of text. Styling of <a> tags (links) and <img> tags (images) will be dealt with separately in the next two sections.

  1. Open your .html file and select a word or phrase you'd like to make bold.

    On one side of the word or phrase you selected enter:

    <p class="red">Trees are <span class="bold">awesome...</span>

    Close this tag on the other side of the word or phrase.

  2. Open your .css file and add the command:

    body { background-color: #000;
    color: #fff; }
    p.red { color: #f00; }
    span.bold { font-weight: bold }

  3. Go to your browser and open your html document. If your html file is already open click "refresh" or press F5. All of the content between the <span> tags should be bold.

    Using the span tag you can create other formatting classes such as span.italic, span.oblique, span.red etc. giving you the opportunity to style small pieces of your text.

    In fact you can apply multiple styles at a time with a single span command so you can change the style, size, color and font of even a single letter.


    span.bigbluescript {font-family: cursive;
    color: #00f; font-size: 32pt; }

Next section: Styling Links →