Text Sampler

text-indent
Defines the indentation of the first line of text (or other content) in a block-level element. Negative values create a "hanging" outdent effect.

Values

  • <length> (e.g., 3em, -15px) | <percentage> (e.g., 10%) | inherit

Sample CSS

p {text-indent: 5em;}

letter-spacing
Defines the spacing between letters (comparable to "tracking" in print design). Positive values increase letter-spacing, while negative values decrease it. Relative values are recommended (e.g., ems or %) so that spacing remains proportional if the user changes the font size.

Values

  • <length> (any length value, positive or negative) | normal | inherit

Sample CSS

a {letter-spacing: .3em;}

word-spacing
Defines the amount of whitespace to be inserted between words in an element. Caution: easy to overdo!

Values

  • <length> (any length value, positive or negative) | normal | inherit

Sample CSS

  • p.spacious {word-spacing: .5em;}
  • p.claustrophobic {word-spacing: -.2em;}
text-decoration
Creates certain text effects such as underlining. Use this property set to "none" for a:hover to remove underlining from a link when the mouse hovers over it. Do NOT use blink!

Values

  • none | underline | overline | line-through | blink | inherit

Sample CSS

a:hover {text-decoration: none;}

text-align
Sets the horizontal alignment of text (or other content) within a block-level element.

Values

  • left | right | center | justify | inherit

Sample CSS

h1 {text-align: center;}

line-height
Defines line-spacing, i.e., the vertical distance between the baseline of one line and the next (comparable to "leading" in print design). Note: cannot be used to center a block of text (e.g., p element) within its containing element.

Values

  • <length> (positive value only) | <percentage> | <number> | normal | inherit

Sample CSS

p {line-height: 1.5em;}
p {line-height: 150%;}
p {line-height: 1.5;}

text-transform
Changes the case of letters in an element (regardless of case used in the XHTML).

Values

  • none | uppercase | lowercase | capitalize | inherit

Sample CSS

h3 {text-transform: lowercase;}

vertical-align
Defines the vertical alignment of text (or other inline content) with respect to the baseline of the line within which it resides. IOW: moves text up or down to display scientific notation, footnote references, etc.

Values

  • <length> (positive or negative) | <percentage> (positive or negative) | sub | super | top | middle | bottom

Sample CSS

.regtm {vertical-align: 60%;}