Style Sheets

Part 2 - Font Properties

There are 4 main Font Properties: font-family, font-style, font-weight and font-size. These properties apply to all elements of html files. In this section we will discuss each in turn.

  • font-family

    This determines which font a piece of text is displyed in e.g. Helvetica, Arial, Comic Sans MS, Times New Roman, etc. The following shows how this attribute can be used to effect several different html tags.

    test2.css

    h2 { font-family: times new roman }
    p { font-family: arial }
    strong { font-family: comic sans ms }

    test2.html

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test2.css" title="test2">
    </head>
    <body bgcolor=black text=white>
    <h2>This is an h2 heading using the style sheet.</h2>
    <p>This is a paragraph containing some <strong>bold text</strong>.
    </body>
    </html>

    Even though the <strong></strong> text is part of the paragraph its own font-family overrides that of the paragraph. Any font can be used but because the font has to be installed on the viewers pc it is best to stick to the common ones that most people have.

    More than one font can be specified for each tag e.g. p { font-family: symbol, comic sans ms, arial }. This means that if the browser cannot use the first font it tries the second etc. until it finds one that works or runs out of fonts and uses the browsers default.

  • font-style

    The default value for font-style is normal (except in <em> tags where the font-style is italic, but can be overriden) and the other possible values are italic and oblique. Here is an example of font-style in action:

    test3.css

    h2 { font-style: italic }
    p { font-style: italic }
    em { font-style: normal }

    test2.html

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test3.css" title="test3">
    </head>
    <body bgcolor=black text=white>
    <h2>This is an h2 heading using the style sheet.</h2>
    <p>This is a paragraph containing some <em>overridden italic text</em>.
    </body>
    </html>

  • font-weight

    The default value for font-weight is normal and there are several other possible values: bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900.

    <html>
    <body bgcolor=black text=white>
    <p style="font-weight: bold">This is a paragraph using bold.
    <p>This is a plain paragraph.
    </body>
    </html>

  • font-size

    The default font-size is medium, relative to the browsers current font size. To change the font-size use a value in point size e.g. { font-size: 14pt }.

    <html>
    <body bgcolor=black text=white>
    <p style="font-size: 14pt">This is a paragraph using 14pt.
    <p style="font-size: 16pt">This is a paragraph using 16pt.
    <p>This is a plain paragraph.
    </body>
    </html>

In the next section we will see what other ways you can effect the appearance of the text in your document.

Back Next