Contents
The properties defined in the following sections affect the visual presentation of characters, spaces, words, and paragraphs.
Value: | <length> | <percentage> | inherit |
Initial: | 0 |
Applies to: | block-level |
Inherited: | yes |
Percentages: | refer to width of containing block |
Media: | visual |
Computed value: | the percentage as specified or the absolute length |
This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents should render this indentation as blank space.
Values have the following meanings:
The value of 'text-indent' may be negative, but there may be implementation-specific limits. If the value of 'text-indent' is either negative or exceeds the width of the block, that first box, described above, may overflow the block. The value of 'overflow' will affect whether such text that overflows the block is visible.
The following example causes a '3em' text indent.
p { text-indent: 3em }
Note: Since the 'text-indent' property inherits, when specified on
a block element, it will affect descendent inline-block elements.
For this reason, it is often wise to specify 'text-indent: 0
'
on elements that are specified 'display:inline-block
'.
Value: | left | right | center | justify | |
Initial: | |
Applies to: | block-level |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
This property describes how inline content of a block is aligned. Values have the following meanings:
A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)
If the computed value of text-align is 'justify' while the computed value of white-space is 'pre' or 'pre-line', the actual value of text-align is set to the initial value.
In this example, note that since 'text-align' is inherited, all
block-level elements inside theDIV elementelements with 'class=center'a class name of 'important' will
have their inline content centered.
DIV.centerdiv.important { text-align: center }
Note.
The actual justification algorithm used isdepends on the user-agent and written language dependent.the language/script
of the text.
Conforming 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.
Value: | none | [ underline || overline || line-through || blink ] | inherit |
Initial: | none |
Applies to: | all elements |
Inherited: | no (see prose) |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
This property describes decorations that are added
to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants ofelement using the element. If it iselement's color.
When specified for (or affects)on an inline-levelinline element, it
affects all the boxes generated by that element; for all other
elements, the element. Ifdecorations are propagated to an anonymous inline box
that wraps all the in-flow inline children of the element, and to any
block-level in-flow descendants.
It is not, however, further propagated to floating and absolutely
positioned descendants, nor to the contents of 'inline-table' and
'inline-block' descendants.
If an element hascontains no contenttext (ignoring white space in elements
that have 'white-space' set to 'normal', 'pre-line', or no'nowrap'),
user agents must refrain from rendering text content (e.g.,decorations on the
IMG elementelement. For example, elements containing only images and collapsed
white space will not be underlined.
Text decorations on inline boxes are drawn across the entire
element, going across any descendant elements without paying any
attention to their presence. The 'text-decoration' property on
descendant elements cannot have any effect on the decoration of the
element. In HTML),determining the position of and thickness of text
decoration lines, user agents may consider the font sizes of and
dominant baselines of descendants, but must ignore this property.use the same baseline
and thickness on each line.
Values have the following meanings:
The color(s) required for the text decoration shouldmust be derived from
the 'color' property value. This property is not inherited, but descendant boxesvalue of a block box should be formatted withthe same decoration (e.g., they should all be underlined).element on which 'text-decoration'
is set. The color of decorations should remain the same even if
descendant elements have different 'color' values.
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to simply drawing the decoration through the elements as described above. This was arguably allowed by the looser wording in CSS2. SVG1, CSS1-only, and CSS2-only user agents may implement the older model and still claim conformance to this part of CSS 2.1. (This does not apply to UAs developed after this specification was released.)
In the following example for HTML, the text content of all A elements acting as hyperlinks (whether visited or not) will be underlined:
A[href]a:visited,a:link { text-decoration: underline }
In the order specifiedfollowing style sheet and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. The stack level of the shadow effects is the same asdocument fragment:
blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }
<blockquote>
<p>
<span>
Help, help!
<em> I am under a hat! </em>
<cite> —GwieF </cite>
</span>
</p>
</blockquote>
...the underlining for the blockquote element itself. Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color. A shadow offsetis specified with two <length> values that indicate the distance from the text. The first length value specifies the horizontal distancepropagated to an
anonymous inline element that surrounds the right of the text. A negative horizontal length value placesspan element, causing
the shadowtext "Help, help!" 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 optionallybe specified after the shadow offset. The blur radius is a length value that indicates the boundaries ofblue, with the blur effect.blue underlining from
the exact algorithm for computinganonymous inline underneath it, the blur effect is not specified. Acolor value may optionally be specified before or afterbeing taken from the
length values ofblockquote element. The
in the shadow effect.<em>text</em>color value will be usedem block is also underlined,
as it is in an in-flow block to which the basis for the shadow effect. If no colorunderline is specified,propagated. The valuefinal line of the 'color' property will be used instead.text shadows may be used withis fuchsia, but the :first-letter and :first-line pseudo-elements. Example(s):underline
underneath it is still the example below will set a text shadow toblue underline from the right and belowanonymous inline
element.
This diagram shows the element's text. Since no color has been specified,boxes involved in the shadow will haveexample above. The same color asrounded
aqua line represents the anonymous inline element itself, and since no blur radius is specified,wrapping the text shadow will not be blurred: H1 { text-shadow: 0.2em 0.2em }inline
contents of the next example will place a shadow toparagraph element, the rightrounded blue line represents
the span element, and belowthe element's text.orange lines represent the shadow will have a 5px blur radiusblocks.
Value: | normal | <length> | inherit |
Initial: | normal |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | 'normal' or absolute length |
This property specifies spacing behavior between text characters. Values have the following meanings:
Character spacing algorithms are user agent-dependent.
In this example, the space between characters in BLOCKQUOTE elements is increased by '0.1em'.
blockquote { letter-spacing: 0.1em }
In the following example, the user agent is not permitted to alter inter-character space:
blockquote { letter-spacing: 0cm } /* Same as '0' */
When the resultant space between two characters is not the same as the default space, user agents should not use ligatures.
Value: | normal | <length> | inherit |
Initial: | normal |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | for 'normal' the value '0'; otherwise the absolute length |
This property specifies spacing behavior between words. Values have the following meanings:
Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the 'text-align' property). Word spacing affects each space (U+0020), non-breaking space (U+00A0), and ideographic space (U+3000) left in the text after the white space processing rules have been applied.
In this example, the word-spacing between each word in H1 elements is increased by '1em'.
h1 { word-spacing: 1em }
Value: | capitalize | uppercase | lowercase | none | inherit |
Initial: | none |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
This property controls capitalization effects of an element's text. Values have the following meanings:
The actual transformation in each case is written language
dependent. See RFC 20703066 ( [RFC2070][RFC3066]) for ways to find the language of
an element.
Conforming 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 languageswriting scripts for which the transformationthere is different from that specified by the case-conversion tables of ISO 10646 ( [ISO10646] ).no transform.
In this example, all text in an H1 element is transformed to uppercase text.
h1 { text-transform: uppercase }
Value: | normal | pre | nowrap | pre-wrap | pre-line | inherit |
Initial: | normal |
Applies to: | |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
This property declares how whitespace inside the element is handled. Values have the following meanings:
The following examples show what whitespace behavior is expected
from the PRE and P elements, andthe "nowrap" attribute in HTML.HTML, and
in generated content.
pre { white-space: pre }
p { white-space: normal }
td[nowrap] { white-space: nowrap }
Conforming user agents may ignore:before,:after { white-space: pre-line }
In addition, the effect of an HTML PRE element with the non-standard "wrap" attribute is demonstrated by the following example:
pre[wrap] { white-space: pre-wrap }
Any text that is directly contained inside a block (not inside an inline) should be treated as an anonymous inline element.
For each inline (including anonymous inlines), the following steps are performed, treating bidi formatting characters as if they were not there:
Then, the entire block is rendered. Inlines are laid out, taking bidi reordering into account, and wrapping as specified by the 'white-space' property.
As each line is laid out,
Note. CSS 2.1 does not fully define where line breaking opportunities occur.
Given the following markup fragment, taking special note of spaces (with varied backgrounds and borders for emphasis and identification):
<ltr>A <rtl> B </rtl> C</ltr>
...where the <ltr>
element represents a left-to-right embedding and
the <rtl>
element represents a right-to-left embedding, and
assuming that the 'white-space' property is set to 'normal', the
above processing model would result in authorthe following:
This would leave two spaces, one after the A in the left-to-right
embedding level, and user style sheets but must specifyone after the B in the right-to-left embedding
level. This is then rendered according to the Unicode bidirectional
algorithm, with the end result being:
AvalueforBC
Note that there are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. Also, it is good to avoid spaces immediately inside start and end tags, as these tend to do weird things when dealing with white space collapsing.
Control characters other than U+0009 (tab), U+000A (line feed),
U+0020 (space), and U+202x (bidi formatting characters) are treated as
characters to render in the default style sheet.same way as any normal character.
Combining characters should be treated as part of the character
with which they are supposed to combine. For example, :first-letter
styles the entire glyph if you have content like
"o<span>̈</span>
"; it doesn't just
match the base character.