Setting font and text attributes

Font properties

Font families

To choose a font family for a Web page element use the style

where font1, font2, . . . are generic or specific values. Generic font names must be serif, sans-serif, monospace, cursive, or fantasy.

Here is how the generic fonts look installed on your computer look:

Specific fonts can be listed being separated by commas. The browser will scan these fonts in order and use whatever font is available.

Example:

Font size

To specify a font size for an element, use the style

The size can be measured in absolute units:

font-size : 0.5in
font-size : 37pt
font-size : 3pc
font-size : 16px

size in inches
points (1 inch = 72 points)
picas  (1 pica = 12 points)
pixels (size depends on screen resolution)

. . . or in relative units:

font-size : 3em
font-size : 2ex
font-size : 150%

em unit (width of letter M)
ex unit (height of letter x)
percentage of the current font size

. . . or absolute-size key words:

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

The font size increases in a factor of 1.5 by default. Setup for the default font size for the body is small (it is medium in most IE browsers).

. . . or relative-size key words:

Each application of these key words moves the font size to the next category in order (if it exists).

Font style and weight

These style elements specify the appearance of your font and its weight:

where weight is either a value from 100 (lightest) to 900 (heaviest) in intervals of 100, or one of the keywords normal, bold, lighter, or heavier.

Example (styling the <p> tag):

Text properties

Specifying word, letter, and line spacing

These style elements specify the horizontal space between individual letters and words, and vertical space between lines of text. To set these values use the following style:

Example (styling the <p> tag):

Text alignment

To align text horizontally, use the text-align attribute:

Example (styling the <td> tag):

To align text vertically, use the vertical-align attribute:

The following table lists several examples for various values of the alignment attribute of the aligned text within the <i> tag:

Text decoration and transformation

These text properties are supported by the following CSS properties:

Example:

The next set of properties support the transformation that will be applied to the text characters:

Examples: