Contents
| Property name: | 'text-indent' |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentage values: | refer to parent element's width |
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 }
| Property name: | 'alignment' |
|---|---|
| Value: | left | right | center | justify |
| Initial: | depends on user agent |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentage values: | N/A |
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 'alignment' 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 { alignment: center }
UAs may treat 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.
| Property name: | 'text-decoration' |
|---|---|
| Value: | none | [ underline || overline || line-through || blink ] |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no (see clarification below) |
| Percentage values: | N/A |
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.
| Property name: | 'text-shadow' |
|---|---|
| Value: | none | <color> [, <color> ]* |
| Initial: | none |
| Applies to: | all |
| Inherited: | No, but see clarification below |
| Percentage values: | Indicate transparency |
CSS2 allows authors to create text shadow effects with this property.
So, for example, the following rule:
P { text-shadow: black }
creates a black text shadow down and to the right of the text.
Text shadows increase the size of an element's box.
[Editor's note: The remaining sections of the text shadow proposal were not clear enough to be translated. More explanation is required.]
| Property name: | 'letter-spacing' |
|---|---|
| Value: | normal | <length> | auto |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentage values: | N/A |
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 '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.
UAs may interpret any value of 'letter-spacing' as 'normal'. See the section on conformance for more information.
| Property name: | 'word-spacing' |
|---|---|
| Value: | normal | <length> |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentage values: | N/A |
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 'align' property).
In this example, the word-spacing between each word in H1 elements is increased by '1em'.
H1 { word-spacing: 1em }
UAs may interpret any value of 'word-spacing' as 'normal'. See the section on conformance for more information.
| Property name: | 'text-transform' |
|---|---|
| Value: | capitalize | uppercase | lowercase | none |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | yes |
| Percentage values: | N/A |
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.
UAs may ignore 'text-transform' (i.e., treat it as '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.
| Property name: | 'white-space' |
|---|---|
| Value: | normal | pre | nowrap |
| Initial: | normal |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentage values: | N/A |
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.
UAs may ignore the 'white-space' property in author's and reader's style sheets, and use the UA's default values instead. See the section on conformance for more information.
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.