CSS 2.0 Properties - Text

CSS2 Properties - Text

Text properties

Vertical-align

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

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.