Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 18th of September 2014 01:36:44 AM

Appendix C. CSS1 Properties

This appendix lists all CSS1 properties, plus the CSS1 pseudo-elements and pseudo-classes. The values to the right of a property name show the browser compatibility information for that property. They will look something like this:

IE4 Y/N IE5 Y/Y NN4 N/N Op3 Y/-

The browsers listed are:

NN4

Netscape Navigator 4

IE4

Internet Explorer 4 (IE4.5 for Macintosh)

IE5

Internet Explorer 5

Op3

Opera 3.6

The first value in each pair is for the Windows version; the second value is for the Macintosh version. (Sorry, Macintosh folks, but we are in the minority.) For instance, IE4 Y/N means that the property is supported in IE4 for Windows, but not IE4 for Macintosh. The possible support values are:

Y

Supported

N

Not Supported

P

Partial Support (may mean that some values are supported and others are not)

Q

Quirky Support (close to the letter of the specification)

B

Buggy Support (may mangle display, or even crash the browser)

-

Not Applicable (browser doesn't exist)

For more detailed information about browser support, including notes on the support ratings, see Appendix D, "CSS Support Chart".

:activeIE4 Y/Y IE5 Y/Y NN4 N/N Op3 N/-

This pseudo-class applies to hyperlinks, but not named anchors. It sets the styles to be used at the moment a hyperlink is being selected (e.g., clicked).

Example

A:active {color: red; background: yellow;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

:first-letterIE4 N/N IE5 N/Y NN4 N/N Op3 Y/-

Applies styles to the first letter of an element. This pseudo-class can be used to generate drop-cap effects, among other things.

Example

P:first-letter {color: purple;}
<P>The capital 'T' at the beginning of this paragraph is purple.</P>

Values

n/a

Default

n/a

Inherited

yes

Applies to

block

:first-lineIE4 N/N IE5 N/Y NN4 N/N Op3 Y/-

Applies styles to the first line of an element. The styles are applied even if the window is resized; the text is simply restyled to encompass only the first line of the element.

Example

P:first-line {color: red;}
<P>The first line of this paragraph is red. blah blah blah...</P>

Values

n/a

Default

n/a

Inherited

yes

Applies to

block

!importantIE4 Y/N IE5 Y/Y NN4 N/N Op3 Y/-

Style declaration is made important, thereby raising its weight in the cascade. Important declarations override all others. In CSS1, important author styles override all reader styles, even important ones. In CSS2, this is reversed, so that important reader styles always win out over the author's styles, important or otherwise.

Example

H1 {color: maroon !important;}
P.warning {color: rgb(100%,20%,20%) !important; font-weight: bold;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

style rules

:linkIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

This pseudo-class applies to hyperlinks, but not named anchors. It sets the styles to be used for a hyperlink that points to a URI that has not yet been visited (i.e., is not listed in the browser's history).

Example

A:link {color: blue;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

:visitedIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

This pseudo-class applies to hyperlinks, but not named anchors. It sets the styles to be used for a hyperlink that points to a URI that has already been visited (i.e., is listed in the browser's history).

Example

A:visited {color: navy;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

backgroundIE4 P/Y IE5 Y/Y NN4 P/P Op3 P/-

A shorthand way of expressing the various background properties using a single rule. Use of this property is encouraged over the other background properties because it is more widely supported and doesn't take as long to type.

Example

BODY {background: white url(bg41.gif) fixed center repeat-x;}
P {background: #555 url(http://www.pix.org/stone.png);}
PRE {background: yellow;}

Values

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Default

refer to individual properties

Inherited

no

Applies to

all elements

Percentage values allowed on <background-position>.

background-attachmentIE4 Y/Y IE5 Y/Y NN4 N/N Op3 N/-

This property defines whether or not the background image scrolls along with the element. This is generally applied to BODY only, and in fact is largely supported only for that element. It is theoretically possible to create "aligned" backgrounds in multiple elements using this property; see Chapter 6, "Colors and Backgrounds", for more details.

Example

BODY {background-attachment: scroll;}
DIV.fixbg {background-attachment: fixed;}

Values

scroll | fixed

Default

scroll

Inherited

no

Applies to

all elements

background-colorIE4 Y/Y IE5 Y/Y NN4 B/B Op3 Y/-

This sets the background color of an element. The color fills the content area and padding, and extends out to the outer edge of the element's border. The value transparent trips across a nasty bug in Navigator 4.x, which interprets it as black.

Example

H4 {background-color: white;}
P {background-color: rgb(50%,50%,50%);}
PRE {background-color: #FFFF99;}

Values

<color> | transparent

Default

transparent

Inherited

no

Applies to

all elements

background-imageIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

Sets an image to be the background pattern. Depending on the value of background-repeat, the background image may tile indefinitely, or only along one axis, or not at all, and the starting position of the tiling is dependent on the value of background-position.

Example

BODY {background-image: url(bg41.gif);}
H2 {background-image: url(http://www.pix.org/dots.png);}

Values

<url> | none

Default

none

Inherited

no

Applies to

all elements

background-positionIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

This sets the starting position of a background image (defined by the value of background-image). background-position is used to set the origin of the background's tiling, or its position if there is no tiling. Percentage values define not only a point within the element, but also the same point in the origin image itself; see Chapter 6, "Colors and Backgrounds" for more details.

Example

BODY {background-position: top center;}

Values

[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

Default

0% 0%

Inherited

no

Applies to

block-level and replaced

Percentage values refer to the size of the element itself as well as the size of the origin image.

background-repeatIE4 P/Y IE5 Y/Y NN4 P/B Op3 Y/-

Sets the repeat style for a background image. Note that the axis-related repeats actually repeat in both directions along the specified axis. The repeating of a background image begins with the origin image, whose position is defined by the value of background-position.

Example

BODY {background-repeat: no-repeat;}

Values

repeat | repeat-x | repeat-y | no-repeat

Default

repeat

Inherited

no

Applies to

all elements

borderIE4 P/P IE5 P/Y NN4 P/P Op3 P/-

This is a shorthand property that defines the width, color, and style of the border of an element. Note that while none of the values are required, omitting the <border-style> value will result in no border being applied, since the default of border-style is none.

Example

H1 {border: 2px dashed maroon;}

Values

<border-width> || <border-style> || <color>

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

border-bottomIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

This shorthand property defines the width, color, and style of the bottom border of an element. The same caveats about border-style apply.

Example

UL {border-bottom: 0.5in inset green;}

Values

<border-bottom> || <border-style> || <color>

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

border-bottom-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the width of the bottom border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative length values are not permitted.

Example

UL {border-bottom-width: 0.5in;}

Values

thin | medium | thick | <length>

Default

medium

Inherited

no

Applies to

all elements

border-colorIE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-

Sets the color of the foreground of the overall border of an element (see border-style).

Example

H1 {border-color: purple; border-style: solid;}

Values

<color>{1,4}

Default

the value of color for the element itself

Inherited

no

Applies to

all elements

border-leftIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

This shorthand property defines the width, color, and style of the left border of an element. The usual caveats about border-style apply.

Example

P {border-left: 3em solid gray;}

Values

<border-left> || <border-style> || <color>

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

border-left-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the width of the left border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative length values are not permitted.

Example

P {border-left-width: 3em;}

Values

thin | medium | thick | <length>

Default

medium

Inherited

no

Applies to

all elements

border-rightIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

This shorthand property defines the width, color, and style of the right border of an element. The usual caveats about border-style apply.

Example

IMG {border-right: 30px dotted blue;}

Values

<border-right> || <border-style> || <color>

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

border-right-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the width of the right border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative length values are not permitted.

Example

IMG {border-right-width: 30px;}

Values

thin | medium | thick | <length>

Default

medium

Inherited

no

Applies to

all elements

border-styleIE4 P/Y IE5 P/Y NN4 P/P Op3 Y/-

Sets the style of the overall border of an element, using the color set by border-color or the foreground of the element itself if no border-color has been defined. CSS1 does not require recognition of any values besides none and solid. Any unrecognized value from the list of values should be reinterpreted as solid.

Example

H1 {border-style: solid; border-color: purple;}

Values

none | dotted | dashed | solid | double | groove | ridge | inset | outset

Default

none

Inherited

no

Applies to

all elements

border-topIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

This shorthand property defines the width, color, and style of the top border of an element. The usual caveats about border-style apply.

Example

UL {border-top: 0.5in solid black;}

Values

<border-top> || <border-style> || <color>

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

border-top-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the width of the top border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative length values are not permitted.

Example

UL {border-top-width: 0.5in;}

Values

thin | medium | thick | <length>

Default

medium

Inherited

no

Applies to

all elements

border-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the width of the overall border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative length values are not permitted.

Example

H1 {border-width: 2ex;}

Values

[ thin | medium | thick | <length> ]{1,4}

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

clearIE4 P/Y IE5 P/Y NN4 P/P Op3 B/-

Defines the sides of an element on which no floating images may be placed. The effect of this is to move the element downward until the top of its border-edge is below the bottom edge of the floated element.

Example

H1 {clear: right;}

Values

none | left | right | both

Default

none

Inherited

no

Applies to

all elements

colorIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

Sets the foreground color of a given element. For text, this sets the text color. The value of color is inherited by any borders of an element, unless they have had a color set border-color.

Example

STRONG {color: rgb(255,128,128);}

Values

<color>

Default

UA specific

Inherited

yes

Applies to

all elements

displayIE4 P/P IE5 P/Y NN4 P/P Op3 P/-

Used to classify elements into broad categories. The most popular value is probably none, which suppresses the display of an element altogether. Gratuitous use of display with a document type such as HTML can be dangerous, since HTML already has a display hierarchy defined. However, in the case of XML, which has no such hierarchy, display is indispensable.

In CSS2, the range of values for display is dramatically expanded. See Chapter 10, "CSS2: A Look Ahead", for more details.

Example

.hide {display: none;}

Values

block | inline | list-item | none

Default

block

Inherited

no

Applies to

all elements

floatIE4 P/B IE5 P/Q NN4 P/P Op3 B/-

Sets the float direction for an element. This is generally applied to images in order to allow text to flow around them, but under CSS1 any element may be floated. Note that, for elements such as paragraph, floating the element will cause its width to tend toward zero unless an explicit width is assigned; thus, width assignment is a crucial part of floating any nonreplaced element.

Example

IMG {float: left;}

Values

left | right | none

Default

none

Inherited

no

Applies to

all elements

fontIE4 P/Q IE5 P/Y NN4 P/P Op3 Y/-

This is a shorthand property for the other font properties. Any of these values may be omitted except for font-size and font-family, which are always required for a valid font declaration. Note the following incorrect examples.

Example

P {font: bold 12pt/14pt Helvetica,sans-serif;}
P.wrong {font: bold Helvetica,sans-serif;} /* missing a font-size */
P.wrong {font: 12pt Times,serif bold;}   /* font-weight must come before others */
P.wrong {font: 12pt italic Times;}   /* font-style must come before font-size */
P.fancy {font: 14pt Author;}   /* technically correct, although generic font-families are encouraged for fallback purposes */

Values

[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ] ? <font-family>

Default

refer to individual properties

Inherited

yes

Applies to

all elements

font-familyIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

This is used to declare a specific font to be used, or a generic font family, or both. Note that the use of a specific font family is dependent on the user having said font installed on the system. Thus the use of generic font families is strongly encouraged, since this will cause the user agent to attempt to substitute a similar font.

Example

P {font-family: Helvetica,sans-serif;}

Values

[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]

Default

UA specific

Inherited

yes

Applies to

all elements

font-sizeIE4 P/Q IE5 P/Y NN4 Y/Y Op3 Y/-

This sets the size of the font. This can be defined as an absolute size, a relative size, a length value, or a percentage value. Negative length and percentage values are not permitted. The dangers of font-size assignment are many and varied. Some of these dangers are covered in Chapter 4, "Text Properties".

Example

H2 {font-size: 200%;}
H3 {font-size: 36pt;}

Values

xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>

Default

medium

Inherited

yes

Applies to

all elements

Percentage values are relative to the parent element's font size.

font-styleIE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-

This set the font to use either italic, oblique, or normal text. Italic text is generally a defined font face within the font itself, whereas oblique text is less often so. In the latter case, the user agent can compute a slanted font face.

Example

EM {font-style: oblique;}

Values

normal | italic | oblique

Default

normal

Inherited

yes

Applies to

all elements

font-variantIE4 Q/Y IE5 Q/Y NN4 N/N Op3 Y/-

This property currently has two values: small-caps and normal. The small-caps variant can either be applied as a face of the selected font or computed by the user agent.

Example

H3 {font-variant: small-caps;}

Values

normal | small-caps

Default

normal

Inherited

yes

Applies to

all elements

font-weightIE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-

This is used to set the weight of a font, making it heavier or lighter. The numeric value 400 is equivalent to the value normal, and 700 is equal to bold. Each numeric value is at least as heavy as the next-lower value, and at least as light as the next-higher number.

Example

B {font-weight: 700;}

Values

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Default

normal

Inherited

yes

Applies to

all elements

heightIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

This is used to set the height of an element. Height is most often applied to images, but can be used on any block-level or replaced element, although support for such behavior is not widespread as of this writing. Negative length values are not permitted.

Example

IMG.icon {height: 50px;}

Values

<length> | auto

Default

auto

Inherited

no

Applies to

block-level and replaced

letter-spacingIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

Used to set the amount of whitespace between letters. A letter is defined as any displayed character, including numbers, symbols, and other font glyphs. Length values are used to define a modifier to the usual spacing, not the entire space itself; thus, normal is synonymous with 0 (zero). Negative values are permitted, and cause the letters to bunch closer together.

Example

P {letter-spacing: 0.5em;}

Values

normal | <length>

can refer to your website with a nice compact URL like "http://www.taxidermy.org/~mad_dog/"
  The University of Delaware <A HREF="http://www.udel.edu/FREC/spatlab/">
Spatial Analysis Lab</A>, is a proud sponsor of this website.
  The animated GIF image is also a link.  By default, a linked image has a 2-pixel wide blue border, but I suppressed that with the BORDER=0 attribute in the IMG tag.

Default

normal

Inherited

yes

Applies to

all elements

line-heightIE4 P/P IE5 P/Y NN4 P/P Op3 Q/-

This influences the layout of line boxes. The difference between the value of line-height and the value of font-size is called leading, and half of the leading (otherwise known as half-leading) is applied above and below the content of an element or line of text. Negative values are not permitted. Using a number defines a scaling factor that is multiplied by the font-size, and the number itself is inherited, not the computed value. This allows for much more intelligent page layout, and is strongly preferred over other methods of setting line-height.

The drawback to using a number value is that IE3 will interpret it as a number of pixels. See Chapter 8, "Visual Formatting" for a detailed discussion of line-height and line boxes.

Example

P {line-height: 18pt;}
H2 {line-height: 200%;}

Values

normal | <number> | <length> | <percentage>

Default

normal

Inherited

yes

Applies to

all elements

Percentage values relative to the font size of the element itself

list-styleIE4 P/P IE5 Y/Y NN4 P/P Op3 Y/-

A shorthand property condensing all other list-style properties. It applies to all elements with a display value of list-item ; in ordinary HTML, this is any <LI> element.

Example

UL {list-style: square url(bullet3.gif) outer;}  /* values are inherited by LI elements */

Values

[disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]

Default

not defined for shorthand properties

Inherited

yes

Applies to

elements with display of list-item

list-style-imageIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

Used to declare an image which is to be used as the "bullet" in an unordered or ordered list. This style applies to elements with a display value of list-item (e.g., <LI> elements). The position of the image with respect to the content of the list item is defined using list-style-position.

Example

UL {list-style-image: url(bullet3.gif);}

Values

<url> | none

Default

none

Inherited

yes

Applies to

elements with display of list-item

list-style-positionIE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-

This property is used to declare the position of the bullet or number in an unordered or ordered list with respect to the content of the list item. Applies to elements with a display value of list-item. If the bullet is set to be outside, then it is placed in the margin of the list-item element. The exact behavior in this circumstance is not defined in CSS.

Example

LI {list-style-position: outer;}

Values

inside | outside

Default

outside

Inherited

yes

Applies to

elements with display of list-item

list-style-typeIE4 Y/Y IE5 Y/Y NN4 Y/P Op3 Y/-

This is used to declare the type of bullet numbering system to be used in either an unordered or ordered list, depending on the value specified. This property applies to elements with a display value of list-item.

Example

UL {list-style-type: square;}
OL {list-style-type: lower-roman;}

Values

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Default

disc

Inherited

yes

Applies to

elements with display of list-item

marginIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This sets the size of the overall margin of an element. Vertically adjacent margins of block-level elements are collapsed to be as large as the largest margin, whereas inline elements effectively do not take margins (they are allowed, but have no effect on page layout). Only the left and right margins of inline elements have any effect, and are not collapsed. Margins set on floated elements are not collapsed with other margins under any circumstance. Negative values are permitted, but caution is recommended.

Example

H1 {margin: 2ex;}

Values

[ <length> | <percentage> | auto ]{1,4}

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

Percentage values refer to width of the closest block-level ancestor.

margin-bottomIE4 P/P IE5 P/Y NN4 N/N Op3 Y/-

This sets the size of the bottom margin of an element. Negative values are permitted, but caution is recommended.

Example

UL {margin-bottom: 0.5in;}

Values

<length> | <percentage> | auto

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of the closest block-level ancestor.

margin-leftIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This sets the size of the left margin of an element. Negative values are permitted, but caution is recommended.

Example

P {margin-left: 3em;}

Values

<length> | <percentage> | auto

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to width of the closest block-level ancestor.

margin-rightIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This sets the size of the right margin of an element. Negative values are permitted, but caution is recommended.

Example

IMG {margin-right: 30px;}

Values

<length> | <percentage> | auto

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to width of the closest block-level ancestor.

margin-topIE4 P/P IE5 P/Y NN4 P/P Op3 Y/-

This sets the size of the top margin of an element. Negative values are permitted, but caution is recommended.

Example

UL {margin-top: 0.5in;}

Values

<length> | <percentage> | auto

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of the closest block-level ancestor.

paddingIE4 P/P IE5 P/Y NN4 B/B Op3 B/-

This sets the size of the overall padding of an element. The padding will "inherit" the element's background; in other words, the background of an element fills its content area and padding. Padding set on inline elements does not affect line-height calculations, but will be applied to the right and left ends of the element. If an inline element has both padding and a background, the background may be extended above and below the edges of the line-box in which the inline element appears, but user agents are not required to support this behavior. There is also no defined behavior to say whether the foreground content of a previous line appears above the background of a succeeding line, or is overwritten by that background. Negative values are not permitted.

Example

H1 {padding: 2ex;}

Values

[ <length> | <percentage> ]{1,4}

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

Percentage values refer to the width of closest block-level ancestor.

padding-bottomIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the bottom padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

UL {padding-bottom: 0.5in;}

Values

<length> | <percentage>

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of closest block-level ancestor.

padding-leftIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the left padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

P {padding-left: 3em;}

Values

<length> | <percentage>

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of closest block-level ancestor.

padding-rightIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the right padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

IMG {padding-right: 30px;}

Values

<length> | <percentage>

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of closest block-level ancestor.

padding-topIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the top padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

UL {padding-top: 0.5in;}

Values

<length> | <percentage>

Default

0

Inherited

no

Applies to

all elements

Percentage values refer to the width of the closest block-level ancestor.

text-alignIE4 Y/P IE5 Y/Y NN4 Y/P Op3 Y/-

This sets the horizontal alignment of the text in an element, or more precisely, defines to which side of the element the line-boxes are aligned. The value justify is supported by programmatically adjusting the letter- and word-spacing of the line's content, and results may vary by user agent.

Example

P {text-align: justify;}
H4 {text-align: center;}

Values

left | right | center | justify

Default

UA specific

Inherited

yes

Applies to

block

text-decorationIE4 P/P IE5 P/P NN4 Q/Q Op3 P/-

This property sets certain effects on the text, such as underline and blink. These decorations will "span" child elements that do not have text decoration defined; see Chapter 4, "Text Properties" for more details. Combinations of the values are legal.

User agents are not required to support the value blink, and in fact only Netscape Navigator 4.x does so.

Example

U {text-decoration: underline;}
.old {text-decoration: line-through;}
U.old {text-decoration: line-through underline;}

Values

none | [ underline || overline || line-through || blink ]

Default

none

Inherited

no

Applies to

all elements

text-indentIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

Used to set the indentation of the first line of an element. This is most often used to create a tab effect for Negative values are permitted, and cause "hanging indents."

Example

P {text-indent: 5em;}
H2 {text-indent: -25px;}

Values

<length> | <percentage>

Default

0

Inherited

yes

Applies to

block

Percentage values refer to parent element's width.

text-transformIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 P/-

This property changes the case of the letters in the element, regardless of the case of the original text. The selection of letters to be capitalized by the value capitalize is not a precisely defined behavior, depending as it does on "words," which are difficult to define in a programmatic way.

Example

H1 {text-transform: uppercase;}
.title {text-transform: capitalize;}

Values

capitalize | uppercase | lowercase | none

Default

none

Inherited

yes

Applies to

all elements

vertical-alignIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

Used to set the vertical alignment of an element's baseline with respect to its line-height. Negative percentage values are permitted, and will cause the element to be lowered, not raised.

Example

SUP {vertical-align: super;}
.fnote {vertical-align: 50%;}

Values

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

Default

baseline

Inherited

no

Applies to

inline

Percentage values refer to the line height of the element itself.

white-spaceIE4 N/N IE5 N/Y NN4 P/P Op3 N/-

This property defines how whitespace within the element is treated. normal acts like traditional web browsers, in that it reduces any sequence of whitespace to a single space. pre causes whitespace to be treated as it is in the HTML element PRE, with whitespace and returns preserved. nowrap prevents an element from line breaking.

Example

TD {white-space: nowrap;}
TT {white-space: pre;}

Values

normal | pre | nowrap

Default

normal

Inherited

yes

Applies to

block

widthIE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-

Used to set the width of an element. This is most often applied to images, but can be used on any block-level or replaced element. Negative values are not permitted.

Example

TABLE {width: 80%;}

Values

<length> | <percentage> | auto

Default

auto

Inherited

no

Applies to

block-level and replaced

Percentage values refer to the parent element's width.

word-spacingIE4 N/Y IE5 N/Y NN4 N/N Op3 Y/-

Used to set the amount of whitespace between words. A "word" is defined as a string of characters surrounded by whitespace. Length values are used to define a modifier to the usual spacing, not the entire space itself; thus, normal is synonymous with 0 (zero). Negative values are permitted, and cause the words to bunch closer together.

Example

P {word-spacing: 0.5em;}

Values

normal | <length>

Default

normal

Inherited

yes

Applies to

all elements



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

6.1.2.1. Real-world issues

That's pretty much all there is to setting a background color.Well, except for one more small warning: Navigator 4 gets the placement ofbackground colors completely wrong. Instead of applying thebackground color to the entire content box and padding, the coloronly appears behind the text itself, as shown in Figure 6-17.

Figure 6-17

Figure 6-17. Navigator's incorrect behavior

Let me reiterate: this is totally wrong.padding, borders, and margins of each paragraph will be 30em. In Figure 8-7, the "blank" space around the paragraphs is actually their margins. (If the DIV had any padding, there would be even more blank space, but that wasn't the case here.)

In a similar fashion, the overall width of a list item's element box is equal to the content width of the list element that contains it. As you can see in Figure 8-8, the margins of a parent element can influence the layout of a child element.

8.4.2. Inline Formatting

As we saw in Chapter 4, "Text Properties", all elements have a line-height. This fact has a great deal to do with how inline elements are displayed, and it needs to be covered in detail before we move on.

The various widths, heights, padding, margins, and borders allcombine to determine how a document is laid out. In most cases, theheight and width are automatically determined by the browser, basedon the available display region and other factors. Under CSS, ofcourse, you can assert more direct control over the way elements aresized and displayed. There are different effects to consider forhorizontal and vertical layout, so we'll tackle themseparately.