Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference
Cascading Style Sheet Property Reference
by Jerry Honeycutt
Text Properties
Text properties give you complete control over how the browser displays an element's text. You can change its color, size, font, spacing, and so on. The sections that follow describe each text property you can set.
letter-spacing
letter-spacing determines the spacing between each letter in a line of text. You can set this property to normal and let the browser worry about it, or you can set this property to any valid length, such as 1px.
line-height
You use the line-height property to set the leading for an element. An element's leading is the distance between the baselines of two text lines. You can use any valid length or a percentage (which is relative to the parent element's line-height property), or you can set this property to normal. Note that the spacing is added before each line, not after.
CAUTION: This setting doesn't work well on text lines that use multiple font sizes on the same line of text.
text-align
text-align defines how text is aligned in an element. You can set this property to any of the values shown in Table B.14.
Table B.14 text-align Values
| Value | Description |
| left | Text is left justified. |
| right | Text is right justified. |
| center | Text is centered within the element. |
| justify | Text is left and right justified. |
text-decoration
You can add special decorations, such as underlining, to an element by using the text- decoration property. Table B.15 describes the values you can assign to this property. You can combine these values, too.
Table B.15 text-decoration Values
| Value | Description |
| none | No decorations |
| underline | Underlined text |
| overline | Text with a line over it |
| line-through | Strikethrough |
| blink | Blinking text |
text-indent
You use the text-indent property to indent the first line of an element's text. You can set this property to any valid length. For example, here's how to indent the <P> tag's text to the right by one inch:
P {text-indent: 1in}
TIP: You can create a hanging indent by setting a tag's style text-indent to a negative value and margin-left to a positive value.
text-transform
text-transform specifies that the text should be changed according to the values in Table B.16.
Table B.16 text-transform Values
| Value | Description |
| capitalize | Capitalizes first letter of each word |
| uppercase | Uppercases all letters in the element |
| lowercase | Lowercases all letters in the element |
| none | No transformation |
vertical-align
You use the vertical-align property to change the vertical position of the element's text within the element itself. You can use one of the keywords described in Table B.17.
Table B.17 vertical-align Values
| Value | Description |
| baseline | Aligns the baseline of the element with the baseline of the parent |
| middle | Aligns the middle of the element with the middle of the parent |
| sub | Subscripts the element |
| super | Superscripts the element |
| text-top | Aligns the top of the element with the top of the parent element's text |
| text-bottom | Aligns the bottom of the element with the bottom of the parent element's text |
| top | Aligns the top of the element with the tallest element on the line |
| bottom | Aligns the bottom of the element with the lowest element on the line |
word-spacing
word-spacing determines the spacing between each word in a line of text. You can set this property to normal and let the browser worry about it, or you can set this property to any valid length, such as 1px.
Internet Explorer 4.0, Netscape Communicator, and CSS1
Table B.18 describes the CSS1 properties that Internet Explorer 4.0 and Netscape Communicator support as of this writing. The first column is the name of the property. You see a check mark in the second column beside features that Internet Explorer 4.0 supports and an X beside features that it doesn't support. The third column is for Netscape Communicator.
Table B.18 CSS1 Property Support
| Property | IE 4.0 | NC |
| Background Properties | ||
| background | 3 | 3 |
| background-attachment | X | 3 |
| background-color | 3 | 3 |
| background-image | 3 | 3 |
| background-position | X | X |
| background-repeat | X | 3 |
| color | 3 | 3 |
| Box Properties | ||
| backgr | 3 | 3 |
| border | X | 3 |
| border-color | X | 3 |
| border-width | X | 3 |
| border-bottom | X | X |
| border-bottom-width | X | 3 |
| border-left | X | X |
| border-left-width | X | 3 |
| border-right | X | X |
| border-right-width | X | 3 |
| border-style | X | 3 |
| border-top | X | X |
| border-top-width | X | 3 |
| clear | X | 3 |
| float | X | 3 |
| height | 3 | 3 |
| margin | 3 | 3 |
| margin-bottom | X | 3 |
| margin-left | 3 | 3 |
| margin-right | 3 | 3 |
| margin-top | X | 3 |
| padding | X | 3 |
| padding-bottom | X | 3 |
| padding-left | X | X |
| padding-right | X | 3 |
| padding-top | X | 3 |
| width | 3 | 3 |
| Classification Properties | ||
| list-style-image | X | 3 |
| list-style-position | X | 3 |
| list-style-type | X | 3 |
| white-space | X | 3 |
| Font Properties | ||
| font | 3 | 3 |
| font-family | 3 | 3 |
| font-size | 3 | 3 |
| font-style | 3 | 3 |
| font-variant | 3 | X |
| font-weight | 3 | 3 |
| Text Properties | ||
| letter-spacing | 3 | X |
| line-height | 3 | 3 |
| text-align | 3 | 3 |
| text-decoration | 3 | 3 |
| text-indent | 3 | 3 |
| text-transform | 3 | 3 |
| vertical-align | 3 | X |
| word-spacing | X | X |
© Copyright Macmillan Computer Publishing. All
rights reserved.
