Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts

Advanced concepts

RichInStyle.com CSS2 tutorial - Text

Contents

Text properties

Vertical-align

Text-align

Text-decoration

Text-indent

Text-transform

Word-spacing and letter-spacing

White-space

Text-shadow

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. For example: text-decoration: underline overline. 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 has an initial value of 0, and can be set to a length or %. It is inherited and only applies to block elements. % refer to the width of the containing block. It refers to the indent of the first line of the element. It can be set to a negative value if you want an 'outdent'. 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 between words or letters, where 0 is no extra space (note that if a value other than normal is set on letter-spacing, letter-spacing will not be adjusted for justification 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}

Opera and Netscape 5 are the only browsers that currently supports word-spacing. IE4 and 5 and Opera support letter-spacing.

White-space

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

This property is only supported by Netscape 4.*, and then only so far as normal and pre.

Text-shadow

Text-shadow is used, unsurprisingly, to give text shadow effects. It applies to all elements.

In order to apply text-shadows, you specify three things:

  1. the offset of the shadow,
  2. (optional) the blur radius and
  3. (optional) the color of the shadow

You can specify multiple shadows (which can overflow the element's box - they do not affect the box's size), which will be overlaid on top of each other in the order specified.

Thus text-shadow: horizontal-offset vertical-offset blur-radius color. E.g., text-shadow: 0 0 5px red. E.g., (or omitting the optional color (which is assigned the element's color) and blur radius) text-shadow: -3px 3px.

Positive horizontal offsets mean the offset is to the right, and negative to the left.

Positive vertical offsets mean the offset is below, and negative above.

Multiple shadow effects are specified by separating the shadows with commas. For example, text-shadow: 3px 3px, 2px 1ex red, 1ex 2ex 1ex green.

The next section considers lists.