The properties defined in the following sections affect the visual presentation of characters, spaces, words, and paragraphs.
The property specifies the indentation of the first line of text relative to the horizontal edge of the element's content. The indentation forms a blank space between the edge of the content and the first character of the first line. The property does not apply directly to text in a child element, however it will apply through inheritance if the property is not explicitly declared for the child.
The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted when a line of text is broken by a child element (such as the BR element in HTML).
The following example causes a 3em text indent.
P { text-indent: 3em }
This property describes how text is aligned within the element. The actual justification algorithm used is UA and human-language dependent.
In this example, note that since 'text-align' inherits, all block-level elements inside the DIV element with 'class=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.
DIV.center { text-align: center }
Conforming HTML user agents may interpret the value 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.
This property describes decorations that are added to the text of an element. If the element has no text (e.g., the IMG element in HTML) or is an empty element (e.g., EM in HTML), this property has no effect. A value of 'blink' causes the text to blink.
The color(s) required for the text decoration should be derived from the 'color' property value.
This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.
In the following example, all links are underlined (i.e., all 'A' elements with a 'HREF' attribute).
A:link, A:visited, A:active { text-decoration: underline }
The value 'blink' causes the text to blink on output devices that can support blinking.
The 'text-shadow' property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of the element, but may extend beyond its boundaries. The Z-order of the shadow effects is the same as for the element itself.
Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.
A shadow offset is specified with two length values which indicate the the distance from the text. The first length value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text. The second length value specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
A blur radius may optionally be specified after the shadow offset. The blur radius is a length value which indicate the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified.
A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of the 'color' property will be used instead.
The example below will set a text shadow to the right and below the element's text. Since no color has been specified, the shadow will have the same color as the element itself, and since no blur radius is specified, the text shadow will not be blurred:
H1 { text-shadow: 0.2em 0.2em }
The example below will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.
H2 { text-shadow: 3px 3px 5px red }
In the example below, a list of shadow effects are specified. The first shadow will be to the right and below the element's text, and it will be red with no blurring. The second shadow will overlay the first shadow effect, and it will be yellow, blurred and placed to the left and below the text. The third shadow effect will be placed to the right and above the text. Since no shadow color is specified for the third shadow effect, the color of the element itself will be used:
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
The 'text-shadow' property does not exist in CSS1, and some shadow effects may render text invisible in UAs which only supports CSS1.
Consider this example:
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
Here, the 'background' and 'color' properties have the same value and the 'text-shadow' property is used to create a "solar eclipse" effect:
The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'text-align' property).
In this example, the letter-spacing between each character in BLOCKQUOTE elements is increased by '0.1em'.
BLOCKQUOTE { letter-spacing: 0.1em }
With a value of 'normal', the UAs may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value, as in:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.
A value of 'auto' tells the user agent to adjust the spacing between letters so that the entire text of an element fits on one line. This value should only be used with special elements (e.g., headlines). See also the 'font-size' property for related 'auto' behavior.
Conforming HTML user agents may consider the value of the 'letter-spacing' property to be 'normal'.
The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'text-align' property).
In this example, the word-spacing between each word in H1 elements is increased by '1em'.
H1 { word-spacing: 1em }
Conforming HTML user agents may consider the value of the 'word-spacing' property to be 'normal'.
The values of this property have the following meanings:
The actual transformation in each case is human language dependent. See [RFC2070] for ways to find the language of an element.
Conforming HTML user agents may consider the value of 'text-transform' to be 'none' for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of [UNICODE].
In this example, all text in an H1 element is transformed to uppercase text.
H1 { text-transform: uppercase }
Please consult the sections on first line and first letter for information on specially formatting the first letter or line of a paragraph.
This property declares how whitespace inside the element is handled: the 'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the PRE element in HTML) or as 'nowrap' (where wrapping is done only through elements that force line breaks such as the BR element in HTML):
The following examples show what whitespace behavior is expected from the PRE and P elements in HTML.
PRE { white-space: pre }
P { white-space: normal }
The initial value of 'white-space' is 'normal', but a UA will typically have default values for each element.
Conforming HTML user agents may skip the 'white-space' property in author and user style sheets but must specify a value for it in the default style sheet.
The current CSS2 properties and values cannot describe the behavior of the BR element; the BR element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS2-based formatters must treat BR specially.