Appendix C. CSS1 Properties

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

:visited

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

background

IE4 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

Applies to

all elements

Percentage values allowed on <background-position>.

background-attachment

IE4 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

Applies to

all elements

background-color

IE4 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

Applies to

all elements

background-image

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

Applies to

all elements

background-position

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

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-repeat

IE4 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

Applies to

all elements

border

IE4 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

Applies to

all elements

border-bottom

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

Applies to

all elements

border-bottom-width

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

Applies to

all elements

border-color

IE4 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

Applies to

all elements

border-left

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

Applies to

all elements

border-left-width

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

Applies to

all elements

border-right

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

Applies to

all elements

border-right-width

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

Applies to

all elements

border-style

IE4 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

Applies to

all elements

border-top

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

Applies to

all elements

border-top-width

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

Applies to

all elements

border-width

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

Applies to

all elements

clear

IE4 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

Applies to

all elements

color

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

display

IE4 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

Applies to

all elements

float

IE4 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

Applies to

all elements

font

IE4 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-family

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-size

IE4 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-style

IE4 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-variant

IE4 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-weight

IE4 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

height

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

Applies to

block-level and replaced

letter-spacing

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-height

IE4 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-style

IE4 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-image

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-position

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-type

IE4 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

margin

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

Applies to

all elements

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

margin-bottom

IE4 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

Applies to

all elements

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

margin-left

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

Applies to

all elements

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

margin-right

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

Applies to

all elements

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

margin-top

IE4 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

Applies to

all elements

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

padding

IE4 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

Applies to

all elements

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

padding-bottom

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

Default

0

Inherited

Applies to

all elements

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

padding-left

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

Default

0

Inherited

Applies to

all elements

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

padding-right

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

Default

0

Inherited

Applies to

all elements

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

padding-top

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

Default

0

Inherited

Applies to

all elements

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

text-align

IE4 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-decoration

IE4 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

Applies to

all elements

text-indent

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

Default

0

Inherited

yes

Applies to

block

Percentage values refer to parent element's width.

text-transform

IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 P/-

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

Example

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

Values

capitalize | uppercase | lowercase | none

Default

none

Inherited

yes

Applies to

all elements

vertical-align