Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:33:25 PM

Appendix C. CSS1 Properties

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

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

The browsers listed are:

NN4

Netscape Navigator 4

IE4

Internet Explorer 4 (IE4.5 for Macintosh)

IE5

Internet Explorer 5

Op3

Opera 3.6

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

Y

Supported

N

Not Supported

P

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

Q

Quirky Support (close to the letter of the specification)

B

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

-

Not Applicable (browser doesn't exist)

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

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

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

Example

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

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

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

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

Example

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

Values

n/a

Default

n/a

Inherited

yes

Applies to

block

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

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

Example

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

Values

n/a

Default

n/a

Inherited

yes

Applies to

block

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

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

Example

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

Values

n/a

Default

n/a

Inherited

yes

Applies to

style rules

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

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

Example

A:link {color: blue;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

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

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

Example

A:visited {color: navy;}

Values

n/a

Default

n/a

Inherited

yes

Applies to

anchor elements with an HREF attribute

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

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

Example

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

Values

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

Default

refer to individual properties

Inherited

no

Applies to

all elements

Percentage values allowed on <background-position>.

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

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

Example

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

Values

scroll | fixed

Default

scroll

Inherited

no

Applies to

all elements

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

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

Example

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

Values

<color> | transparent

Default

transparent

Inherited

no

Applies to

all elements

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

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

Example

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

Values

<url> | none

Default

none

Inherited

no

Applies to

all elements

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

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

Example

BODY {background-position: top center;}

Values

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

Default

0% 0%

Inherited

no

Applies to

block-level and replaced

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

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

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

Example

BODY {background-repeat: no-repeat;}

Values

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

Default

repeat

Inherited

no

Applies to

all elements

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

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

Example

H1 {border: 2px dashed maroon;}

Values

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

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

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

This shorthand property defines the

This part will probably seem very familiar to those of you who have been fiddling with lists in HTML. In order to change the type of counter or bullet used for a list's items, you would use the list-style-type.

list-style-type

Values
width, color, and style of the bottom border of an element. The same caveats about border-style apply.

Example

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

Values

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

Default

not defined for shorthand properties

Inherited

no

Applies to

all elements

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

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

Example

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

Values

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

Default

medium

Inherited

yes

Applies to

all elements

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

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

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

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

Example

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

Values

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

Default

none

Inherited

no

Applies to

all elements



Library Navigation Links

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

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

H1 {color: red;}
H2 {color: maroon; background: white;}