Cascading Style Sheet

Font and Related Properties

{ font-size }

{ font-size: absolute | relative | length | percentage; }

absolute x-small, small, medium (default), large, x-large, xx-large
relative larger, smaller
length a number followed by unit of measure
px pixels
in inches
cm centimeters
mm millimeters
pt points
pc picas
em height of the font
en half the height of the font
percentage number followed by percent sign = the relative percentage of parent element's font size

Examples:
{ font-size: xx-large } Sample
{ font-size: smaller } Sample
{ font-size: 24pt } Sample
{ font-size: 150% } Sample


{ font-family }

{ font-family: fontname1, fontname2, fontnameN; }


Examples:

{ font-family: Times, TimesRoman, serif; } Sample

{ font-family: cursive, fantasy, sans-serif, serif; } Sample


{ font-weight }

{ font-weight: normal | bold | bolder | lighter; }
{ font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; }

Examples:

{ font-weight: bolder; } Sample

{ font-weight: 200; } Sample

{ font-style }

{ font-style: italic | normal; }

Examples:

{ font-style: italic; } Sample

{ font-style: normal; } Sample

{ font-variant }

{ font-variant : small-caps | normal; }

Examples:

{ font-variant : small-caps; } Sample

{ font-variant : normal; } Sample

{ line-height }

{ line-height: normal | number | length | percentage; }

normal normal value for current font
number current font size multiplier -- non-negative floating point number
length a number followed by unit of measure
px pixels
in inches
cm centimeters
mm millimeters
pt points
pc picas
em height of the font
en half the height of the font
percentage number followed by percent sign = the relative percentage of parent element's line height


Examples:

{ line-height: normal; } Sample
{ line-height: 1.5; } Sample
{ line-height: 0.5; } Sample
{ line-height: 0.25in; } Sample
{ line-height: 200%; } Sample
Empty line to help see the result of line height on previous line.


{ text-decoration }

{ text-decoration : underline | line-through | blink | none; }

Examples:

{ text-decoration : line-through; } Sample

{ text-decoration : none; } Sample


{ text-transform }

{ text-transform : capitalize | uppercase | lowercase | none; }

Examples:

{ text-transform : lowercase ; } Sample

{ text-transform : uppercase ; } Sample


{ text-align }

{ text-align : left | right | center | justify; }

Examples:

{ text-align : center; }
Sample

{ text-align : right; }
Sample


{ text-indent }

{ text-indent : length | percentage; }

Examples:

{ text-indent : 40px; }
Sample line of text to demonstrate that only the first line of text within and element will be indented.

{ text-indent : 75%; }
Sample line of text to demonstrate that only the first line of text within and element will be indented.

Sample Combo Header

Sample Combo Header