background

NN 6 IE 4 CSS 1

---

Inherited: No

This is a shortcut attribute that lets you set up to five separate (but related) background-style attributes in one attribute statement. Values can be in any order, each one delimited by a space. Although the attribute is not officially available in Navigator 4, some combinations of values may work with it.

CSS Syntax

background: background-attachment || background-color || background-image || 
background-position || background-repeat

Value

Any combination of the five background-style attribute values, in any order. Any attribute not specified is assigned its initial value. See each attribute for details about the expected values.

Initial Value

None.

Example

body {background: url(watermark.jpg) repeat fixed}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.background

background-attachment

NN 6 IE 4 CSS 1

---

Inherited: No

When an image is applied to the element background (with the background-image attribute), the background-attachment attribute sets whether the image scrolls with the document. The image can remain fixed within the viewable area of the element (the viewport), or it may scroll with the element as content scrolls. During scrolling, a fixed attachment looks like a stationary backdrop to rolling credits of a movie.

CSS Syntax

background-attachment: fixed | scroll

Value

The fixed value keeps the image stationary in the element viewport; the scroll value lets the image scroll with the document content.

Initial Value

scroll

Example

body {background-attachment: fixed}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundAttachment

background-color

NN 4 IE 4 CSS 1

---

Inherited: No

Sets the background color for the element. Although it may appear as though a nested element's background-color attribute is inherited, in truth the initial value is transparent, which lets the next-outermost colored element show through whitespace of the current element.

CSS Syntax

background-color: color

Value

Any valid color specification (see description at beginning of the chapter) or transparent.

Initial Value

transparent

Example

.highlighter {background-color: yellow}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundColor

background-image

NN 4 IE 4 CSS 1

---

Inherited: No

Sets the background image (if any) for the element. If you set a background-color for the element as well, the color appears if the image fails to load; otherwise, the image overlays the color. Transparent pixels of the image allow a background color to show through. See also the background-attachment attribute.

CSS Syntax

background-image: uri | none

Value

To specify a URL, use the url( ) wrapper for the attribute value. You can omit the attribute or specify none to prevent an image from loading into the element's background.

Initial Value

none

Example

h1 {background-image: url(watermark.jpg)}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundImage

background-position

NN 6 IE 4 CSS 1

---

Inherited: No

Establishes the location of the left and top edges of the background image specified with the background-image attribute. The behavior of this attribute can be erratic in Internet Explorer 4 for the Macintosh.

CSS Syntax

background-position: [percentage | length] {1,2} | 
  [top | center | bottom] || [left | center | right]

Value

You can specify one or two percentages, which are the percentage of the block-level element's box width and height (respectively) at which the image (or repeated images) begins. If you supply only one percentage value, it applies to the horizontal measure, and the vertical measure is automatically set to 50%. Instead of percentages, you can specify length values (in the unit of measure that best suits the medium). You can also mix a percentage with a length. In lieu of the numerical values, you can create combinations of values with the two sets of constant values. Select one from each collection, as in top left, top right, or bottom center. Whenever you specify two values, they must be separated by a space.

Initial Value

0% 0%

Example

div.marked {background-image: url(watermark.jpg); 
    background-position: center top}

Applies To

Block-level and replaced elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundPosition

background-position-x, background-position-y

NN n/a IE 4 CSS n/a

---

Inherited: No

Establish the location of the left (x) or top (y) edges of the background image specified with the background-image attribute.

CSS Syntax

background-position-x: [percentage | length] | [left | center | right ]
background-position-y: [percentage | length] | [top | center | bottom]

Value

You can specify the percentage of the block-level element's box width or height (respectively) at which the image (or repeated images) begins. Instead of percentages, you can specify length values (in the unit of measure that best suits the medium). In lieu of the numerical values, you may use one axis-specific constant value per attribute.

Initial Value

0%

Example

div.marked {background-image: url(watermark.jpg); 
    background-position-x: center}

Applies To

Block-level and replaced elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundPositionX
[window.]document.getElementById("elementID").style.backgroundPositionY

background-repeat

NN 6 IE 4 CSS 1

---

Inherited: No

Sets whether a background image (specified with the background-image attribute) should repeat and, if so, along which axis. You can use repeating background images to create horizontal and vertical bands.

CSS Syntax

background-repeat: no-repeat | repeat | repeat-x | repeat-y

Value

With a setting of no-repeat, one instance of the image appears in the location within the element established by the background-position attribute (default is the top-left corner). Normal repeats are performed along both axes, but you can have the image repeat down a single column (repeat-y) or across a single row (repeat-x).

Initial Value

repeat

Example

body {background-image: url(icon.gif); background-repeat: repeat-y}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.backgroundRepeat

border

NN 6 IE 4 CSS 1

---

Inherited: No

This is a shorthand attribute for setting the width, style, and/or color of all four borders around an element in one assignment statement. Whichever attributes you don't explicitly set with this attribute assume their initial values. Numerous other attributes allow you to set the width, style, and color of individual edges or groups of edges, if you don't want all four edges to be the same.

Due to differences in the way browsers define their default behavior with regard to borders, every style sheet border rule should include the width and style settings. Failure to specify both attributes may result in the border not being seen in one browser or the other.

CSS Syntax

border: border-width || border-style || color

Value

For the border-width and border-style attribute values, see the respective attributes in this chapter. For details on the color value, see the section about colors at the beginning of this chapter.

Initial Value

None.

Example

p {border: 3px groove darkred}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.border

border-bottom, border-left, border-right, border-top

NN 6 IE 4 CSS 1

---

Inherited: No

All four attributes are shorthand attributes for setting the width, style, and/or color of a single border edge of an element in one assignment statement. Whichever attributes you don't explicitly set with this attribute assume their initial values.

CSS Syntax

border-bottom: border-bottom-width || border-bottom-style || color
border-left: border-left-width || border-left-style || color
border-right: border-right-width || border-right-style || color
border-top: border-top-width || border-top-style || color

Value

For the width and style attribute values, see the border-bottom-width and border-bottom-style attributes in this chapter. For details on the color value, see the section about colors at the beginning of this chapter.

Initial Value

None.

Example

p {border-bottom: 3px solid lightgreen}
p {border-left: 6px solid lightgreen}
p {border-right: 3px solid lightgreen}
p {border-top: 6px solid lightgreen}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottom
[window.]document.getElementById("elementID").style.borderLeft
[window.]document.getElementById("elementID").style.borderRight
[window.]document.getElementById("elementID").style.borderTop

border-bottom-color, border-left-color, border-right-color, border-top-color

NN 6 IE 4 CSS 2

---

Inherited: No

Each attribute sets the color of a single border edge of an element. This power is easy to abuse by mixing colors that don't belong together. See also the border-color attribute for setting the color of multiple edges in one statement.

CSS Syntax

border-bottom-color: color
border-left-color: color
border-right-color: color
border-top-color: color

Value

For details on the color value, see the section about colors at the beginning of this chapter.

Initial Value

None.

Example

p {border-bottom-color: gray}
div {border-left-color: #33c088}
p.special {border-right-color: rgb(150, 75, 0)}
h3 {border-top-color: rgb(100%, 50%, 21%)}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottomColor
[window.]document.getElementById("elementID").style.borderLeftColor
[window.]document.getElementById("elementID").style.borderRightColor
[window.]document.getElementById("elementID").style.borderTopColor

border-bottom-width, border-left-width, border-right-width, border-top-width

NN 4 IE 4 CSS 1

---

Inherited: No

Each attribute sets the width of a single border edge of an element. Note that Navigator 4's initial value is zero, which means that you must set the width for all border attribute settings if you expect to see the border in that browser. See also the border-width attribute for setting the width of multiple edges in one statement.

CSS Syntax

border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-top-width: thin | medium | thick | length

Value

Three constants—thin | medium | thick—allow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter).

Initial Value

medium (NN 6, IE); 0 (NN 4).

Example

h2 {border-bottom-width: 2px}
div {border-left-width: thin}
p.special {border-right-width: 0.5em}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottomWidth
[window.]document.getElementById("elementID").style.borderLeftWidth
[window.]document.getElementById("elementID").style.borderRightWidth
[window.]document.getElementById("elementID").style.borderTopWidth

border-collapse

NN 6 IE 5(Win) CSS 2

---

Inherited: Yes

Sets whether borders of adjacent table elements (cells, row groups, column groups) are rendered separately or collapsed (merged) to ignore any padding or margins between adjacent borders. A table set to the separate border model may also have its border-spacing and empty-cells style attributes set (if supported by the target browsers).

CSS Syntax

border-collapse: collapse | separate

Value

Constant values: collapse | separate.

Initial Value

separate

Applies To

The table element.

bottom

NN 6 IE 5 CSS 2

---

Inherited: No

The CSS specification calls for this attribute to define the position of the bottom edge of a positioned element's content (exclusive of borders and margins) relative to the bottom edge of the next outermost block content container. Of mainstream browsers, only IE 5 for Macintosh behaves this way. IE for Windows and Netscape 6 do something unexpected when the positioned element uses the root positioning context: instead of using the bottom of the document as the comparative edge, these browsers use the bottom of the browser window space (the viewport in CSS terminology). As a result, the precise bottom position of the element varies with the user's browser window size. This discrepancy makes it more practical to use the bottom property for a positioned element nested inside another positioned element. When the element is relative-positioned, the offset is based on the bottom edge of the inline location of where the element would normally appear in the content.

CSS Syntax

bottom: length | percentage | auto

Value

See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the height of the next outermost container. The setting of auto lets the browser determine the bottom offset of the element box on its naturally flowing offset within the containing box.

Initial Value

auto

Applies To

All positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.bottom

caption-side

NN 6 IE 5(Mac) CSS 2

---

Inherited: Yes

Positions the caption element above or below the tabular content of the enclosing table element (other values may not work in some browsers). This attribute supplants some deprecated align attribute settings of the caption element.

CSS Syntax

caption-side: top | bottom | left | right

Value

One of the four constant values: top | bottom | left | right.

Initial Value

top

Applies To

caption elements.

Object Model Reference

[window.]document.getElementById("elementID").style.captionSide

clear

NN 4 IE 4 CSS 1

---

Inherited: No

Defines whether a block-level element allows itself to be displayed in the same horizontal band as a nearby floating element, such as an image. Typically, another element in the vicinity has its float style attribute set to left or right. To prevent the current element from being in the same band as the floating block, set the clear attribute to the same side (left or right). If you aren't sure where the potential overlap might occur, set the clear attribute to both. An element with a clear attribute that is set to a value other than none is rendered at the beginning of the next available line below the floating element.

CSS Syntax

clear: both | left | none | right

Value

Any of the following constants: both | left | none | right.

Initial Value

none

Example

<img src="logo.gif" height="40" width="60" style="float: right">
<h1 style="clear: right">Giantco Corporation</h1>

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.clear

clip	NN 4 IE 4 CSS 2

---

Inherited: No

Defines a clipping region of a positionable element. The clipping region is the area of the element layer in which content is visible. For the best results in clipping content, wrap the content-holding element inside a div element with its clip attribute set to the desired region. Clipping may not work properly in Internet Explorer 4 for the Macintosh, but it is fine in Version 5. Also, when a clipped element is displayed at the very bottom of a page in Navigator 4, the browser window may not allow you to scroll to view the very bottom of the clipping region.

CSS Syntax

clip: rect(lengthTop lengthRight lengthBottom lengthLeft) | auto

Value

Extending to CSS2, the only shape recognized for the clip attribute is rect. Other shapes may be admitted in the future.

When specifying lengths for each side of the clipping rectangle, observe the clockwise order of values: top, right, bottom, left. See the discussion about length values at the beginning of this chapter. A value of auto sets the clipping region to the block that contains the content (a block that may extend in IE 4 to the width of the next outermost container, like the body element).

Initial Value

auto

Example

<span style="position: absolute; clip: rect(10px 110px 80px 10px)">
<img src="desk1.gif" height="90" width="120">
</span>

Applies To

Block-level, replaced, and positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.clip

color

NN 4 IE 4 CSS 1

---

Inherited: Yes

Defines the foreground text color of the element. For some graphically oriented elements, such as form controls, the color attribute may also be applied to element edges or other features. Such extracurricular behavior is browser-specific and may not be the same across browsers.

CSS Syntax

color: color

Value

See the discussion of color attribute values at the beginning of this chapter.

Initial Value

black

Example

th {color: darkred}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.color

content

NN 6 IE n/a CSS 2

---

Inherited: No

Defines the actual content or source of content to be displayed before and/or after the current element. In CSS jargon, this kind of content is called generated content. This attribute may be set only with the :before and :after pseudo-elements associated with a real element. For example, as a result of the following style sheet rule:

blockquote:after {content:"(Reprinted by permission.)"}

a permissions phrase is appended to the end of every blockquote element, although the content does not become a member of the document tree. HTML tags in the content text are not interpreted, but if the situation warrants it, an external document can be assigned to the content attribute.

CSS Syntax

content: string | uri | counter | attr(attrName) | open-quote | close-quote |
no-open-quote | no-close-quote

Value

Only the following value types or values are functional in Netcape 6: string, open-quote, close-quote, no-open-quote, and no-close-quote. The purpose of the "no" quote types is to let you specify the effect of a quote (as far as quote nesting goes) without displaying a quote symbol. Multiple space-delimited strings may follow the content: attribute name.

Another value (counter) is not yet supported by browsers, but its potential is significant for documents that would benefit from client-side section number generation. A CSS counter offers a way for a style sheet to control numbering schemes for sequences of elements (such as sections, illustrations, and the like). The assumption is that the numbering is not part of the actual content, but is determined solely by the rendered context of the element within the document. Therefore, if you remove a numbered paragraph from a document in the edit phase, the paragraph numbering of the document adjusts itself automatically when the page is rendered.

The basic operation of a counter entails assigning an identifier to it (thus allowing multiple counters to exist in the same document, such as one for sections, another for subsections). Other CSS attributes (counter-increment and counter-reset) require values that point to an identified counter to control the numbering sequence. The following style sheet rule inserts a section label and number in front of every h1 element, and increments the counter number each time the style is applied to an h1 element while the document renders:

h1:before {counter-increment:secNum; 
           content:"Section " counter(secNum) ". "}

When counters are implemented in mainstream browsers, they will provide substantial power to highly structured, long documents.

Initial Value

"" (empty string)

Example

p.note:before {content:"==>"}

Applies To

All elements plus a :before and/or :after pseudo-element.

counter-increment, counter-reset

NN n/a IE n/a CSS 2

---

Inherited: No

These attributes control the numbering sequence of a CSS counter used for generated content (see the content attribute). The counter-increment attribute sets the amount (and direction) of change each time the counter is accessed during rendering. The counter-reset attribute lets you set the counter to a specific number (default of zero).

CSS Syntax

counter-increment: counterID [ posOrNegInteger ] | none
counter-reset: counterID [ posOrNegInteger ] | none

Value

A counterID is an identifier assigned to a content:counter(counterID) style attribute. The optional integer value is space-delimited after the counterID. You can combine multiple counter IDs in the same style attribute by stringing together space-delimited pairs of ID and integer values.

Initial Value

none

Example

h1 {counter-reset:subSection}

Applies To

All elements.

cue	NN n/a IE n/a CSS 2

---

Inherited: No

For aural style sheets only, this attribute provides a shorthand for setting cue-before and cue-after attribute settings. A cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. Cue attributes are URIs to sound resources.

CSS Syntax

cue: cue-before || cue-after

Value

If there are two values, the first is applied to the cue-before attribute and the second to the cue-after attribute. If there is only one value, the same auditory icon is applied to both cue-before and cue-after.

Initial Value

none

Applies To

All elements.

cue-after, cue-before

NN n/a IE n/a CSS 2

---

Inherited: No

For aural style sheets only, a cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. The cue-before and cue-after attributes are URIs to sound files that are to be played before and after the content is rendered via text-to-speech or other aural medium.

CSS Syntax

cue-after: uri | none
cue-before: uri | none

Value

Any valid complete or relative URL (in CSS format) to a sound file in a MIME type supported by the browser. You may apply the same values to both attributes for the same style selector if it makes aural sense for the listener.

Initial Value

none

Example

li {cue-before: url(ding.wav); cue-after: url(dong.wav)}

Applies To

All elements.

direction

NN 6 IE 5 CSS 2

---

Inherited: Yes

Sets the direction of the flow of inline portions of content (such as text) and the order in which table cells are filled along a row. Analogous to the dir attribute of most elements, the direction style attribute lets you override the browser's default rendering direction for other languages or special content.

CSS Syntax

direction: ltr | rtl

Value

Either of two directional constants. The value ltr stands for left-to-right; rtl stands for right-to-left.

Initial Value

ltr

Applies To

All elements.

empty-cells

NN 6 IE n/a CSS 2

---

Inherited: Yes

Controls whether an empty td element shows its borders and background in a table. Surrounding cells don't change position when an empty cell is hidden. Instead, the cell is essentially transparent, allowing the table's background to show through in the space.

CSS Syntax

empty-cells: show | hide

Value

One of two constants: show | hide .

Initial Value

The CSS specification calls for a default value of show, but Netscape 6 renders as if the default is hide when running in quirks mode (i.e., specifying older DTDs in the DOCTYPE element).

Example

td {border: salmon inset 3px; empty-cells: hide}

Applies To

td elements.

float

NN 4 IE 4 CSS 1

---

Inherited: No

Determines on which side of the containing box the element aligns so that other content wraps around the element. When the attribute is set to none, the element appears in its source code sequence, and at most, one line of surrounding text content appears in the same horizontal band as the element.

Due to the prior reservation of float as a keyword in JavaScript, the attribute name is not available as a style object property name in object models that use JavaScript. Internet Explorer adopted the styleFloat property name; the W3C DOM and Netscape 6 use cssFloat.

CSS Syntax

float: alignmentSide | none

Value

An alignmentSide is one of the following constants: left | right.

Initial Value

none

Example

img.navButton {float: right}

Applies To

All elements except positioned elements (or generated content).

Object Model Reference

[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat

font	NN 6 IE 4 CSS 1

---

Inherited: Yes

This is a shorthand attribute that lets you set multiple font-related attributes with one assignment statement. Some browsers are more forgiving than others about required and optional values, but this attribute should at least specify the font-size and font face (either by font-family or CSS2FontConstant values) in that order. The order of other space-delimied value types is not critical. In CSS2, some additional short-circuit constants apply named system fonts that have fixed values for each of the font-related attributes.

CSS Syntax

font: font-style || font-variant || font-weight || font-size[/line-height] ||
font-family | CSS2FontConstant

Value

For syntax and examples of value types for font and line attributes, see the respective attribute listing. The construction with the forward slash before the line-height value allows the use of a second length value within the potentially long sequence of values for this attribute: the line-height length value must always accompany the required font-size value, separated by a forward slash.

The CSS2 font constants are as follows: caption | icon | menu | message-box | small-caption | status-bar. These constants refer to browser and operating system fonts used by the client. Their precise appearance is therefore different on different operating systems but consistent with the user's expectation for a particular type of font. In other words, these styles should be used when their function mirrors a system or browser function.

Initial Value

None.

Example

body {font: 12px serif}
h2 {font: bolder small-caps 16px "Lucida Console", Arial, sans-serif}
.iconCaption {font: 10px/1.1em caption}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.font

font-size-adjust

NN n/a IE n/a CSS 2

---

Inherited: Yes

Allows an element to preserve the x-height (measured in exes) of a "first choice" font when substituting fonts. The z-factor is a ratio of the em- to x-heights of a font. Because different fonts set to the same font size can look larger or smaller than neighboring fonts on a page set to the same size, the z-factor can be used to calculate the ratio and apply it to other fonts. Even though the resulting font size may be larger or smaller than the "first choice" font setting, the perceived size is much more accurate. This also tends to equalize the horizontal metrics of fonts so that word-wrapped lines break at the same place with different font families.

CSS Syntax

font-size-adjust: 0.47

Value

A number representing the aspect value of the preferred font (perhaps obtainable from the font maker) or none.

Initial Value

none

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontSizeAdjust

font-stretch

NN n/a IE n/a CSS 2

---

Inherited: Yes

Sets the rendered font to a letter-spacing relative of the specified font family. Version 6 browsers do not take it upon themselves to artificially condense or expand font family specifications.

CSS Syntax

font-stretch: stretchType | normal

Value

For an absolute size, one of the following constants: ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | extra-expanded | ultra-expanded. For a relative size, one of the following constants: narrower | wider.

Initial Value

normal

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontStretch

font-style

NN 4 IE 4 CSS 1

---

Inherited: Yes

Determines whether the element is rendered in a normal (Roman), italic, or oblique font style. If the font-family includes font faces labeled Italic and/or Oblique, the setting of the font-style attribute summons those particular font faces from the browser's system. But if the specialized font faces are not available in the system, the normal font face is usually algorithmically slanted to look italic. Output sent to a printer with such font settings relies on the quality of arbitration between the client computer and printer to render an electronically generated italic font style. Although personal computer software typically includes other kinds of font rendering under the heading of "Style," see font-stretch, font-variant, and font-weight for other kinds of font "styles."

CSS Syntax

font-style: fontStyle

Value

One of the following constants: normal | italic | oblique. Browsers tend to treat italic and oblique settings the same.

Initial Value

normal

Example

h2 em {font-style: italic}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontStyle

font-variant

NN 6 IE 4 CSS 1

---

Inherited: Yes

Determines whether the element should be rendered in all uppercase letters in such a way that lowercase letters of the source code are rendered in smaller uppercase letters. If a font family contains a small caps variant, the browser should use it automatically. More likely, however, the browser calculates a smaller size for the uppercase letters that take the place of source code lowercase letters. In practice, Internet Explorer for Windows prior to Version 6 renders the entire source code content as uppercase letters of the same size as the parent element's font, regardless of the case of the source code.

CSS Syntax

font-variant: fontVariant

Value

Any of the following constant values: normal | small-caps.

Initial Value

normal

Example

em {font-variant: small-caps}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontVariant

font-weight

NN 4 IE 4 CSS 1

---

Inherited: Yes

Sets the weight (boldness) of the element's font. CSS provides a weight rating scheme that is more granular than most browsers render on the screen, but the finely tuned weights may come into play when the content is sent to a printer. The scale is a numeric rating from 100 to 900 at 100-unit increments. Therefore, a font-weight of 100 is the least bold that can be displayed, whereas 900 is the boldest. A setting of normal (the default weight for any font) is equivalent to a font-weight value of 400; the standard bold setting is equivalent to 700. Other settings (bolder and lighter) let you specify a weight relative to the parent element's weight.

The CSS2 specification offers guidelines about how the weight values should correspond to font family names and internal characteristics of some font definition formats. For example, the OpenType font definition format provides slots for nine font weights. In this case, the numeric font-weight attribute values map directly to the weight definitions in that font. If the font family contains a face with a name that contains the word Medium and one labeled Book, Regular, Roman, or Normal, the Medium face is equated with a weight value of 500 (whereas the other is at 400). All font face names including the word Bold are equated with a weight of 700. For font families that don't have all nine weights assigned, the browser should do its best to interpolate, but it is very likely that some weight values generate fonts of the same weight as other values.

CSS Syntax

font-weight: fontWeight

Value

Any of the following constant values: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Initial Value

normal

Example

p em {font-weight: bolder}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontWeight

ime-mode

NN n/a IE 5(Win) CSS n/a

---

Inherited: No

Controls the presence of the Input Method Editor in IE for Windows for browser and system versions that support languages such as Chinese, Japanese, and Korean.

CSS Syntax

ime-mode: active | auto | disabled | inactive

Value

One of four constants: active | auto | disabled | inactive.

Initial Value

auto

Example

input {ime-mode: active}

Applies To

input and textarea elements.

Object Model Reference

[window.]document.getElementById("elementID").style.imeMode

layout-flow

NN n/a IE 5.5(Win) CSS n/a

---

Inherited: Yes

Intended primarily for languages that display characters in vertical sentences, this attribute controls the progression of content, left-to-right, or right-to-left. Microsoft recommends using the writing-mode attribute instead.

CSS Syntax

layout-flow: horizontal | vertical-ideographic

Value

One of two constants: horizontal | vertical-ideographic.

Initial Value

horizontal

Example

body {layout-flow: vertical-ideographic}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutFlow

layout-grid

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

This is a shorthand attribute that lets you set one or more layout grid attributes (layoutGridChar, layoutGridLine, layoutGridMode, and layoutGridType) with one assignment statement. These attributes are used primarily with Asian language content.

CSS Syntax

layout-grid: layout-grid-mode | layout-grid-type | layout-grid-line | 
layout-grid-char

Value

For syntax and examples of value types for font and line attributes, see the respective attribute listing.

Initial Value

both loose none none

Example

body {layout-grid: both fixed 14px 14px}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutGrid

layout-grid-char

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

Controls the size of Asian language character grid for block-level elements.

CSS Syntax

layout-grid-char: length | auto | none

Value

Length value as an absolute unit measure, or a percentage. Or one of the following constants: auto | none.

Initial Value

none

Example

body {layout-grid-mode:both; layout-grid-char: 14px}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutGridChar

layout-grid-line

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

Controls the line height of Asian language character grid for block-level elements.

CSS Syntax

layout-grid-line: length | auto | none

Value

Length value as an absolute unit measure, or a percentage. Or one of the following constants: auto | none.

Initial Value

none

Example

body {layout-grid-mode:both; layout-grid-line: 14px}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutGridLine

layout-grid-mode

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

Controls whether the Asian language character grid should be one- or two-dimensional.

CSS Syntax

layout-grid-mode: gridMode

Value

One of the following constants: both | char (for inline elements) | line (for block-level elements) | none.

Initial Value

both

Example

body {layout-grid-mode:both}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutGridMode

layout-grid-type

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

Controls how the layout grid responds to characters of varying width.

CSS Syntax

layout-grid-type: gridType

Value

One of the following constants: fixed | loose | strict.

Initial Value

fixed

Example

div.kor {layout-grid-type:strict}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.layoutGridType

layer-background-color, layer-background-image

NN |4| IE n/a CSS n/a

---

Inherited: No

These are Navigator 4-only attributes that allow a positioned element's background color and image to extend through padding, all the way to the border. Values are the same as for the CSS background-color and background-image attributes. See background-color, background-image, and padding.

left	NN 4 IE 4 CSS 2

---

Inherited: No

For positionable elements, defines the offset position of the left edge of an element's box (content plus left padding, border, and/or margin) relative to the left edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the left edge of the inline location of where the element would normally appear in the content.

CSS Syntax

left: length | percentage | auto

Value

See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the width of the next outermost container. The setting of auto lets the browser determine the left offset of the element box within the containing box by virtue of normal element flow. Navigator tends to push up against the left edge of the containing box, whereas Internet Explorer renders a bit of margin.

Initial Value

auto

Example

h1 {position: relative; left: 2em}
#logo {position: absolute; left: 80px; top: 30px}

Applies To

Positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.left

letter-spacing

NN 6 IE 4 CSS 1

---

Inherited: Yes

Defines the spacing between characters within an element. Browsers normally define the character spacing based on font definitions and operating-system font rendering. To override the settings, assign a length value to the letter-spacing attribute. A negative value tightens the spacing, but test the effect on the selected font for readability on different operating systems.

CSS Syntax

letter-spacing: length | normal

Value

See the discussion at the beginning of this chapter about length values. The best results use units that are based on the rendered font size (em and ex). A setting of normal is how the browser sets the letters without any intervention.

Initial Value

normal

Example

.tight {letter-spacing: -0.03em}
blockquote {letter-spacing: 1.1em}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.letterSpacing

line-break

NN n/a IE 5(Win) CSS n/a

---

Inherited: Yes

Controls line-breaking rules for Japanese text.

CSS Syntax

line-break: normal | strict

Value

One of the following constants: normal | strict.

Initial Value

normal

Example

p {letter-break: strict}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.lineBreak

line-height

NN 4 IE 4 CSS 1

---

Inherited: Yes

Sets the height of the inline box (the box holding one physical line of content). Under normal circumstances, the line-height of the tallest font in a line of text or the tallest object governs the line height for that content line. Mainstream browsers have come a long way since the Version 4 wrinkles that frequently made a visual mess out of mixed font sizes and line heights in the same block-level element.

CSS Syntax

line-height: normal | number | length | percentage

Value

A value of normal lets the browser calculate line spacing for the entire element, thus producing a computed value that can be inherited by nested elements. A number value (greater than zero) acts as a multiplier for the font-size of the current element. Therefore, if a nested element inherits the line-height multiplier from its parent, that multiplier is applied to the current element's font-size setting (the multiplier, not the computed value of the parent, is inherited). A length value assigns an actual value to the inline box height. And a percentage value is a multiplier applied to the font size of the current element. In this case, the computer value can be inherited by nested elements.

Initial Value

normal

Example

p {line-height: normal}    /* Browser default; actual value is  inheritable */
p {line-height: 1.1}       /* Number value; the number value is inheritable */
p {line-height: 1.1em}     /* Length value; the actual value is inheritable */
p {line-height: 110%}      /* Percentage value; percentage times font size */
                           /* is inheritable /*

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.lineHeight

list-style

NN 6 IE 4 CSS 1

---

Inherited: Yes

This is a shorthand attribute for setting up to three list-style attributes in one assignment statement. Whichever attributes you don't explicitly set with this attribute assume their initial values. These attributes define display characteristics for the markers automatically rendered for list items inside ol and ul elements.

CSS Syntax

list-style: list-style-type || list-style-position || list-style-image

Value

See the individual attribute entries for list-style-type, list-style-position, and list-style-image for details on acceptable values for each. You may include one, two, or all three values in the list- style attribute setting in any order you wish.

Initial Value

None.

Example

ul {list-style: square outside none}

Applies To

dd, dt, li, ol, and ul elements and any other element assigned the display:list-item style attribute.

Object Model Reference

[window.]document.getElementById("elementID").style.listStyle

list-style-image

NN 6 IE 4 CSS 1

---

Inherited: Yes

Provides the URL for an image that is to be used as the marker for a list item. Because this attribute can be inherited, a setting for an individual list item can override the same attribute setting in its parent.

CSS Syntax

list-style-image: none | uri

Value

For uri, supply any valid full or relative URL (in the CSS format) to an image file with a MIME type that is readable by the browser.

Initial Value

none

Example

ul {list-style-image: url(images/folder.gif)}
li.file {list-style-image: url(images/doc.gif)}

Applies To

dd, dt, li, ol, and ul elements and any other element assigned the display:list-item style attribute.

Object Model Reference

[window.]document.getElementById("elementID").style.listStyleImage

margin-bottom, margin-left, margin-right, margin-top

NN 4 IE 4 CSS 1

---

Inherited: No

All four attributes set the width of a single margin edge of an element. A margin is space that extends beyond the element's border and is not calculated as part of the element's width or height.

CSS Syntax

margin-bottom: marginThickness | auto
margin-left: marginThickness | auto
margin-right: marginThickness | auto
margin-top: marginThickness | auto

Value

Values for marginThickness can be lengths, percentages of the next outermost element size, or the auto constant.

Initial Value

0

Example

blockquote {margin-left: 20; margin-top: 10}
#narrowCol {margin-left: 30%; margin-right: 30%}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.marginBottom
[window.]document.getElementById("elementID").style.marginLeft
[window.]document.getElementById("elementID").style.marginRight
[window.]document.getElementById("elementID").style.marginTop

marker-offset

NN n/a IE n/a CSS 2

---

Inherited: No

Controls the space between list item markers (which occupy their own box in the CSS box model) and the box that contains the list item text. Requires that the list item elements be set to a display style marker.

CSS Syntax

marker-offset: length | auto

Value

A length value (see the discussion of length values at the beginning of this chapter), or the auto constant.

Initial Value

auto

Example

li:before {display:marker; marker-offset:4em}

Applies To

List elements set to marker display mode (generally with a :before or :after pseudo-class).

max-height, min-height

NN 6 IE (see text) CSS 2

---

Inherited: No

These attributes let you establish a maximum and/or minimum height for an element. You can bracket the permissible height of an element regardless of the height caused by the natural flow of the content.

When you set the max-height attribute of an element that has content that may extend beyond that maximum, you should also set the overflow style attribute to hidden so that excess content is cropped. Failure to do so causes the overflowing content to bleed into the succeeding elements' content. Netscape 6 supports both attributes for block-level and positioned elements.

Internet Explorer 6 for Windows supports only the min-height attribute, and is limited to td, th, and tr elements inside a table with its table-layout style attribute is set to fixed. This conflicts with the CSS2 specification, which explicitly excludes table-related elements from being influenced by these attributes. As such, min-height settings you make for td, th, or tr elements in IE 6 do not affect Netscape 6. IE 5 for Macintosh supports neither attribute.

CSS Syntax

max-height: length | percentage | none
min-height: length | percentage | none

Value

See the discussion of length values at the beginning of the chapter. The value may also be a percentage that is calculated relative to the element's container. A value of none removes all constraints, allowing the content to flow naturally.

Initial Value

none (max-width); none (min-width).

Applies To

See text.

Object Model Reference

[window.]document.getElementById("elementID").style.minHeight
[window.]document.getElementById("elementID").style.maxHeight

max-width, min-width

NN 6 IE n/a CSS 2

---

Inherited: No

These attributes let you establish a minimum and/or maximum width for an element. You can bracket the permissible width of an element regardless of the width caused by the natural flow of the content within a parent container.

CSS Syntax

max-width: length | percentage | none
min-width: length | percentage | none

Value

See the discussion of length values at the beginning of the chapter. The value may also be a percentage that is calculated relative to the element's container. A value of none removes all constraints, allowing the content to flow naturally.

Initial Value

none (max-width); none (min-width).

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.minWidth
[window.]document.getElementById("elementID").style.maxWidth

-moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright

NN 6 IE n/a CSS n/a

---

Inherited: No

Controls the radius of one border corner. Note that the value arrangement differs from the preliminary CSS3 corner-specific border-radius attribute value setup.

CSS Syntax

-moz-border-radius-bottomleft: radius 
-moz-border-radius-bottomright: radius 
-moz-border-radius-topleft: radius 
-moz-border-radius-topright: radius 

Value

See -moz-border-radius.

Initial Value

0

Example

div.bizarro {-moz-border-radius-topright:10%; -moz-border-radius-bottomright:10% }

Applies To

All elements.

-moz-opacity

NN 6 IE n/a CSS n/a

---

Inherited: No

Controls the level of opacity of the element. The lower the value, the more transparent the element becomes. This is the proprietary Mozilla version of the proprietary Microsoft opaque filter.

CSS Syntax

-moz-opacity: alphaValue

Value

The level of opacity is determined by a floating-point number between 0.0 and 1.0. A completely opaque rendering occurs at a value of 1.0. You may also use percentage values between 0% and 100%, but the proposed CSS3 recommendation for the opacity attribute calls for numbers only.

Initial Value

1

Example

div#watermark {-moz-opacity:0.4}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.MozOpacity

orphans

NN 6 IE 5(Mac) CSS 2

---

Inherited: Yes

Sets the minimum number of lines of a paragraph that must be visible at the bottom of a page where a page break occurs. See the widows attribute for lines to be displayed at the top of a page after a page break.

CSS Syntax

orphans: lineCount

Value

An integer of the number of lines.

Initial Value

2

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.orphans

outline

NN n/a IE 5(Mac) CSS 2

---

Inherited: No

This is a shorthand attribute for setting the width, style, and/or color of all four edges of an outline around an element in one assignment statement. Attributes that you don't explicitly set with this attribute assume their initial values.

An outline differs from a border in two primary ways. First, an outline does not occupy space in the CSS box model. Rather, the outline simply hovers atop the element, drawn just beyond the border rectangle. Second, CSS does not restrict an outline to be rectangular, allowing an outline to follow the irregular outline of an unjustified paragraph, for example. So far, however, the implementation in IE 5 for the Macintosh draws only rectangular outlines.

CSS Syntax

outline: border-color || border-style || outline-width

Value

See the respective attributes in the following sections.

Initial Value

None.

Example

blockquote {outline: darkred ridge 5px}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.outline

outline-color

NN n/a IE 5(Mac) CSS 2

---

Inherited: No

Controls the color of an outline around an element.

CSS Syntax

outline-color: color

Value

A CSS color value. One value controls all sides of the outline. The CSS specification also calls for a constant called invert, which performs an algorithmic inversion of the background color, but this value is not supported in IE 5 Mac.

Initial Value

In IE 5 for Macintosh, black. The CSS 2 specification suggests invert as a default.

Example

h2 {outline-color: salmon}
div {outline-color: rgb(0,0,255)}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.outlineColor

outline-style

NN n/a IE 5(Mac) CSS 2

---

Inherited: No

Controls the style of an outline around an element. These are the same edge designs as border styles.

CSS Syntax

outline-style: borderStyle

Value

Style values are constants that are associated with specific ways of rendering border lines. See border-style for a list and illustration. One value controls all sides of the outline.

Initial Value

none

Example

h2 {outline-style: solid}
div {outline-style: groove}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.outlineStyle

outline-width

NN n/a IE 5(Mac) CSS 2

---

Inherited: No

Controls the thickness of an outline around an element. To prevent surrounding content from rendering under the outline, you should consider adding a margin around the element.

CSS Syntax

outline-width: thin | medium | thick | length

Value

Three constants—thin | medium | thick—allow the browser to define exactly how many pixels are used to show the outline. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter). One value controls all sides of the outline.

Initial Value

medium

Example

h1 {outline-style: ridge; outline-width: 5px}
div {outline-style: solid; outline-width: 2px}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.outlineWidth

overflow

NN 6 IE 4 CSS 2

---

Inherited: No

Defines how the element treats content with rendered dimensions that exceed the specified height and/or width of the container. Except for some types of content that demand a fixed width (a pre element, for instance), the default behavior of an element is to respect the width attribute setting and handle the issue of overflow in the height of the element. Assigning the overflow property to the body element in an attempt to control the display of scroll bars is risky business for cross-browser compatibility. Test your overflow code thoroughly on IE for Windows (in backward- and standards-compatible modes), IE for Macintosh, and Netscape 6.

A setting of visible causes the containing block to expand to allow the full width (if fixed) and height of the content to be displayed. If borders, margins, and padding are set for the element, they are preserved around the expanded content block. If the element has height and width specified, as well as a background image or color, and if the content extends beyond the specified size, the results vary with browser family. IE for Windows expands the height of the background to accommodate the content, pushing succeeding content downward to accommodate the overflowing content. IE for Macintosh and Netscape 6 constrain the background rectangle to the specified size, but the content bleeds beyond the rectangle, and overlaps content that comes after the overflowing element. Because this is the default value for the overflow style property, it is best to specify some other overflow value (or clipping rectangle for a positioned element) whenever you restrict the size of an element.

A setting of hidden forces the block to observe its height and width settings, potentially causing the content to be clipped by the size of the block. Borders and padding are preserved, but margins may be lost along the edges that clip the content. No scrollbars appear with this value.

A setting of scroll usually generates a set of horizontal and vertical scrollbars inside the rectangle of the content block, whether they're needed or not. The bars become active only if the content actually requires scrolling in any direction.

A setting of auto should generate scroll bars only if the content in the block requires it. In practice, browsers tend to add only a vertical scrollbar when the content is text that can adjust to the specified width of its container.

CSS Syntax

overflow: overFlowType

Value

Any of the following constants: auto | hidden | scroll | visible.

Initial Value

visible

Example

div.aside {position: absolute; top: 200px; left: 10px; height: 100px; 
width: 150px; overflow: scroll}

Applies To

Block-level, replaced, and positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.overflow

overflow-x, overflow-y

NN n/a IE 5(Win) CSS n/a

---

Inherited: No

Defines how the element treats content with rendered dimensions that exceed the specified width (x) or height (y) of the container. The operation of this IE/Windows attribute is the same as the regular overflow attribute, but each one operates along a single axis. This is particularly helpful if you want to have only a vertical or only a horizontal scrollbar appear with an element. See the overflow attribute discussion.

CSS Syntax

overflow-x: overFlowType
overflow-y: overFlowType

Value

Any of the following constants: auto | hidden | scroll | visible.

Initial Value

visible

Example

body {overflow-x:hidden; overflow-y: scroll}

Applies To

Block-level, replaced, and positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.overflowX
[window.]document.getElementById("elementID").style.overflowY

padding-bottom, padding-left, padding-right, padding-top

NN 4 IE 4 CSS 1

---

Inherited: No

All four attributes set the padding width of a single side of an element. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size.

CSS Syntax

padding-bottom: paddingThickness
padding-left: paddingThickness
padding-right: paddingThickness
padding-top: paddingThickness

Value

Values for paddingThickness can be lengths or percentages of the next outermost container size.

Initial Value

0; IE for Windows specifies a default value of 1 for td and th elements.

Example

blockquote {padding-left: 20; padding-top: 10}
#narrowCol {padding-left: 30%; padding-right: 30%}

Applies To

All elements (IE 5 for Macintosh, IE 5.5 for Windows, and Netscape 6); body, caption, div, iframe, marquee, table, td, textarea, tr, and elements (IE 5 and earlier for Windows).

Object Model Reference

[window.]document.getElementById("elementID").style.paddingBottom
[window.]document.getElementById("elementID").style.paddingLeft
[window.]document.getElementById("elementID").style.paddingRight
[window.]document.getElementById("elementID").style.paddingTop

Notes

Be aware that Navigator 4 adds its own three-pixel-wide transparent spacing around all four edges of an element. If the element has padding defined for it, the extra spacing is placed outside of the padding. An element's border then appears outside of the extra spacing. This means the background image or color of a Navigator element can't run all the way to the borders, and you must use the otherwise undocumented layer-background-color or layer-background-image style attributes.

page	NN 6 IE 5(Mac) CSS 2

---

Inherited: Yes

Lets you connect a block-level element to an @page rule through an identifier assigned to the rule. The implementation of @page rules is still sketchy, but the page attribute, whose value is the desired @page rule's identifier, is in place for later adoption.

CSS Syntax

page: pageRuleIdentifier | auto

Value

The pageRuleIdentifier value is the name given to an @page rule in the same document.

Initial Value

auto

Example

table#results {page: printTable}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.page

page-break-after, page-break-before

NN 7 IE 4 CSS 2

---

Inherited: No

Defines how content should treat a page break around an element when the document is sent to a printer. Page breaks are not rendered in the visual browser as they may be in word processing programs; on screen, long content flows in one continuous scroll.

Proper handling of pages for printers relies on the CSS2 concept of the page box, which is a rectangular region that ultimately reaches a printed page. Page break style attributes help the browser control the precise content of each page box. Without any assistance (or with the auto setting), the browser divides pages for printing much as it has in the past by doing a best-fit for the content to fill up as much of each page as there is space for it.

To force a page break above an element, associate a page-break-before:always style setting with the element. Similarly, to force a break after an element, use page-break-after:always. For example, if you want a special class of br elements to break after them, you could set up a class selector style rule as follows:

<style type="text/css">
br.pageEnd {display:block; page-break-after: always}
</style>

Then, whenever you want to force a page break in the document, include the following tag:

<br class="pageEnd">

Attribute settings for left and right assume that the browser is equipped to detect left-facing from right-facing pages for double-sided printing (as specified in CSS2). Because you are likely to set different margins for each side of the gutter, indicating how pages break to start a new section requires forcing sufficient page breaks to plant new sections on the desired page. For example, if you want each h1 element to begin on a right-facing page, you would set a page break style for it as follows:

h1 {page-break-before: right}

This attribute forces the browser to at least one and at most two page breaks before the h1 element to make sure it starts on a right-facing page. When the browser generates a second page break for the left or right value, it means that the browser generates a blank page box for the second page break.

Implementation of these attributes is limited. Although working to some degree in IE 4, you should target IE 5 or later. Even so, the only supported settings for recent IE versions and Netscape 7 are always and auto (or you can assign an empty string via script to operate the same as the CSS avoid value).

CSS Syntax

page-break-after: breakType
page-break-before: breakType

Value

Internet Explorer 4 recognizes four constant values: always | auto | left | right (but treats left and right the same as always). CSS2 adds avoid, which urges the browser to avoid breaking the page in that element if at all possible.

Initial Value

auto

Example

div.titlePage {page-break-before: always; page-break-after: always}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.pageBreakAfter
[window.]document.getElementById("elementID").style.pageBreakBefore

page-break-inside

NN n/a IE n/a CSS 2

---

Inherited: Yes

Defines whether a printed page break is allowed within an element. Especially useful to define a container of multiple block elements that you want to keep printed on the same page.

CSS Syntax

page-break-inside: breakType

Value

One of two constant values: avoid | auto.

Initial Value

auto

Example

div.together {page-break-inside: avoid}

Applies To

Block-level elements.

pause

NN n/a IE n/a CSS 2

---

Inherited: No

For aural style sheets, this is a shorthand attribute for setting both pause-after and pause-before attributes in one statement. You may supply one or two values for this attribute.

CSS Syntax

pause: time | percentage {1,2}

Value

This attribute accepts one or two values, depending on the values you want to assign to the pause-before and pause-after settings. A single value of the pause attribute is applied to both pause-before and pause-after. When two values are supplied, the first is assigned to pause-before; the second is assigned to pause-after.

Values for time are floating-point numbers followed by either the ms (milliseconds) or s (seconds) unit identifier. These settings are therefore absolute durations for pauses. Values for percentage are inversely proportional to the words-per-minute values of the speech-rate attribute setting. Because the speech-rate controls how long it takes for a single word (on average), a pause setting of 100% means that a pause has the same duration as a single word; a setting of 50% would be a pause of one-half the duration of speaking a single word.

Initial Value

Depends on the browser.

Applies To

All elements.

pause-after, pause-before

NN n/a IE n/a CSS 2

---

Inherited: No

For aural style sheets, these set the duration of a pause after or before the current element. You can assign both attributes to the same element to designate pauses before and after the element is spoken.

CSS Syntax

pause-after: time | percentage 
pause-before: time | percentage

Value

Values for time are floating-point numbers followed by either the ms (milliseconds) or s (seconds) unit identifier. These settings are therefore absolute durations for pauses. Values for percentage are inversely proportional to the words-per-minute values of the speech-rate attribute setting. Because the speech-rate controls how long it takes to speak a single word (on average), a pause setting of 100% means that a pause has the same duration as a single word; a setting of 50% would be a pause of one-half the duration of speaking a single word.

Initial Value

Depends on the browser.

Applies To

All elements.

pitch

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets the average pitch frequency of the voice used for text-to-speech output.

CSS Syntax

pitch: frequency | frequencyConstant

Value

A frequency value is any positive floating-point number followed by either the Hz (Hertz) or kHz (kiloHertz) units, as in 500Hz or 5.5kHz. Alternatively, you can use any of the following constant values: x-low | low | medium | high | x-high. As of the CSS2 working draft available for this book, no specific frequency values had yet been assigned to these constants.

Initial Value

medium

Applies To

All elements.

pitch-range

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets the range over which the average pitch frequency of a text-to-speech voice varies.

CSS Syntax

pitch-range: number

Value

Any positive number or zero. A value of 0 is a monotone voice; a value of 50 should offer a normal range; values above 50 might sound animated.

Initial Value

50

Applies To

All elements.

play-during

NN n/a IE n/a CSS 2

---

Inherited: No

For aural style sheets, this sets the sound-mixing properties of a background sound with a text-to-speech rendering of the element's content.

CSS Syntax

play-during: uri [mix | repeat] | auto | none

Value

The uri value is a link to the sound file to be used as background sound (if desired). Optionally, you can specify that the background sound of the parent element's play-during attribute is started and mixed with the current element's background sound. If the length of the background sound is shorter than it takes for the element's text to be spoken, the repeat constant tells the browser to repeat the sound until the spoken text has finished. A value of auto means that the parent element's sound continues to play without interruption. And a value of none means that no background sound (from the current or parent element) is heard for this element.

Initial Value

auto

Applies To

All elements.

quotes

NN 6 IE 5(Mac) CSS 2

---

Inherited: Yes

Controls the characters to be generated for open and close quote symbols in text. The assumption is that the quote symbols are not part of the content, but are generated by the browser because of contextual clues (such as surrounding a quote with a q element). This attribute must be used with the content attribute, which, with the help of the :before and :after pseudo-classes, determines where the open-quote and end-quote symbols appear:

CSS Syntax

quotes: openString closeString [nestedOpenString nestedCloseString] | none

Value

One or two pairs of quoted symbols. The optional second pair defines the symbols used for a nested quote symbol. Entity characters are not permitted.

Initial Value

Depends on browser and system language.

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.quotes

Notes

Support in browsers isn't as good as indicated above. IE 5 for the Macintosh doesn't genuinely respond to the quotes attribute, but does substitute standard two-level quotes for the content attribute. Netscape 6 and 7 implement only the first level of quotes. Symbol characters outside the ASCII set may not align with the characters you put into the source code with your text editor. Verify the results before deploying this attribute.

richness

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets the brightness (stridency) of the voice used in text-to-speech rendering of the element.

CSS Syntax

richness: number

Value

A positive floating-point number to represent how strident the voice sounds. A value of 50 is normal. Lower values produce a softer, mellower voice; higher values produce a louder, more forceful voice.

Initial Value

50

Applies To

All elements.

right

NN 6 IE 5 CSS 2

---

Inherited: No

For positionable elements, this defines the position of the right edge of an element box (content plus padding, border, and/or margin) relative to the right edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the right edge of the inline location of where the element would normally appear in the content.

CSS Syntax

right: length | percentage | auto

Value

See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the width of the next outermost container. Note, however, that the results you get may seem like the inverse of what you expect: a value of 0% means that the right edge is flush against the right edge of the positioning context, whereas a value of 100% could push the element completely out of view to the left. The setting of auto lets the browser determine the right offset of the element box on its naturally flowing offset within the containing box.

Initial Value

auto

Applies To

Positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.right

size	NN n/a IE n/a CSS 2

---

Inherited: n/a

Sets the size and/or orientation of a page box. Intended primarily for printed page formatting, the settings may not affect how content is cropped or oriented on the video screen. This attribute is set within an @page declaration.

CSS Syntax

size: [length {1,2}] auto | portrait | landscape

Value

If you specify one or two length values, the page box becomes absolute regardless of the paper sheet size; without specific length values, the page box is sized relative to the selected paper sheet size. If you supply only one length value, it is applied to both the width and height of the page box; if there are two values, the first controls the page box width and the second controls the page box height. Bear in mind that printers frequently impose a minimum margin around the rendered page box. Even when the size attribute is set to auto, you can add more breathing space around the page box by adding a margin attribute to the @page declaration.

Initial Value

auto

Example

@page{size: landscape}

Applies To

Page context.

speak

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this specifies whether a browser equipped for text-to-speech should speak the element's content, and if so, whether the speech should be as words or spelled out character-by-character.

CSS Syntax

speak: speechType

Value

Three possible constant values: none | normal | spell-out. A value of none means that speech is turned off. The browser does not delay over the duration of the speech and any specified pauses (see the volume:silent attribute value). A value of normal turns on speech and reads the text as words. A value of spell-out turns on speech and reads the content letter-by-letter (certainly applicable to abbr and acronym elements).

Initial Value

normal

Applies To

All elements.

speak-header

NN n/a IE n/a CSS 2

---

Inherited: Yes

For text-to-speech-capable browsers, this specifies whether the browser calls out the name of a table cell's header prior to the cell's value every time that value is read aloud or just one time for all adjacently read cells that share the same header (e.g., navigating downward through a table column).

CSS Syntax

speak-header: headerFrequency

Value

Two possible constant values: once | always.

Initial Value

once

Applies To

th elements.

speak-numeral

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets whether numbers are to be read as individual numerals ("one four two") or as full numbers (e.g., "One hundred forty-two"). The language used for the spoken numbers is set with the element's lang attribute.

CSS Syntax

speak-numeral: numeralType

Value

Two possible constant values: digits | continuous.

Initial Value

continuous

Applies To

All elements.

speak-punctuation

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets whether punctuation symbols should be read aloud ("period") or interpreted as the language's natural pauses for the various symbols.

CSS Syntax

speak-punctuation: punctuationType

Value

Two possible constant values: code | none. A value of code means that a symbol name is spoken when the symbol is encountered in element text.

Initial Value

none

Applies To

All elements.

stress

NN n/a IE n/a CSS 2

---

Inherited: Yes

For aural style sheets, this sets the amount of stress (inflection) in the spoken voice.

CSS Syntax

stress: stressLevel

Value

A stressLevel value is any positive floating-point number with no unit appended. A value of 50 is normal.

Initial Value

50

Applies To

All elements.

table-layout

NN n/a IE 5(Win) CSS 2

---

Inherited: No

Determines whether the browser uses computed heights and widths of the entire table's data to begin rendering the table or relies on the table element's size attributes and uses the first row's cell widths to begin rendering table content. When the attribute is set to auto, the browser must load all of the table cells and their content before the first row of data can be rendered, causing a brief (but perhaps imperceptible) delay in drawing the table. Setting the value to fixed allows table rendering to begin sooner, which is helpful for large tables. If content in succeeding rows is wider than the fixed column size, the content is usually clipped unless you set the overflow style attribute to visible (but that will likely make a visual jumble in adjacent cells).

CSS Syntax

table-layout: layoutType

Value

Two possible constant values: auto | fixed.

Initial Value

auto

Applies To

table elements.

text-align

NN 4 IE 4 CSS 1

---

Inherited: Yes

Determines the horizontal alignment of text within an element. This attribute is inherited, so it can be set for a container to impact all nested elements, such as a p element within a div element. Values of center, left, and right are supported across the board. The value of justify is not a CSS requirement; its support in Version 4 browsers is spotty (in which case it may be treated as left). But it works in IE 5 or later and Netscape 6.

CSS Syntax

text-align: alignment

Value

One of the four constants: center | justify | left | right.

Initial Value

Depends on browser language.

Example

p.rightHand {text-align: right}
blockquote {text-align: justify}

Applies To

Block-level elements, but right-alignment also works in text-type input and textarea elements in IE 5 and later for Windows and Netscape 6.

Object Model Reference

[window.]document.getElementById("elementID").style.textAlign

text-align-last

NN n/a IE 5.5(Win) CSS n/a

---

Inherited: Yes

Controls the horizontal alignment of the last line of text within an element's box.

CSS Syntax

text-align-last: alignment

Value

One of the following constants: auto | center | justify | left | right. The value of auto picks up the inherited text-align attribute.

Initial Value

auto

Example

blockquote {text-align-last: center}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textAlignLast

text-autospace

NN n/a IE 5(Win) CSS n/a

---

Inherited: No

Controls the spacing between ideographic (typically Asian languages) and nonideographic characters.

CSS Syntax

text-autospace: spacingType

Value

One of the following constants: ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space | none.

Initial Value

none

Example

div {text-autospace: ideograph-numeric}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textAutospace

text-decoration

NN 4 IE 4 CSS 1

---

Inherited: No

Specifies additions to the text content of the element in the form of underlines, strikethroughs, overlines, and (in Navigator and CSS) blinking. You may specify more than one decoration style by supplying values in a space-delimited list. Thankfully, mainstream browsers ignore the blink setting. Navigator 4 does not recognize the overline decoration.

Text decoration has an unusual parent-child relationship. Values are not inherited, but the effect of a decoration carries over to nested items. Therefore, unless otherwise overridden, an underlined p element underlines a nested span element within, for example.

CSS Syntax

text-decoration: decorationStyle | none

Value

In addition to none, any of the following four constants: blink | line-through | overline | underline, but browsers generally ignore blink.

Initial Value

none

Example

div.highlight {text-decoration: underline}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textDecoration
[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline

text-indent

NN 4 IE 4 CSS 1

---

Inherited: Yes

Sets the size of indenting of the first line of a block of inline text (such as a p element). Only the first line is affected by this setting. A negative value can be used to outdent the first line, but be sure the text does not run beyond the left edge of the browser window or frame.

CSS Syntax

text-indent: length | percentage

Value

See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the width of the next outermost container.

Initial Value

0

Example

body {text-indent: 2em}
p.firstGraphs {text-indent: 0}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textIndent

Notes

Internet Explorer 4 for the Macintosh does not respond to the text-indent attribute properly.

text-kashida-space

NN n/a IE 5.5(Win) CSS n/a

---

Inherited: Yes

For Arabic text in a block-level element with text alignment style set to justify, controls the ratio of kashida expansion to white space expansion.

CSS Syntax

text-kashida-space: length | percentage

Value

See the discussion about length values at the beginning of this chapter. You may also specify a percentage value, which is calculated based on the width of the next outermost container.

Initial Value

0%

Example

div#col1 {text-align:justify; text-justify:newspaper; text-kashida-space:5%}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textKashidaSpace

text-overflow

NN n/a IE 6(Win) CSS n/a

---

Inherited: No

Controls whether text content that overflows a fixed box space should display an ellipsis ( . . . ) at the end of the line to indicate more text is available. The element should also have its overflow style attribute set to hidden.

CSS Syntax

text-overflow: overflowType

Value

One of two constants: clip | ellipsis.

Initial Value

clip

Example

td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

Applies To

Block-level elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textOverflow

text-shadow

NN n/a IE n/a CSS 2

---

Inherited: No

Sets shadow effects for the text of the current element. A text element can have more than one shadow, and each shadow can have its own color, vertical offset, horizontal offset, and blur radius. Each shadow exists in its own minilayer, stacked with the first shadow specification at the bottom of the heap. Values for each shadow are space-delimited, and multiple shadow value sets are comma-delimited.

CSS Syntax

text-shadow: [color] horizLength vertLength blurRadiusLength,
    [[color] horizLength vertLength blurRadiusLength] | none

Value

If you omit the color attribute value, the shadow uses the element's color property value (which may, itself, be inherited). The color attribute can be placed before or after whatever length values are set for a shadow. See the discussion of color values at the beginning of this chapter. Values for horizLength and vertLength are length values (see the beginning of this chapter), and their sign indicates the direction the shadow offset takes from the element text. For the horizLength value, a positive value places the shadow to the right of the element; a negative value to the left. For the vertLength value, a positive value places the shadow below the text; a negative value places it above. A blur radius is a length value (see the beginning of this chapter) that specifies the extent of the shadow from the edge of the text characters.

Initial Value

none

Applies To

All elements.

text-transform

NN 4 IE 4 CSS 1

---

Inherited: Yes

Controls the capitalization of the element's text. When a value other than none is assigned to this attribute, the cases of all letters in the source text are arranged by the style sheet, overriding the case of the source text characters.

CSS Syntax

text-transform: caseType | none

Value

A value of none allows the case of the source text to be rendered as-is. Other available constant values are capitalize | lowercase | uppercase. A value of capitalize sets the first character of every word to uppercase. The values lowercase and uppercase render all characters of the element text in their respective cases.

Initial Value

none

Example

h2 {text-transform: capitalize}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textTransform

text-underline-position

NN n/a IE 5.5(Win) CSS n/a

---

Inherited: Yes

Controls whether an underline (i.e., an element with a text-decoration style set to underline) is rendered above or below the text. Applicable primarily to Asian languages rendered in vertical columns.

CSS Syntax

text-underline-position: positionType | none

Value

IE 5.5 recognizes two constant values: above | below. IE 6 adds the values auto and auto-pos (which appear to do the same thing). The default value also changed between versions, from below to auto. In IE 6, the auto value underlines vertical Japanese text "above" (to the right) of the characters.

Initial Value

none

Example

h2 {text-underline-position: above}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.textUnderlinePosition

top	NN 4 IE 4 CSS 2

---

Inherited: No

For positioned elements, this defines the position of the top edge of an element box (content plus top padding, border, and/or margin) relative to the top edge of the next outermost block content container.

CSS Syntax

top: length | percentage | auto

Value

See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the height of the next outermost container. The setting of auto lets the browser determine the top offset of the element box on its naturally flowing offset within the containing box.

Initial Value

auto

Example

h1 {position:relative; top:2em}
#logo {position:absolute; left:80px; top:30px}

Applies To

Positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.top

unicode-bidi

NN 6 IE 5 CSS 2

---

Inherited: No

Controls the embedding of bidirectional text (such as a mixture of German and Arabic), in concert with the direction style attribute.

CSS Syntax

unicode-bidi: embeddingType

Value

One of the following constant values: bidi-override | embed | normal.

Initial Value

normal

Example

div.multiLingual {unicode-bidi:embed}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.unicodeBidi

vertical-align

NN 6 IE 4 CSS 1

---

Inherited: No

There are two sets of values for this attribute, and they affect different characteristics of the inline element to which they are applied. The major point of reference is that an inline element has its own line box to hold its content. Two values, top and bottom, affect how the text is rendered within the line box. The settings bring the text flush with the top or bottom of the box, respectively.

Application of this attribute is not limited to inline spans of text. Images and tables can use this style attribute. All other settings for vertical-align affect how the entire element box is vertically positioned relative to text content of the parent element. The default value, baseline, means that the line box is positioned such that the baselines of both the line box's text (or very bottom of an element such as an img) and the parent text are even. That's how an em element can be its own line box element but still look as though it flows on the same baseline as its containing p element. The rest of the attribute's constant values (and percentage or length) determine where the element's line box is set with respect to the parent line. A positive percentage or length value positions the element the stated distance above the baseline; a negative value positions the element below the baseline. Percentages are calculated with respect to the line height.

CSS Syntax

vertical-align: vertAlignType | length | percentage

Value

Two constant values apply to alignment of text within the element itself: bottom | top.

Six constant values apply to alignment of the element's line box relative to the surrounding text line (of the parent element): baseline | middle | sub | super | text-bottom | text-top. A value of baseline keeps the baseline of the element and parent element line even. A value of middle aligns the vertical midpoint of the element with the baseline plus one-half the x-height of the parent element's font. Values of sub and super shift the element into position for subscript and superscript but do not by themselves create a true subscript or superscript in that no adjustment to the font size is made with this attribute. A value of text-bottom aligns the bottom of the element with the bottom of the font line of the parent element text; a value of text-top does the same with the tops of the element and parent.

Initial Value

baseline

Example

span.sup {vertical-align: super; text-size: smaller}

Applies To

Inline elements only.

Object Model Reference

[window.]document.getElementById("elementID").style.verticalAlign

visibility

NN 4 IE 4 CSS 2

---

Inherited: Yes

Controls whether the element is rendered on the page. An element hidden via the visibility attribute preserves space in the document where the element normally appears. If you prefer surrounding content to cinch up the space left by a hidden element, see the display attribute. The CSS specification suggests that the value of collapse, when applied to table row-related elements, should cinch up the table, but no mainstream browser does that yet.

The visibility attribute is inherited when its value is set to inherit. This setting means that if the parent is hidden, the child is also hidden. But, by setting the child's visibility attribute to visible, you can still keep the parent hidden while showing the child independently.

CSS Syntax

visibility: visibilityType

Value

One of the constant values: collapse | hidden | inherit | visible. IE for Windows does not recognize the collapse value. Navigator 4 allows visibility only of positioned elements.

Initial Value

visible

Example

#congrats {visibility: hidden}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.visibility