Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.
|
Value
|
normal | <length> Note: Negative values are allowed. Netscape 6.0, Internet Explorer 6.0 |
|---|---|
|
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 User Agent (UA, often a web browser or web client) 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).
| H1 { word-spacing: 1em } p { word-spacing: 30px } p { word-spacing: -0.5px } |
Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.
CSS1 core: UAs may interpret any value of 'word-spacing' as 'normal'.
|
Examples: This line has <font style="word-spacing: 1cm">...</font> |
|
Value
|
normal | <length> Note: Negative values are allowed. Netscape 6.0, Internet Explorer 4.0 |
|---|---|
|
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).
| BLOCKQUOTE { letter-spacing: 0.1em } |
Here, the letter-spacing between each character in 'BLOCKQUOTE' elements would be increased by '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:
| 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.
CSS1 core: UAs may interpret any value of 'letter-spacing' as 'normal'.
|
Examples: This line has <font style="letter-spacing: 0.25cm">...</font> |
|
Value
|
none | [ underline || overline || line-through || blink ] none: Defines a normal text. Netscape 4.0, Internet Explorer 3.0 underline: Defines a line under the text. Netscape 4.0, Internet Explorer 3.0 overline: Defines a line over the text. Netscape 6.0, Internet Explorer 4.0 line-through: Defines a line through the text. Netscape 4.0, Internet Explorer 3.0 blink: Netscape 4.0 |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no, but 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></EM>'), 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.
A:link, A:visited, A:active, A:hover { text-decoration: underline }
The example above would underline the text of all links (i.e., all 'A' elements with a 'HREF' attribute).
UAs must recognize the keyword 'blink', but are not required to support the blink effect.
|
Examples: This line has <font style="text-decoration: line-through; color: red">...</font> This line has <font style="text-decoration: blink">...</font> |
|
Value
|
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |
|---|---|
|
Initial
|
baseline |
|
Applies to
|
inline elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to the 'line-height' of the element itself |
The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:
'baseline': align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
'middle': align the vertical midpoint of the element (typically an image) 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
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.
Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.
It is expected that a future version of CSS will allow <length> as a value on this property.
|
Examples: This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: baseline">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: sub">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: super">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: top">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: text-top">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: middle">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: bottom">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This is a normal line. This line has <font style="vertical-align: text-bottom">...</font> in the middle. This is a normal line. This is a normal line. This is a normal line. This is a normal line. |
|
Value
|
capitalize | uppercase | lowercase | none capitalize: uppercases the first character of each word uppercase: uppercases all letters of the element lowercase: lowercases all letters of the element none: neutralizes inherited value. Defines normal text, with lower case letters and capital letters Netscape 4.0, Internet Explorer 4.0 |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
The actual transformation in each case is human language dependent.
| H1 { text-transform: uppercase } |
The example above would put 'H1' elements in uppercase text.
CSS1 core: 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.
|
Examples: |
|
Value
|
left | right | center | justify left: Aligns the text to the left. Netscape 4.0, Internet Explorer 3.0 right: Aligns the text to the right. Netscape 4.0, Internet Explorer 3.0 center: Centers the text. Netscape 4.0, Internet Explorer 3.0 justify: Netscape 4.0, Internet Explorer 4.0 |
|---|---|
|
Initial
|
UA specific |
|
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.
| DIV.center { text-align: center } |
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.
CSS1 core: 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.
|
Examples: This paragraph has <p style="text-align: left">...</p> This paragraph has <p style="text-align: right">...</p> This paragraph has <p style="text-align: center">...</p> This paragraph has <p style="text-align: justify">...</p> |
|
Value
|
<length> | <percentage>
Netscape 4.0, Internet Explorer 3.0 |
|---|---|
|
Initial
|
0 |
|
Applies to
|
block-level elements |
|
Inherited
|
yes |
|
Percentage Values
|
refer to parent element's width |
The property specifies the indentation that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).
| P { text-indent: 3em } |
|
Examples: This is a normal paragraph. This line has <font style="text-indent: 30px">...</font>This is a normal paragraph. This line has <font style="text-indent: -0.5px">...</font>This is a normal paragraph. This line has <font style="text-indent: 1em">...</font>This is a normal paragraph. This line has <font style="text-indent: 10pt">...</font>This is a normal paragraph. This line has <font style="text-indent: 0.25cm">...</font>This is a normal paragraph. This line has <font style="text-indent: 40%">...</font>This is a normal paragraph. |
|
Value
|
normal | <number> | <length> | <percentage> |
|---|---|
|
Initial
|
normal |
|
Applies to
|
all elements |
|
Inherited
|
yes |
|
Percentage Values
|
relative to the font size of the element itself |
The property sets the distance between two adjacent lines' baselines.
When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).
Negative values are not allowed.
The three rules in the example below have the same resultant line height:
| DIV { line-height: 1.2; font-size: 10pt } /* number */ DIV { line-height: 1.2em; font-size: 10pt } /* length */ DIV { line-height: 120%; font-size: 10pt } /* percentage */ |
A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.
See The Height of Lines in chapter 2 for a description on how 'line-height' influences the formatting of a block-level element.
|
Examples: This is a normal paragraph. This is a normal paragraph. This line has <p style="line-height: 100px">...</p> This is a normal paragraph. This is a normal paragraph. This line has <p style="line-height: 3em">...</p> This is a normal paragraph. This is a normal paragraph. This line has <p style="line-height: 100pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 2cm">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 1.2; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 1.2em; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 120%; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 12; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 12em; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. This line has <font style="line-height: 360%; font-size: 10pt">...</font> This is a normal paragraph. This is a normal paragraph. |