Tutorials Bugs Masterclass Free stuff Test pages Proposals

RichInStyle.com CSS1 tutorial - Text

Contents

Text properties

Vertical-align

Text-align

Text-decoration

Text-indent

Text-transform

Word-spacing and letter-spacing

White-space

Text properties

Vertical-align

This specifies how inline elements are aligned within their line box. Possible values are:

Name Effect
baseline Place element on baseline - initial value
sub Subscript element
super superscript element
top align top of element with tallest thing on the line
text-top align top of element with top of parent's font
middle aligns middle of element with the baseline + half the x-height of the parent font
bottom align bottom of element with lowest thing on the line
text-bottom align the bottom of the element with bottom of the parent's font

Vertical-align is not inherited and applies only to inline and table-cell elements.

A negative or positive length or % can be specified, (% relating to the line-height). 0 = baseline. Positive = raise up, negative = lower. For example, vertical-align: 1em.

Most vertical align values are not supported by most browsers, and IE 3 does not support it at all.

Text-align

This can be left (initial value = align the element to the left of the page), right, center, or justify (aligns to both margins). Text-align only applies to block elements and is inherited.

BODY {text-align: justify}

Text-decoration

This can be none (initial), or one or more of underline, overline, line-through or blink. It is not inherited but since all elements that are descendants of an element are still in that element, they will therefore will have that text-decoration (and in the ancestor element's color as well)

DEL {text-decoration: line-through}

Text-indent

This is initially 0, and can be a length or %. It is inherited and only applies to block elements. % refer to the width of the containg block. It refers to the indent of the first line of the element. It can be negative. For example, P {text-indent: 5%}.

Text-transform

Possible values are none (initial value), lowercase, uppercase, or capitalize (capitalize the first letter of every word). It applies to all elements and is inherited. For example, P {text-transform: lowercase}

Word-spacing and letter-spacing

These properties are inherited, and indicate the amount of additional space, where 0 is no extra space (if a value other than normal is set on letter-spacing, kerning will not be adjusted for alignment purposes). Alternatively, the normal (initial value) keyword can be specified. Negative values are permissible, but % are not.

Note that if letter-spacing is set to a value other than normal, browsers will not adjust letter-spacing in justifying text.

P {letter-spacing: normal;
word-spacing: .04in}

White-space

This specifies how the element treats spacing; it takes the values normal (initial), pre (i.e. preserve spacing = HTML <PRE> element) or nowrap (no line breaks). It is inherited and applies only to block elements. For example, P {white-space: pre}.

The next section considers lists.