Part 2: Font Properties

There are many CSS properties to use in your style sheets. Here are some of the more popular properties and how to use them.

Font Properties
font-family - defines the font family that the text should be displayed in. (Note: if the computer viewing your page doesn't have the font specified, the browser will guess. This can cause strange effects. It is best to use standard fonts, or the generic font names.)

To define specific font families, write the family names in the order you would like them displayed (most accurate to your design first). Separate each family with a comma:

font-family : arial,geneva,helvetica ;

To define a generic font family:

font-family : serif;

• serif
• sans-serif
• monospace
• cursive
• fantasy

font-size - defines the size of the font. The font size can be specified as an exact size, a relative size, a length, or a percentage (of the existing space).

To define the exact size, simply specify the size in one of the following measurements:

• ems (font-size : 13em;)
• pixels (font-size : 13px;)
• picas (font-size : 13pc;)
• points (font-size : 13pt;)
• inches (font-size : 13in;)
• centimeters (font-size : 13cm)
• milimeters (font-size : 13mm)

There are seven standard sizes in HTML and XML documents, you can define your font-size based on those sizes as well (standard text is size medium):

• font-size : xx-small;
• font-size : x-small;
• font-size : small;
• font-size : medium;
• font-size : large;
• font-size : x-large;
• font-size : xx-large;

To define your font-size as relative to the surrounding text, you can simply say:

• font-size : larger;
• font-size : smaller;

font-style - defines whether the font is italic, oblique, or normal.

• font-style : italic;
• font-style : oblique;
• font-style : normal; (the default)

font-variant - defines whether the font is normal or small-caps.

• font-variant : small-caps;
• font-variant : normal; (the default)

font-weight - defines how dark or light the text is.

• font-weight : bold;
• font-weight : bolder;
• font-weight : lighter;
• font-weight : 100;
• font-weight : 200;
• font-weight : 300;
• font-weight : 400;
• font-weight : 500;
• font-weight : 600;
• font-weight : 700;
• font-weight : 800;
• font-weight : 900;
• font-weight : normal; (the default)

Next page > Text Properties > Page 1, 2, 3