Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 21st of October 2014 08:19:34 PM

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>

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

Web-based applications are similar to app servers, except for one thing: Web-based applications don't have client apps, instead they use web browsers on the client side. They generate their front ends using HTML, which is dynamically generated by the web-based app. In the Java world, Servlets are best suited for this job.

Web-based apps might themselves rely on another app server to gather information that is presented on the client web browser. Also, you can write Servlets that get information from remote or local databases, XML document repositories and even other Servlets. One good use for web-based apps is to be a wrapper around an app server, so that you can allow your customers to access at least part of the services offered by your app server via a simple web browser. So web-based apps allow you to integrate many components including app servers, and provide access to this information over the web via a simple web browser.

Web-based apps are very deployable, since they don't require special Java VMs to be installed on the client side, or any other special plug ins, if the creator of the web-based app relies solely on HTML. Unfortunately, this can restrict the level of service that can be offered by a web-based app when compared to the functionality offered by custom clients of an app server, but they are a good compromise when it comes to providing web-based access to your information. In fact, in a real world scenario, both a web-based app and app server may be used together, in order to provide your customers access to their information. In an Intranet setting, you might deploy the clients that come with the app server, and in an Internet setting it would be better to deploy a web-based app that sits on top of this app server, and gives your customers (relatively) limited access to their data over the web (via a simple web browser).

Web-based apps and app servers integrate very well, and this is another reason why Java and XML make a powerful combination for developing systems that give your customers access to their information from anywhere, using any browser over the web. In the future, you can imagine various different web-based apps servicing different kinds of clients, e.g. web browsers on desktops, web browsers on PDAs, and web browsers on all kinds of different consumer electronics devices. By keeping your information structured in a pure way (by using XML), and by allowing access to this information through app servers, you can write many different web-based apps that render this information by customizing it uniquely for each different device that is allowed access to this information. This is more a more scalable solution that storing all this information in web pages, even if these web pages are dynamically generated. So you can have one app server that stores all the data in XML format. You can write a web-based app (which sits on top of this app-server) that allows PalmPilots to access this information over the web. You can write another web-based app (that also sits on top of the same app server) that allows conventional web browsers to access this information over the web. XML and Java have the potential to make this truly platform independent and device independent computing a reality.

API Coverage per category

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.

text-decoration is not inherited, theB element has a default value ofnone. Therefore, the B elementhas no underline. Of course, there is veryclearly a line under the B element, so it seemssilly to say that it has no underline. Still, it doesn't. Whatyou see under the B element is theparagraph's underline, which is effectively"spanning" the B element. This can bemade more explicit by altering the styles for the boldface element calculated value, which is usually, but not quite always, zero. (Fortunately, the circumstances under which auto becomes something other than zero are very well-defined, and are discussed in detail in the next chapter.)

Finally, it's possible to set a percentage value for margin. The details of this type of value will be discussed in a later section.

block-level elements, which just generate boxes and usuallydon't let anything coexist next to them. That's all welland good, of course (even if it does ignore floats), but look insidea block-level element such as a paragraph. There are all these linesof text, and we may well ask, "How did they get there? Whatcontrols their arrangement? How can I affect that?"

In order to understand how lines are generated, let's firstconsider the case of an element containing one very long line oftext, as shown in Figure 8-45. Note that we've