Text properties

word-spacing

Determines the custom spacing between adjacent words.

Value	`normal` \| `length`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { word-spacing: 1.3em }`

letter-spacing

Determines the custom spacing between adjacent letters.

Value	`normal` \| `length`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { letter-spacing: 1.3em }`

text-decoration

Specifes special text effects.

Value	`none` \| [`underline` \|\| `overline` \|\| `line-through` \|\| `blink` ]
Initial	`none`
Used With	all elements
Inherited	Sometimes
example	`BODY { text-decoration: blink }`

text-shadow

Allows a shadow to be added behind text.

Value	`none` \| [`color` \|\| `length length [length]`]
Initial	`none`
Used With	all elements
Inherited	no

The value is actually a comma seperated list of the above, each specifying an effect which will be applied in the specified order. Each specifies a horizontal and vertical offset from the text (in that order, right and down are positive), with an optional blur radius and colour.

Text shadows can be applied to :first-letter and :first-line pseudo-elements.

You should be careful that CSS1-only viewers still make your text readable, since this property is new to CSS2.

vertical-align

Value	`baseline` \| `sub` \| `super` \| `top` \| `text-top` \| `middle` \| `bottom` \| `text-bottom` \| `percentage`
Initial	`baseline`
Used With	all elements
Inherited	No
Percentages	relative to the 'line-height' of the element
example	`BODY { vertical-align: middle }`

baseline: align the baseline or bottom of the element that of the parent
middle: align the vertical midpoint of the element with the baseline plus half the x-height of the parent
sub: subscript the element
super: superscript the element
text-top: align the top of the element with the top of the parent element's font
text-bottom: align the bottom of the element with the bottom of the parent element's font

Another set of properties are relative to the formatted line that the element is a part of:

top: align the top of the element with the tallest element on the line
bottom: align the bottom of the element with the lowest element on the line

text-transform

Converts text as specified.

Value	`capitalize` \| `uppercase` \| `lowercase` \| `none`
Initial	`none`
Used With	all elements
Inherited	Yes
example	`BODY { text-transform: capitalize }`

capitalize : capitalises the first character of each word
uppercase : capitalises all letters of the element
lowercase : lowercases all letters of the element
none : neutralizes inherited value.

text-align

Value	`left` \| `right` \| `center` \| `justify`
Used With	block level elements
Inherited	Yes
example	`H1 { text-align: center }`

text-indent

Value	`length` \| `percentage`
Initial	`0`
Used With	block level elements
Inherited	Yes
Percentages	relative to parent element's width
example	`P { text-indent: 3em }`

line-height

Value	`normal` \| `number` \| `length` \| `percentage`
Initial	`normal`
Used With	all elements
Inherited	Yes
Percentages	relative to the font size of the element

This sets the distance between two adjacent baselines.
number specifies a multiple of the font size, and it can be inherited by other elements.
percentages are inherited as the calculated value.

Negative values may not be used.

The following have the same effect:

  P { line-height: 1.7; font-size: 10pt }       /* number */
  P { line-height: 1.7em; font-size: 10pt }   /* length */
  P { line-height: 170%; font-size: 10pt }    /* percentage */

Quotes

Value	[`string` \| `string`] \| `none` \| `inherit`
Used with	all elements
Inherited	yes
Example	`BODY:lang(en) { quotes: '"' '"' "'" "'" }`

This property specifies how to display quotation marks. The value is a space seperated list specifying the symbols to be used for each level of quotation. Quotations are opened and closed by use of the content property of :before and :after pseudo-elements, with quotations being nested with the appropriate symbols displayed.

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.