Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference

By Joe Burns

from Special Edition Using HTML 4:
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.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •