CSS Home

Text Formatting with Cascading Style Sheets

Cascading Style Sheets provide many different options for font and text formatting. Remember that text elements are also boxes, and can have backgrounds and borders.

color: This specifies the font color. Colors may be either named or specified as #rgb, which are the red green and blue values in hexadecimal.

font-family: This specifies the font. Options include names (e.g. arial) or the generic terms serif, sans-serif, cursive, fantasy and monospace.

font-size: This specifies the font size in pixels or other units.

font-style: This command controls the font style. Options are normal, italic and oblique.

font-variant: This allows a font variant. Options are normal or small-caps.

font-weight: This may be a number from 100 to 900 (heaviest), or it may be specified as bold, bolder, lighter or normal.

letter-spacing: This controls the spacing between letters in absolute or relative units.

line-height: This specifies the vertical distance between lines in pixels or other units.

text-align: This command aligns the text within a box. Options are center, justify, left and right.

text-decoration: This specifies normal or one of four different text decoration. Options are blink, line-through, none, overline and underline.

text-indent: This controls the indentation of the first line of text within an element. It is specified in pixels or other units.

text-transform: This command changes the case of a block of text. Options are capitalize, lowercase, none and uppercase.

vertical-align: This specifies the vertical alignment of text within a box. Options are baseline, bottom, middle, top, sub, super, text-bottom, text-top or %. Middle, top and bottom are self-evident, sub creates a subscript, super creates a superscript and baseline aligns with the baseline of the box. Text-bottom and text-top align with text.

word-spacing: This controls the spacing between words in absolute or relative units.

©2003 All Rights Reserved