I Hsual Styles for HTML

Pocket Reference

OREILLY* Eric A. Meyer

 CSS
Pocket Reference

Eric A. Meyer

4
O'REILLY
Beijing • Cambridge •Farnham •Koln • Paris • Sebastopol • Taipei • Tokyo
CSS Pocket Reference
by Eric A. Meyer

Copyright © 2001 O'Reilly & Associates, Inc. All rights reserved.

Printed in the United States of America.

Published by O'Reilly & Associates, Inc., 101 Morris Street,

Sebastopol, CA 95472.

Editor: Lorrie Lejeune

Production Editor: Mary Anne Weeks Mayo

Cover Designer: Ellie Volckhausen

Printing History:

May 2001: First Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the

O'Reilly logo are registered trademarks of O'Reilly & Associates,
Inc. The association between the image of a salmon and the topic
of Cascading Style Sheets is a trademark of O'Reilly & Associates,
Inc.

Many of the designations used by manufacturers and sellers to

distinguish their products are claimed as trademarks. Where those
designations appear in this book, and O'Reilly & Associates, Inc.
was aware of a trademark claim, the designations have been
printed in caps or initial caps.

While every precaution has been taken in the preparation of this

book, the publisher assumes no responsibility for errors or
omissions, or for damages resulting from the use of the
information contained herein.

J.).' [6 02]

(C)
 Table of Contents

Introduction 1

Rule Structure 1

Adding Styles to HTML 2

Selectors 3

Specifying Values 5

Style Precedence 8

Classification of Elements 11

Boxes and Borders 11

CSS Property Reference 14

CSS Support Charts 53

Pseudo-Classes and Pseudo-Elements 56

The Cascade 58
Font Properties 60
Color and Background Properties 64

Text Properties 68
Box Properties 72

Classification Properties 86

Units 90
 Digitized by the Internet Archive
in 2012

http://archive.org/details/csspocketreferenOOmeye
 CSS Pocket Reference

Introduction
Cascading Style Sheets (CSS) is the W3C standard for con-
trolling the visual presentation of web pages. After a short
introduction to the key concepts of CSS, this book provides
an alphabetical reference to all the CSS1 properties, fol-
lowed by a chart that details web browser support for CSS.

Rule Structure
A style sheet consists of one or more rules that describe
how page elements, which typically correspond to particu-
lar HTML tags, should be displayed. Every rule in CSS has

two parts, the selector and the declaration. Figure 1 illus-

trates the structure of a rule. The selector, on the left side
of the rule, specifies the parts of the document to which
the style should be applied. In this case, Hi elements are
selected. The declaration, on the right side of the rule, is a
combination of a CSS property and a value for that proper-
ty. In Figure 1, the declaration says that this rule will cause
parts of the document to have a color of purple.

selector declaration
I
I

HI I {color: purple;}

property value

Figure 1. Rule structure

The is always enclosed in
declaration portion of a CSS rule
curly braces. Each property, which represents a particular
Stylistic parameter, is separated from its value by a colon

( : Property names in CSS aren't case-sensitive. A declara-

).

tion can contain several property /value pairs; each such

pair must be terminated with a semicolon (;).

Legal values for a property are defined by the property.

Some some take color names,
properties take length values,
and others have a predefined list of accepted values. Some
properties even accept multiple keywords, separated by
spaces, that together form the value. The "CSS Property Ref-
erence" section provides details on the acceptable values
for CSS1 properties

Adding Styles to HTML

Style rules can be applied to HTML documents in three
ways:

Inline styles
Style information can be specified for an individual ele-
ment using the style attribute within that element's
HTML tag. The value of the style attribute is a standard
style declaration without the curly braces:

<Hl STYLE="color: purple; font-size: 20pt;">

A large purple heading</Hl>

Embedded style sheets

A style sheet can be embedded at the top of an HTML
document using the STYLE which must be
element,
placed within the HEAD portion of the document:

<HTMLxHEADxTITLE>Stylin!</TITLE>
<STYLE TYPE="text/css">
Hi {color: purple;}
P {font-size: lOpt; color: gray;}
</STYLE>
</HEAD>

</HTML>

CSS Pocket Reference

External style sheets

Style rules can be stored In .1 separate text document

thai Is referenced from an HTML document In oik
tw<> ways. The first waj creates .1 link to the external
style sheet using the link tag In the hfau of the
document:
<HEAD>
<LINK REL="stylesheet" TYPE="text/css"
HREF="mystyles.css">
</HEAD>

The other teehnique is to import an external style- sheet

into the STYLE element using the ^import directive:

<HEAD>
<STYLE TYPE="text/css">
@import url(mystyles.css);
</STYLE>
</HEAD>

The @import directive can be combined with other style

rules in a STYLE element, as long as the ^import line
comes before any style rules.

Selectors
Selectors, which identify the elements to which a style
applies, come in a variety of forms:

Element selectors
The simplest kind of selector refers to an HTML ele-
ment by its tag:
Hi {color: purple;}

Element selectors can be grouped into a comma-sepa-

rated list, so that a single property applies to all the
listed elements:

Hi, H2, P {color: purple;}

Selectors
 : . :

Contextual selectors
These selectors specify style attributes for HTML ele-
ments based on the context in which they appear. This
contextual selector specifies that bold text within a list-

item is purple:

LI B {color: purple;}

With a contextual selector, the individual selectors are

separated by whitespace.

Class selectors
Specific HTML elements can be grouped into a class
using the CLASS attribute:

<Hl CLASS="warning">Danger!</Hl>
<P CLASS="warning">Be careful. .</?>

To specify a style for elements of a particular class,

append the class name to the HTML selector, separated
by a period ( . )

Hi. warning {color: red;}

To apply a style to all elements of a class, regardless of

the actual element, omit the tag name
.warning {color: red;}

ID selectors
The HTML ID attribute assigns a unique identifier to a
particular HTML element:

<P ID="first-para">In the beginning. . .</P>

To apply a style to the identified element, simply specify

the ID value, preceded by a pound sign (#):

#first-para {font-weight: bold;}

Psuedo-class and pseudo-element selectors

CSS1 defines some pseudo-classes of the anchor tag (A)

to support different styles for various link states. For

example, the : visited pseudo-class selects links that
have been visited:

A:visited {color: red;}

CSS Pocket Reference

 -

Similarly, pseudo-elements are subparts ol existing

elements for which styles can be specified
P:first-letter {color: red;}

Specifying Values
Proper syntax is required for specifying certain kinds oi CSS
property values. In CSS1, there are five kinds oi piOJ
values: keywords, length values, percentage- values, colors.
and URLs. The "CSS Property Reference" section lists the
acceptable values for CSS1 properties

Keywords
Keywords are explicit values, such as dotted for border
style and xx- large for font -size. Like property names, key-
words aren't case-sensitive.

Length Values

A length value is expressed as a positive or negative num-

ber—although some properties accept only positive
numbers—followed immediately (no spaces) by a two-let-
ter abbreviation that specifies the units being used. Note
that a value of need not be followed by units.
(zero)
Length units are divided into two types: absolute units,
which are always measured in the same way, and relative
units, which are measured in relation to other things. CSS
supports the following absolute units:

Inches (in)
As you might expect, these are the inches you find on a
ruler in the United States. The mapping from inches to a
monitor or other display device is usually vague at best,
since most systems have no concept of the relation of
their display area to real-world measurements such as
inches. Thus, inches should be used with extreme cau-
tion in screen design.

Specifying Values
Centimeters (cm)
The centimeters you find on rulers the world over.
There are 2.54 centimeters to an inch, and one centime-
ter equals 0.394 inches. Centimeters have the same

mapping issues as inches.

Millimeters (m)
There are 10 millimeters to a centimeter, and thus 25.4
millimeters to an inch; 1 millimeter equals 0.0394 inches.
Millimeters have the same mapping issues as inches and
centimeters.

Points (pt)
Points are a standard typographical measure used by
printers, typesetters, and, more recently, word-process-
ing programs. There are 72 points to an inch, so a
capital letter of text set to 12 points should be one-sixth
of an inch tall. For example, {font-size: I8pt;} is equiv-
alent to {font- size: 0.25in;}, assuming proper mapping
of lengths to the display environment.

Picas (pc)
Picas are another unit of typographical measure. A pica
is equivalent to 12 points, which means there are 6 picas
to an inch. Thus, a capital letter of text set to 1 pica
should be a sixth of an inch tall. For example, {font-
size: l.5pc;} should set text to be the same size as the
previous point declaration, assuming proper mapping.

CSS supports the following relative units:

Em -height (em)
This refers to the em-height of a given font. In CSS, the
em-height is set to be equivalent to the height of the
character box for a given font. Ems can set relative sizes
for fonts; for example, l.2em is the same as saying 120%.

X-beigbt(ex)
The x-height of the font describes the height of any low-
er-case character that doesn't have an ascender (i.e.. "d")

or a descender (i.e.. "p"). The majority of fonts don't

CSS Pocket Reference

 Include information about theii x height so most br
era approximate It (badfy I i»\ simpl i
be
equal to o.sem. The exi epti( m is I] hi< h
attempts to determine the actual \ height «>f .1 font b)
bitmapping an "\ and counting pixels'

Pixels (px)
\ pixel is a small onscreen box defined rathei abstractly
by CSS. in ess terms, pixel is defined to be about the
.1

size required to yield 90 pixels per inch. Most bio*

ignore this in favor ol simply addressing the pixels on
the monitor. Scaling factors are brought into play when
printing, although this can't he relied on.

Percentage Values

A percentage value is specified as a positive or negative-

number followed by a percent (%) sign and is always com-
puted relative to another value. For example, {line-height:
120%} sets the separation between lines to 120% of the cur-
rent line height.

Colors

With CSS, there are five ways to specify color values. Four
of them involve determining your own mix of red, green,
or blue beams; the fifth uses keywords:

XRRGGBB
The hex-pair notation familiar to traditional HTML
authors. In this format, the first pair of digits corre-
sponds to the red setting, the second pair to green, and
the third pair to blue. Each pair is in hexadecimal nota-
tion in the range 00 to FF. Thus, "pure" blue is #0000FF,
"pure" red is #FF0000, and so on.
MGB
A shorter form of the six-digit notation. In this format,
each digit is replicated to arrive at an equivalent six-dig-
it value. Thus, #F8C becomes #FF88CC.

Specifying Values
igb (rrr.rr%,ggg.gg%,bbb.bb%)
Specifies RGB values in the range 0% to 100%, with deci-
mal values allowed (e.g., 75.5%). Thus, the value for
black is rgb(0%,0%0%); 'pure" blue is rgb(0%,0%,100%).

igb(rrr,ggg,bbb)
Specifies RGB values in the range to 255- Not coinci-
dental ly, this range is the decimal equivalent of 00 to FF
in hexadecimal. In this format, "pure" green is

rgb(0, 255,0), and white is rgb(255,255,255).

keyword
One of 16 recognized keywords based on the original
Windows VGA colors: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow. Browsers may recognize other key-
words, but these aren't (as of this writing) found in any
specification and aren't guaranteed to work consistently
between browsers or indeed from version to version in
a single browser.

URLs
URLs aren't often used in style sheets, but when they are,
they have the following format:

url(wrl)
Points to a file, such as a graphic. CSS defines URLs to
be relative to the style sheet, but Navigator 4.x inter-
prets URLs relative to the document being styled. Thus,
absolute URLs are recommended over relative URLs.

Style Precedence
A single HTML document can import multiple external style
sheets, use an embedded style sheet, and specify inline

styles. In addition, various style rules can seemingly con-

flict with each other. CSS uses rules based on document
structure, inheritance, specificity, and a cascade order to
resolve these conflicts.

CSS Pocket Reference

The elements in an HTML document form .1 ft

hierarchy with the HTMI element at the top, the HEAI

body elements under It, and elements sin h as hi and ;

under the body branch, in this structure, elements lowei In

the tree arc descendants <>i theif ancestors highei In the
tree. Contextual selectors depend on these structural rela
tionships to operate properly.

( ^s uses inheritance, which relies on ancestoi descendant

relationships, to apply style rules in a document When .1

style is applied to a specified element, the style is also

applied to the element's descendants, unless there- is .1

more specific style that applies. Note, however, that certain

style properties aren't inherited, as detailed in the

Property Reference" section.

Specificity Calculations

Specificity describes the relative weights of various rules. In

CSS, more specific rules take precedence over less specific
rules. The following chart shows the components that con-
tribute to the specificity value:

Selector Type Specificity

Element selector 0,0,1

Class and 0,1,0

pseudo-class
selector

ID selector 1,0,0

! important Undefined, but higher than the other types

of selectors; if two important rules apply to
an element, order sorting can determine
which rule actually applies

Specificity values are cumulative. Thus, a selector with two

element selectors and a class selector has a specificity of
(0,1,2), while one element selector, a class selector, and an
ID selector add up to (1,1,1). (The values are separated
with commas to keep the actual specificity clear.)

Style Precedence
 }

Specificity works left to right. Thus, a selector with eleven

element selectors (0,0,11) is of lower specificity than a sin-
gle class selec tor (0,1,0).

The important rule can be used to make a particular style

!

more important than other styles of the same specificity:

Hi {color: gray ! important;

The ! important must go at the end of the declaration, right

before the semicolon.

The Cascade
The cascade order provides a set of rules for resolving con-
flicts between different style sheets. Styles with more
weight (those defined at a more specific level) take prece-
dence over styles with lower weight. The following steps
constitute the cascade:

1. Find all declarations that contain a selector that matches

a given element.

2. Sort by explicit weight all declarations applying to given

element. Those rules marked ! important are given higher
weight than those that aren't. Also son by origin all

declarations applying to a given element. There are

three origins: author, reader, and user agent (browser).
Under normal circumstances, the author's styles over-
ride the reader's styles. Important author styles win out
over important reader styles in CSS1, but in CSS2, impor-
tant reader styles are stronger than any other styles.

Either author or reader styles override user agent styles.

3. Sort by specificity all declarations applying to a given

element. Those elements with a higher specificity have
more weight than those with lower specificity.

I. soil by order all declarations applying to a given

element. The later a declaration appears in the style
sheet or document, the more weight it's given. Declara-
tions that appear in an imported style sheet come before

10 CSS Pocket Reference

 nil declarations within the stylesheet thai Imports them
and declarations within STYLI attributes come latei than
those in the document s eml >edda I
st

Classification of Elements
in CSS, elements are grouped into three typ

Block-level dements
Elements such as paragraphs, headings, lists, tables,
divs, and Replaced elements, such as images and
body.
form inputs, can be block-level elements but usually
elements are displayed on
aren't. In general, block-level

a lineby themselves, beginning on a new line and fon

ing any element after them to do the same. Block-level
elements can be children only of other block-level
elements.

Inline elements
Elements such as the anchor element (A), EM, SPAN, and
most replaced elements, such as images and form
inputs. Inline elements don't force a line break before or
after the element. They can be children of any other
block, inline, or list-style element.

List-item elements
Elements that in HTML include only the LI element.
These are specially defined to have presentation aspects
such as a marker (a bullet, letter, or number) and, if
within an ordered list, a sense of numerical order. Thus,
list-items within such a list can be automatically num-
bered, based on their context within the document.

Boxes and Borders

Allelements in CSS generate a rectangular box called the
element box. This box describes the amount of space an
element and its properties occupy. Figure 2 shows the

Classification of Elements 11
various components of an element's displayed box. In addi-
tion, the following rules apply:

• The background of an element (color or image) extends

to the outer edge of the border, thus filling the content
area and the padding.

• Only the margins, height, and width may be set to auto.

The margins can be given negative lengths, but height
and width can't.
• The padding and borders default to (zero) and can't
be set to negative lengths.

top outer edge

top margin

— top border —
top padding

top inner edge

S s
§«- width •

HI
II I
I
I

bottom inner edge

bottom padding

— bottom border —
bottom margin

bottom outer edge

Figure 2. Box model details

Inline Formatting

All elements have a line- height, which has a great deal to

do with how inline elements are displayed. The height of a
line of text is calculated using the following terms:

Content area
The box defined by the font-size of each piece of text
(whether in an element or not)

12 CSS Pocket Reference

 i

Half-leading
The distance determined i>\ the value <>f line-height.
where the half-leading equals << font-size -
Line-heigl
2).

Inlinebox
The box defined by subtracting the hall leading from the
top and bottom of the content area; foi ,m\ giver p
of text, the height of the Inline box is always equal to
the value of line-height for that same text.

Line box
The actual box that is stacked below the previous line
box; this bounds the top of the highest inline- box and
the bottom of the lowest inline box in the line

For each piece of text, an inline box is generated, using the

content-area and the half-leading to arrive at its final height.

The inline boxes are then aligned according to the value of

vertical-align for each. Once this is done, the line box is
determined. Figure 3 shows the inline box model in more
detail.

|
line-height\of 60%

half-leading

^superscript^
text with and some! £>Hj text

Figure 3- Inline box model details

Float Behavior

Floating allows an element to be positioned against the left

or right border, with the text flowing around it. A floated

element is placed according to the following rules:

Boxes and Borders 13

1. The left (or right) outer edge of a floated element may
not be to the left (or right) of the inner edge of its
parent element.

2. The left edge of a floated element must

(or right) outer
be to the edge of
right (or left) of the right (or left) outer
a left-floating (or right-floating) element that occurs
earlier in the document's source, unless the top of the
later element is below the bottom of the former.

3. The right outer edge of a left-floating element may not

be to the right of the left outer edge of any right-floating
element to its right. The left outer edge of a right-
floating element may not be to the left of the right outer
edge of any left-floating element to its left.
4. A floating element's top may not be higher than the
inner top of its parent.

5. A floating element's top may not be higher than the top

of any earlier floating or block-level element.

6. A floating element's top may not be higher than the top

of any line box with content that precedes the floating
element.

7. A left (or right) floating element that has another floating

element to its left (or right) may not have its right outer
edge to the right (or left) of its containing block's right
(or left) edge.

8. A floating element must be placed as high as possible.

9. A left-floating element must be put as far to the left as

possible, a right-floating element as far to the right as

possible. A higher position is preferred to one that is

further to the right or left.

CSS Property Reference

This reference lists all CSS1 properties, CSS1 pseudo-ele-
ments and psuedo-classes, and special declarations.
Information about each property includes the property

14 CSS Pocket Reference

 S

name; its value, it applicable; whethei the property is Inhei

Ited; htmi. elements to which the propeit) applies;
browser support; description .1 ol how the property n
and examples ol how it's used

The browser support chart shows how ess \& supported In

the most popular browsers on the Windows and Ma< intosh
platforms. The browsers are Internet Explore] 1

5, and 5.5), Netscape Navigator (Versions 1 and 6), and

( )pera I Versions 3 and 1 \. 1 [ere is the < 1 <ie

/ Supported

/ Not supported
P Partial support (some values are supported, souk- aren't)

B Buggy support (anything from a mangled display in the

browser window to a browser crash)

Q Quirky support (browser is technically compliant but

may not act as expected)

- Not applicable (browser doesn't exist)

:active

Inherited: Yes

Applies to: anchor elements with an HREF attribute

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / B / / /
I
Mac / / - / / - - \

Under CSS1, this pseudo-class applies to hyperlinks but not named

anchors. It sets the styles to be used at the moment a hyperlink is
selected (e.g., whileit's being clicked), and so active is the CSS :

replacement for the ALINK attribute on the BODY element in HTML-*.

In CSS2, other elements can use active, but the specification :

doesn't say what they are, and no user agent is known to support
:active on any element other than a hyperlink.

: active 15
Examples:

Aiactive {color: red; background: yellow;}

A. external: active {text-decoration: underline
overline;}

:first-letter

Inherited: Yes

Applies to: Block elements

Support: IE4 IE5 IE55 NN4 NN6 6p3 0p4

i
Win X X / / / / /
\
Mac / / - X / - "

Applies styles to the first letter of an element. This pseudo-class

can generate drop-cap effects, among other things. The range of
properties that can be used with first -letter is limited to:
:

text-decoration
text-transform
text-shadow
line-height
vertical-align (if float is none)
float
clear
Any font properly

Any color or background property

Any margin, padding, or border property

IE3 incorrectly applies : first -letter styles to the entire element.

Examples:

Hl:first-letter {font-size: 125%;}

P:first-letter {color: purple;}

:firsMine

Inherited: Yes

Applies to: Block elements

16 CSS Pocket Reference

Support: IE4 IE5 IE55 NN4 NN6 Op3 0p4
Win X X / X / / /
Mac X / X /

Applies styles to the first line oJ an element. The styles arc applied
even if the window is Is simply restyled to encom-
resized; the texl
pass only the element. This can be used to emulate
first line of the
common typographic effects such as larger text in the first line Of a
change of color. The range of properties that can be used with
: first-line is limited to:

• word-spacing
• letter-spacing
• text-decoration
• text-transform
• text-shadow
• vertical-align
• clear
• Any font property

• Any color or background property

IE3 incorrectly applies : first-line styles to the entire element.

Examples:

P:first-line {color: red;}

P.lead:first-line {font-size: 150%; font-style:
italic;}

{important

Inherited: Yes

Applies to: Style rules

Support: IE4 IE5 1E55 NN4 NN6 0p3 0p4

Win • / / X / / /
Mac X / - X / - -

Style declaration is made important, thereby raising its weight in

the cascade.Important declarations override all others. Under

CSS1, important author styles override all reader styles, even
important ones. In CSS2, this is reversed, so that important reader
styles always override the author's styles, important or otherwise.

{important 17
Examples:

Hi {color: maroon important;} !

P. warning {color: rgb(lOO%,20%,20%); font-weight: bold

!important;}
/* font-weight is marked important; color is not */

:link

Inherited: '
fes

Applies to: Anchor elements with an HREF attribute

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac / / - • / - -

This pseudo-class is similar to the HTML attribute Alink. It applies

to hyperlinks but not named anchors. Thus, in HTxML documents,
this pseudo-class may be applied only to A elements with an HREF
attribute. :link sets the styles for a hyperlink that points to a URI
thai hasn't yet been visited (i.e., isn't listed in the browser's
history).

Examples:

A:link {color: blue;}

A.navigation:link {color: maroon;}

:visited

Inherited: Yes

Applies to: Anchor elements with an HREF attribute

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / B / / '
Mac / / X / -

This pseudo-class is similar to the HTML attribute vlink. It applies

to hyperlinks but not named anchors. Thus, in HTML
documents,
this pseudo-class may be applied only to A elements with an HREF
attribute. : visited sets the styles for a hyperlink that points to a
URI that has already been visited (i.e.. is listed in the browser's
history).

18 CSS Pocket Reference

Examples:

A:visited {color: navy;}

A.help:visited {color: gray;}

background

Values:

background-color background- image

\
\ background -repeat |
|

|
background-attachment
|
background- posit ion
|
|

Default: Refer to individual properties

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P / / P / P P

Mac X / P / - -

A shorthand way of expressing the various background properties

using a single rule. Use of this property is encouraged over he- t

other background properties because it's more widely supported

and doesn't take as long to type. However, note that using this
shorthand property sets background-related property values
all
(e.g., the repeat, position, and so on) to their defaults
if they aren't

explicitly declared. Thus the following two rules have the same
appearance:
background: yellow;
background: yellow none top left repeat;

Furthermore, these can override previous declarations made with

more specific background properties. For example, consider the
following rules:

Hi {background-repeat: repeat-x;}
Hi, H2 {background: yellow url(headback.gif);}
In this case, the repeat value for both Hi and H2 elements is set to
the default of repeat, overriding the previously declared value of
repeat-x. Note that percentage values are allowed for the
background-position value.
Navigator 4.x is legendary- for its inability to correctly render back-
grounds. If there's no border around an element, the background
is visible only behind the text of the element, instead of
throughout the entire content-area and padding. Unfortunately, if a
border is added, there will be a transparent gap between the

background 19
content-area and the border itself. This isn't the padding, and
there's no way to get rid of the gap.

Examples:

BODY {background: white url(bg41.gif ) fixed center

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

background-attachment

Values: scroll 1 fixed

Default: scroll

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 |

Win / / / X / / /
Mac / / - X / - - *

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. Its theoretically possible

to create aligned backgrounds in multiple elements using this
property; see Chapter 6 of Cascading Style Sheets: The Definitive
Guide (O'Reilly & Associates) for more details.

Examples:

BODY {background-attachment: scroll;}

DIV.fixbg {background-attachment: fixed;}

background-color

Values: color 1 transparent

Default: transparent

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / B / / /
Mac • / - B • -
;

20 CSS Pocket Reference

 }

Sets t Ik* background cold of an element ih<- cola Rib the

content area and padding and extends to the outei i

element's bordei it the bordei is broken Into pk hashed

or double). the background ihould be visible between the ;

oi the border. Not every usei agem understands thi

sour- i.ikc the background to the Innei edge oi the bordei (
>r to
tlu- midpoint of the- border's width

Navigator on applying the value transparent to the

«.x Insists
parent of an element, not the element itself This can have the
Incorrect effect of punching "holes" In the background oi the
parent clement. Opera 4 has a bug that slums up <>nl\ when .1

background has been repeated, and the rest <>f the background of
the element is transparent (either by default or when explicitly
declared). Scrolling the element offscreen and then bringing ku k it

can cause "holes'' to be punched through the repeated images o(

ancestor elements, thus creating visual anomalies

Examples:

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

background-image

Values: url I none

Default: none

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac / / - / / - -

Sets an image to be the background pattern. Depending on the

value of background-repeat, the background image may tile indef-
initely, only along one axis, or not at all. The starting position of
the tiling is defined by the value of background-position. Any
image the browser can render can be used.

Examples:

BODY {background-image: url(bg4l.gif);}

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

background-image 21
background-position

Values:

[percentage length ]{l,2}

1 1 [top 1 center 1 bottom ] 1 1

[left center
1 right 1
]

Default: 0% 0%

Inherited: No
Applies to: Block elements and replaced elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac / / X /

background image (defined by the

Sets the starting position of a
value of background-image), background-position sets 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, thus allowing (for
example) an image to be centered by declaring its position to be
50% 50%. Percentage values also refer to the size of the element
itself as well as the size of the origin image. See Chapter 6 of

Cascading Style Sheets.- The Definitive Guide for more details. When
percentage or length values are used, the first is always the hori-
zontal position, and the second the vertical. It's possible to mix
length and percentage units, but keywords (e.g., top) can't be
mixed with either length or percentage units. If only one value is
given, it while the missing value is
sets the horizontal position,
assumed to be either center or 50%. Negative values are permitted.
A background image can be positioned outside the element's
content area. In this case, only the portion inside the content area
is displayed.

Examples:

BODY {background-position: top center;}

TD.navbar {background-position: right;}
PRE {background-position: lOpx 50%;}

background-repeat

Values: repeat I repeat-x I repeat-y I no-repeat

Default: repeat

Inherited: No

22 CSS Pocket Reference

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P / / P / / /
Mac / / B •

Sets the repeat background Image Note thai thi

style foi .1

related values cause the Image repeal In both directions akx

spe< ified axis; for example, repeat -x auses tiling to both th<
1

and the left, but not up 01 down. The repeating ol a

Image begins with the origin image, whose position Is deflrx
the value <>i background-position.

ilv» Win repeats onl\ down and to the left Foi example ."peat-x
causes an image to tile from the origin image ' ( >
the right '

the left.

Examples:

BODY {background-repeat: no-repeat;}

H2 {background-repeat: repeat-x;}
UL {background-repeat: repeat-y;}

border

Values: border-width I I border-style I I color

Default: n/a

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / P / P /
Mac P / - P / - -

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 results in no border being visible, since the
default value for border- style is none.

Opera doesn't apply border styles to table elements, which is the

reason for the P rating. IE4 and Win/IE5 don't apply borders to
inline elements, which is the reason for those P ratings.

border 23
Examples:

Hi {border: 2px dashed olive;}

A:link {border: blue solid lpx;}
P. warning {border: double 5px red;}

border-bottom

Values: border-bottom-width 1 1 border-style 1 1 color

Default: n/a

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / X / p /
Mac P / X / - I

Defines the width, color, and style of the bottom border of an

element. The usual caveats about border- style apply.

Opera doesn't apply border styles to table elements, which is the

reason for the P rating. IE4 and IE5/Win don't apply borders to
inline elements, which is the reason for those P ratings.

Examples:

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

A:active {border-bottom: purple 2px dashed;}

border-bottom-width

Values: thin I medium I thick I length

Default: medium

Inherited: No
Applies to: All elements

Support: JE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / /
Mac P / B /

Sets the width of the bottom border of an element. Negative length

values aren't permitted. The usual caveats about border- style
apply.

24 CSS Pocket Reference

With block elements, Navigatoi visible b< I

whin no border-style is set (the default should In- no b

and doesn't set borders or .ill sides when lungs get .1 1

really ugly with inline elements; you must avoid lnlin<

borders a riting foi NN4 \SA and 11
11 V In •••
trj

borders on bkx k level elements but Ignore them foi In!

Examples:

UL {border-bottom-width: 0.5in;}
A:active {border-bottom-width: 2px;}

border-color

Values: color{ 1,41

Default: The value of color for the element itself

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / P / / /
|
Mac • • P / - -

Sets the color of the overall border of an element. It's possible to

set a different color for each side by listing them in the order top-
right-bottom-left.

Navigator 4.x and Opera 3.6 don't set colors on individual sides, as
in border-color: red blue green purple. IE4 and Win/IE5 cant
apply border colors to inline elements, since they don't apply
borders to inlines, but this isn't penalized here.

Examples:

Hi {border-color: purple;}
A: visited {border-color: maroon;}

border-left

Values: border- left-width I I border-style I I color

Default: n/a

Inherited: No
Applies to: All elements

border-color 25
Support:

Defines the width, color, and style of the left border of an element.
The usual cawats about border- style apply.

Opera doesn't apply border styles to table elements, which is the

reason for the P rating. IE4 and Win/IE5 don't apply borders to
inline elements.

Examples:

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

PRE {border-left: double black 4px;}

border-left-width

Values: thin 1 medium 1 thick 1 length

Default: medium

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / /
Mac P / - B / - - !

Sets the width of the left border of an element, which inherits the
element's background and may have a foreground of its own (see
border- style). Negative length values aren't permitted. The usual
caveats about border- style apply.

Navigator creates visible borders even when no border- style is

setand doesn't set borders on all sides when a style is set. Things
when borders are applied to inline styles. IE4 and
get really ugly
Win/IE5 correctly handle borders on block-level elements but
ignore them for inlines.

Examples:

P {border-left-width: 3em;}
PRE {border-left-width: 4px;}

border-right

Values: border-right-uidth I I border-style I I color

26 CSS Pocket Reference

Default: n/a '

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / / / p /
Mac P / - X /

Defines the width, color, and style oi the right bordei

element. The usual caveats about border-style appr)

Opera doesn't apprj border styles to table elements which is the

reason for the P rating. ir »
and DB5 don't apply borders to inline
elements.

Examples:

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

H3 {border-right: cyan lem inset;}

border-right-width

Values: thin 1 medium 1 thick 1 length

Default: medium

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / /
Mac P / B / - " 1

Sets the width of the right border of an element, which inherits the
element's background and may have a foreground of its own (see
border- style). Negative length values aren't permitted. The usual
caveats about border- style apply.

Navigator 4.x creates visible borders even when no border- style

is set and doesn't set borders on all side when a style is set. Things

get really ugly when borders are applied to inline styles. IE4 and
Win/IE5 correctly handle borders on block-level elements but
ignore them for inlines.

Examples:

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

H3 {border-right-width: lem;}

border-right-width 27
border-style

Values:

none I dotted I dashed I solid I double I groove I ridge I

inset I outset

Default: none

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / P / / /
Mac / / - P / - - !

Sets the style of the overall border of an element, using either the
color set by border- color or the foreground of the element itself if
no border- color has been defined. Note that setting the border-
style to none (its default value) results in no border at all. In this
case, any value of border-width is ignored, and the width of the
border set to zero. CSS1 doesn't require recognition of any values
besides none and solid. Any unrecognized value from the list of
values should be reinterpreted as solid.

Navigator 4.x doesn't reset the border-width to zero if border-

style is none, but instead incorrectly honors the width setting.

Examples:

Hi {border-style: solid;}
IMG {border-style: inset;}

border-top

Values: border -top -width 1 1 border-style 1 1 color

Default: n/a

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / X / P /
Mac P / X / - |

Defines the width, color, and style of the top border of an element.
The usual caveats about border- style apply.

28 CSS Pocket Reference

Open doesnl apply bordei styles to table elements which ii the
reason foi the P rating n I and Win n 5 don*i apply bord
Inline elements

Examples:

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

HI {border-top: dashed lpx gray;}

border top width

Values: thin 1 medium 1 thick 1 length

Default: medium

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / /
Mac P / B / - -

Sets the width of the top border of an element Negative length

values aren't permitted. The usual caveats about border -style
apply.

Navigator creates visible borders even when no border- style is

set and doesn't borders on all sides when a style is set Things
set
get really ugly when borders are applied to inline styles. IE4 and
Win/IE5 correctly handle borders on block-level elements but
ignore them for inlines.

Examples:

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

border-width

Values: [ thin I medium I thick I length ]{1,4)

Default: n/a

Inherited: No
Applies to: All elements

border-top-width 29
Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4
Win P P / B / / /
Mac P / - B /

Sets the width of the overall border of an element, which inherits

the element's background and may have a foreground of its own
(see border- style). Negative length values aren't permitted. The
usual caveats about border- style apply.

Navigator creates visible borders even when no border- style is

set and doesn't set borders on all side when a style is set. Things

gel really ugly when borders are applied to inline styles. IE4 and
Win/I E5 correctly handle borders on block-level elements but
ignore them for inlines.

Examples:

Hi {border-width: 2ex;}
IMG {border-width: 5px;}

clear

Values: none 1 left 1 right both

Default: none

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 |

Win P P / P / B /
I
Mac / / - P / - - |

Defines the sides of an element on which no floating images may

be placed. The effect of this is to move the element down until the
top of its border-edge is below the bottom edge of the floated
element. This downward movement is technically accomplished by
increasing the top margin of the element until its top border is
lower than the bottom of the floated element.
Like float, clear simple to support. There is typically basic
isn't

support, but as things get more complicated, browser behavior

tends to break down. Thoroughly test pages using this property.

Examples:

Hi {clear: both;}
H3 {clear: right;}

CSS Pocket Reference

 u

color

Values: color

Default: Bn >wsei spe< it

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / /
Mac / / / /

Sets the foreground color of a given element Poi texl this sets the
text color; for bitmap images su< h as < ,n and M'< I n has no effei I

The value of color is assumed by any borders oi an elemeni

unless they have had a color explicitly set using border -color In
the three-digit hex format, each digit is replicated; thus. #0F0 is the
same as #00FF00.

Examples:

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

H3 {color: navy;}
P.warning {color: #FF0000;}
PRE. pastoral {color: #0F0;}

display

Values: block I inline I list-item I none

Default: block

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 !

Win P P P P / P /
|
Mac P / P / - " I

Classifieselements into broad categories. The most popular value

is probably none, which surpresses the display of an element alto-
gether. Gratuitous use of display with a document type such as
HTML can be dangerous, since HTML already has a display hier-
archy defined, and so in these circumstances the use of display is
strongly discouraged. However, in the case of XML, which has no

color 31
such hierarchy, display is indispensable. In CSS2, the range of
values for display is expanded but not well supported.
( )pera 3.6 almost gets inline right but seems to honor the occa-
sional carriage return as though it were a <BR> element, instead of
plain whitespace.

Examples:

.hide {display: none;}

LI {display: list-item;}
Hi {display: block;}
IMG {display: inline;}

float

Values: left 1 right 1 none

Default: none

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P Q P / B Q
Mac B Q - P / - -

Sets the float direction for an element. This is generally applied to

images to allow text to flow around them, but under CSS1, any
element may be floated. Note that, for elements such as para-
graphs, floating the element causes its width to tend toward zero
unless an explicit width is assigned; thus, width assignment is a
crucial part of floating any non-replaced element.

float is one of the most complicated and hardest-to-implement

aspects of the specification. Basic floating is generally
entire
supported by browsers, especially on images, but when the
all

specification is closely tested, or the document structure becomes

complicated, floating is most often used incorrectly or not at all.
The floating of text elements is especially inconsistent, although
IE5 and Opera have cleaned up their act to a large degree, leaving
WinIE4 and Nav4 the major transgressors in this respect. You
should use float carefully and thoroughly test any pages
employing it.
Opera 4 seems to place floated elements a bit off from where the
ideal place would seem to be, but in general, its support is
extremely robust and can generally be counted on.

32 CSS Pocket Reference

 }

Examples:

IMG. figure {float: left;}

P. sidebar {float: right; width: i

font

Values:

[font-style font-variant
I I I I
font -weight
[/ line-height J? font- family

Default: Refer to individual properties

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / P / / /
Mac Q / P / - -

A shorthand property for the other font properties. Any values may
be omitted except for font-size and font -family, which are
always required for a valid font declaration and must appear in
that order. Note the incorrect examples shown.

Examples:

P {font: small-caps italic bold I2pt/l4pt

Helvetica, sans-serif ;
P. wrong {font: bold Helvetica, sans-serif;} /* missing a

font-size */
P. wrong {font: I2pt Times, serif bold;} /* font-weight

must come before the others */

P. wrong {font: 12pt italic Times;} /* font-style must
come before font-size */
P. valid {font: 14pt Arial;} /* technically correct,

although generic font-families are encouraged for

fallback purposes */

font-family

Values:

[[family-name generic-family I
],]* [family-name I

generic-family ]

Default: Browser specific

font 33
Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac / / / /

Declares a specific font to be used, a generic font family, or both.

Values for a generic font family are serif, sans-serif, monospace,
cursive, and fantasy. If a font name contains whitespace, it must
be enclosed with either single- or double-quotation marks. Note
that the use of a specific font family is dependent on the user
having that font installed on his system. So using generic font fami-
lies is strongly encouraged, since this causes the user agent to try
The fantasy and cursive font families are
substituting a similar font.
especially and it's recommended you avoid using
problematic,
either one. See Chapter 5 of Cascading Style Sheets: The Definitive
Guide for more information about font families.

Examples:

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

LI {font-family: Times, TimesNR, "New Century
Schoolbook", serif;}
PRE {font-family: Courier, "Courier New", "Andale
Mono", Monaco, monospace;}

font-size

Values:

xx-small I x-small I small medium

I large x-large
I I I

xx- large I larger I smaller length

I percentageI

Default: medium

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P P X / / /
Mac Q / - X / - -

Sets the size of the font. This can be defined as an absolute size, a

relative length value, or a percentage value. Percentage

size, a
values are relative to parent element's font size. Negative length
and percentage values aren't permitted. The dangers of font- size

34 CSS Pocket Reference

assignment are man) and varied and p particular!)
discouraged In web design as then italn relationship
bet ween points and the pixels on .1 monitoi that, due 10
early misunderstandings, setting the Font size to medium lea
differenl results In [nternet Explore! and Navigatoi I

these problems are covered in Chaptei 5 oi Cascading s ' 1

/<* sheets:
The Definitive Guide, foi furthei discussion, refei to bttp Uyk.clm
en himf) com/. For besl results, you should use eithei ;

or em units for font sizing, As .1 last resort, pi

hut this approach has serious accessibility penakk
prevents users from resizing text, even if it's too small (or them to
read comfortably.

IE4/5's values for absolute sizes assigns small to be the sam

as unstyled text, instead of medium, as you mighl exped Thus.
declaring an absolute font size (such as font-size: medium; will
almost certainly lead to differenl font sizes in Navigatoi and
Explorer. Navigator 4.x is more in line with the- intent of the ss (

specification, while Explorer's behavior has a solid foundation in

traditional HTML rendering.

Examples:

H2 {font-size: 200%;}
CODE {font-size: 0.9em;}
P. caption {font-size: 9px;}

font-style

Values: normal I italic I oblique

Default: normal

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / P / / /
Mac / / - P / - -

Sets 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. However, the reality is that user
agents rarely recognize the difference between italic and oblique
text and almost always render both in exactly the same way.

font-style 35
Examples:

EM {font-style: oblique;}
I {font-style: italic;}

font-variant

Values: normal 1 small-caps

Default: normal

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 Pino 0p3 0p4 |

Win Q Q Q X / / /
Mac Q / - X / - -

This 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. Under the rules of CSS, user agents
can claim support for small -caps by simply uppercasing all the
letters. Since this isn't typically what you'd expect, user agents that

do this are marked as having Quirky support.

Examples:

H3 {font-variant: small-caps;}
P {font-variant: normal;}

font-weight

Values:

normal bold I I bolder lighter

I I 100 I 200 I 300 I 400 I

500 600I 700 I I 800 I 900

Default normal

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

/ / / P / / /
/ • - P •

Sets 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

CSS Pocket Reference

bold. Each numeric value to at lean .is heavy .is the n,-\i Iowa
vahie,and at lead as Ughi numbei rims
.is the next hlghei it .1

font lias only two weights—normal and bold the number* 100
through 500 arc normal, and 6oo through 900 are bold.

Examples:

B {font-weight: 700;}
STRONG {font-weight: bold;}
.delicate {font-weight; lighter;}

height

Values: length |
auto

Default: auto

Inherited: No
Applies to: Block level elements and replaced elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / X / / /
Mac / / - X / -

Sets 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 isn't widespread as of this
writing. In fact, CSS1 states that a user agent can treat any value as
auto when height is applied to non-replaced elements such as
paragraphs. Negative length values aren't permitted.

Examples:

IMG. icon {height: 50px;}

letter-spacing

Values: normal | length

Default: normal

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 JE55 NN4 NN6 0p3 0p4

Win / / / X / / /
Mac / / - X / - - i

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

Examples:

P. spacious {letter-spacing: 6px;}

EM {letter-spacing: 0.2em;}
P. cramped {letter-spacing: -0.5em;}

line-height

Values: normal |
number \
length |
percentage

Default: normal

Inherited: Yes

Applies to: All elements

Percentage values: Relative to the font size of the element itself

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / P / Q /
Mac / P / - !

Sets the intrinsic height of any non-replaced element. (See the

section on beginning of the book for a
inline formatting at the
more detailed explanation of line- height.) 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 aren't 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
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 interprets it as a number of pixels.

For inline elements, Opera 3-6 applies background colors to the

space between lines, as opposed to just the text itself, when the
background is set for an inline element within the text. (See the
CSS1 Test Suite for more details.)
Navigator 4.x incorrectly permits negative values for this property.

38 CSS Pocket Reference

Examples:

P {line-height: 1.5em;}
H2 {line-height: 200%;}
UL {line-height: 1.2;}
PRE {line-height: 0.75em;}

list-style

Values:

list-style-type |
|
list-style-position \ \

list-style-image

Default: n/a

Inherited: Yes

Applies to: List elements

Support:
WlnP//P///
Mac
IE4

P
IE5

/
IE55

-
NN4

P
NN6

/
0p3

-
0p4

A shorthand property condensing all other list-style properties It

applies toall elements with a display value of list- item; in ordi-

nary HTML, this is any <LI> element. If an image isn't available or

can't be rendered, the value for list- style-type is used for the
bullets.

Examples:

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

/* values are inherited to LI elements */
0L {list-style: upper-roman;}

list-style-image

Values: url |
none

Default: none

Inherited: Yes

Applies to: List elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / X / / /
1
Mac / / - / / - ~ 1

list-style 39
Declares an image that is 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-
posit ion. If the declared image isn't available or can't be rendered,
the value for list-style-type is used for the bullets.

Examples:

UL {list-style-image: url(bullet3.gif);}
UL LI {list-style-image:
url(http://my.web.site/pix/sun.png);}

list-style-position

Values: inside | outside

Default: outside

Inherited: Yes

Applies to: List elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 |

Win / / / X / / /
Mac / / - X / - - !

Declares the position of the bullet or number in an unordered or

ordered list with respect to the content of the list-item. The default
value mimics traditional HTML renderings of lists, while inside
places the bullet as if it were the first character in the list-item's
content. If the bullet is set to be outside, it's placed in the margin
of the list-item element. The exact behavior in this circumstance
isn't defined in CSS.

The positioning and formatting of list-items when set to this value

are a bit odd under IE4/Mac.

Examples:

LI {list-style-position: outside;}
OL LI {list-style-position: inside;}

list-style-type

Values:

disc circle|
square decimal |
lower-roman
| |
|

upper-roman lower-alpha upper-alpha

|
none | |

CSS Pocket Reference

Default: disc

Inherited: Yes

Applies to: List elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac / / - P / - « 1

Declares the type of bullet numbering system to be used Kn either

an unordered or ordered list, depending on the value specified
CSS2 add many more values with international flavor (e.g., hebrew
and armenian), but as of this writing, they aren't widely supported
There is no defined behavior for what happens when a list using
an alphabetic ordering exceeds the letters in the list For example.
once an upper-latin list reaches Z, the specification doesn't say
what the next bullet should be.
Navigator 4.x displays question marks for bullets when using the
value none.

Examples:

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

margin

Values: [ length \
percentage |
auto ]{l,4}

Default: n/a

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / B

i
Mac P / - B / - -

Sets the size of the overall margin of an element. Vertically adja-

cent margins of block-level elements are collapsed to be as large as
the largest margin, whereas inline elements effectively don't take
top and bottom margins (they are allowed but have no effect on
page layout). With inline elements, only the left and right margins
of inline elements have an effect, and they don't collapse with
adjacent margins. Margins set on floated elements aren't collapsed
with other margins under any circumstance. Negative values are
permitted, but caution is recommended, as these can cause

margin 41
elements to overwrite other parts of a page or to appear wider
than their parent elements. Percentage values of margin refer to
the width of the closest block-level ancestor.

All margin properties seem to be problematic, or else completely

unsupported, on inline elements. In the case of margin, support is
pretty good on block-level elements in IE4/Win and IE5/Win,
while with inline elements, IE4/Win and IE5/Win ignore this prop-
erty completely. IE5/Mac correctly honors margins on all elements.
Navigator 4.x does fairly well so long as margins aren't applied to
floating or inline elements, in which case major bugs can be
tripped.

Opera 4's problems with correctly applying right and left margins
to inline elements seem to get worse if you use the margin short-
hand property.

Examples:

Hi {margin: 2ex;}
P {margin: auto;}
IMG {margin: 10px;}

margin-bottom

Values: length |
percentage |
auto

Default:

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / / / / /
Mac P / - X / - -

Sets the size of the bottom margin of an element. Negative values

are permitted, but caution is recommended as that can pull
following elements up, possibly overwriting some or all elements
with the negative margin. Bottom margins on inline elements have
no effect on document layout. Percentage values of margin -bottom
refer to the width of the closest block-level ancestor.
Allmargin properties seem to be problematic, or else completely
unsupported, on inline elements; see margin for details.

42 CSS Pocket Reference

Examples:

UL {margin-bottom: 0.5in;}
Hi {margin-bottom: 2%;}

margin-left

Values: length I percentage I auto

Default:

Inherited: No
Applies to: All dements
Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4
P P / B / /
P / - B / -

Sets the size of the margin of an element. Negative values are

left

permitted, but caution recommended, as they can cause the left

is

edge of the element to push outside the left edge of the parent
element(s). Percentage values of margin -left refer to width of the
closest block-level ancestor.

All margin properties seem to be problematic, or else completely

unsupported, on inline elements; see margin for details. Opera 4
sometimes applies left margins to all the boxes of an inline
element, not just the first one. This seems to come and go some-
what randomly, but it's common enough to be easily noticeable.

Examples:

P {margin-left: 5%;}
PRE {margin-left: 3em;}

margin-right

Values: length 1 percentage auto

Default:

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P Q B B / B
Mac P / B B - ~

margin-left 43
 margin of an element. Negative values are
Sets the size of the right
permitted, but caution recommended, as they can cause the right
is

edge of the element to push outside the right edge of the parent
element(s). Percentage values of margin -right refer to width of
the closest block-level ancestor.

All margin properties seem to be problematic, or else completely

unsupported, on inline elements; see margin for details. Opera 4
sometimes applies right margins to all the boxes of an inline
element, not just the last one. This seems to come and go some-
what randomly, but it's common enough to be easily noticeable.
As of this writing, Netscape 6 has a specific bug relating to right
margins on inline elements and line-breaking.

Examples:

IMG {margin-right: 30px;}

OL {margin-right: 5em;}

margin-top

Values: length 1 percentage auto

Default:

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / P / / B
Mac P / - P / - -

Sets the size of the top margin of an element. Negative values are
permitted, but caution is recommended, as they can pull the
element up into preceding elements, possibly overwriting some or
all of the preceding elements. Top margins on inline elements have

no effect on document layout. Percentage values of margin -top

refer to the width of the closest block-level ancestor.
Allmargin properties seem to be problematic, or else completely
unsupported, on inline elements; see margin for details.

Examples:

UL {margin-top: 0.5in;}
H3 {margin-top: l.5em;}

44 CSS Pocket Reference

padding

Values: ( length 1 percentage ||i.»)

Default: n/a

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P Q B / B /
Mac P / B / - -

Sets the size of the overall padding of an element TtlC podding

uses the element's background; in other words, the background of
an element fills its content area and padding. Padding set on inline-
elements doesn't affect line-height calculations but is 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 aren't required to support this
behavior. There's also no defined behavior to say whether the fore-
ground content of a previous line appears above the background
of a succeeding line or is overwritten by that background. Nega-
tive values aren't permitted. Percentage values of padding refer to
width of the closest block-level ancestor.
All padding properties seem to be problematic, or else completely
unsupported, on inline elements. Opera 3.6 correctly ignores nega-
tive padding values but will alter the line- height based on values
of padding applied to inline elements, which is incorrect. IE4/Win
and IE5/Win honor padding assignments on block-level elements
but not inline elements. Navigator 4.x does fairly well as long as
padding isn't applied to floating or inline elements, in which case
major bugs can be tripped.

Examples:

Hi {padding: 2ex;}
IMG {padding: 10px;}

padding-bottom

Values: length I percentage

Default:

Inherited: No

padding 45
Applies to: All elements

Percentage values: Refer to width of closest block-level ancestor

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 |

Win P P / B / /
Mac P / B / - 1

Sets the size of the bottom padding of an element. This padding

uses the element's background, if one has been set. Negative
values aren't permitted. Percentage values of padding- bottom refer
to the width of the closest block-level ancestor.
Allpadding properties seem to be problematic, or else completely
unsupported, on inline elements; see padding for details.

Examples:

UL {padding-bottom: 0.5in;}
HI {padding-bottom: 2%;}

padding-left

Values: length 1 percentage

Default:

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P / B / / /
Mac P / - B / - - |

Sets the size of the left padding of an element. This padding uses
the element's background, if one has been set. Negative values

aren't permitted. Percentage values of padding- left refer to width

of the closest block-level ancestor.

All padding properties seem to be problematic, or else completely

unsupported, on inline elements; see padding for details.

Examples:

P {padding-left: 5%;}
PRE {padding-left: 3em;}

46 CSS Pocket Reference

padding right

Values: length 1 percentage

Default:

Inherited: No
Applies to: All el< merits

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P Q B / / /
Mac P / - B / - -

Sets the size of the right padding oi an element. Thta padding

the element's background, if one has been set. Negative value*
aren't permitted. Percentage values of padding- right refer to
width of the closest block-level ancestor.
All padding properties seem to be problematic, or else completely
unsupported, on inline elements; see padding for details

Examples:

IMG {padding-right: 30px;}

OL {padding-right: 5em;}

padding-top

Values: length I percentage

Default:

Inherited: No
Applies to: Ail elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

i Win P P Q B / / /
Mac P / - B / - -

Sets the size of the top padding of an element. This padding uses
the element's background, if one has been set. Negative values

aren't permitted. Percentage values of padding -top refer to width

of the closest block-level ancestor.

All padding properties seem to be problematic, or else completely

unsupported, on inline elements; see padding for details.

padding-right 47
Examples:

UL {padding-top: 0.5in;}
H3 {padding-top: l.5em;}

text-align

Values: left 1 right 1 center 1 justify

Default: Browser specific

Inherited: Yes

Applies to: Block

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win / / / / / / /
Mac P / P / - - |

sets the horizontal alignment of the text in an element, or more

precisely, defines to which side of the element's content area the
line boxes are aligned. The value justify is supported by progra-
matically adjusting the letter- and word-spacing of the line's
content; results may vary by user agent.

In Navigator 4.x, justify can break down in tables but generally

works in other circumstances.

Examples:

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

text-decoration

Values:
none I
[ underline I I overline I I line-through I I blink ]

Default: none

Inherited: No
Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win P P P Q B P P
Mac P P Q B

sets certain effects on the text, such as underline and blink. Usef
agents aren't required to support blink. These decorations span

CSS Pocket Reference

child elements thai don'thave text deooiatiofi defined; see Chapter
» of Cascading Style sheetsTbe Definitive Guide fof more details
Combinations of die values are legal. When two text-decoration
rules apply to the same element, the values of the- two rules aren I

combined. For example:

Hi {text-decoration: overline;}
Hi, H2 {text-decoration: underline;}

Given these styles, HI elements are underlined with no overline.

because the value of overline completely overrides the value of
underline. If His have both overlines and underlines, use the
value overline underline for the HI rule.

In practice, setting an inline element's text -decoration to none

turns off all decorations, regardless of the parent's decoration. The
only exception to this is Opera, which implements the specifica-
tion correctly —
except Opera 4, which doesn't span inline images
with the text decoration of a parent element.

Examples:

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

text-indent

Values: length I percentage

Default:

Inherited: Yes

Applies to: Block

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4 |

i Win P P / B / / B

1
Mac P / - B / - ~ 1

Sets the indentation of the first line of an element. This is most

often used to create a tab effect for paragraphs, such as in novels
and other printed books. Negative values are permitted, which
cause hanging Percentage values refer to the parent
indents.
element's width. Care should be taken to leave enough margin for
the hanging indent to be visible.

text-indent 49
Examples:

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

text-transform

Values: capitalize I uppercase I lowercase I none

Default: none

Inherited: Yes

Applies to: All elements

Support: lE5 NN4 NN6

//-//-
IE4 IE55 6p3 0p4
Win / / / / / P /
Mac -

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 isn't a precisely defined behavior,
depending as it does on words, which are difficult to define in a
programmatic way.
If an element is set to text-transform: capitalize, only the first
letter in each word should be uppercase, where a word is defined
as strings of non-whitespace characters. For example, in the
markup antidis<span>establishment</span>arianism only the
first A should be uppercase, not the E at the beginning of the span

element. Opera 36 incorrectly uppercases both letters.

Examples:

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

vertical-align

Values:
baseline sub super
I top I I I text-top I middle I bottom I

text-bottom percentage I

Default: baseline

Inherited

Applies to: Inline elements

50 CSS Pocket Reference

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4
Win P P P X / P /
Mac P / /

Sets the vertical alignmenl of an element's baseline with respect to

the value of line-height.Percentage values refer to the line-
height of clement itself. Negative percentage values
the arc
permitted and cause the element to be lowered, not raised.

Examples:

SUP {vertical-align: super;}

.fnote {vertical-align: 50%;}

white-space

Values: normal I pre I nowrap

Default: normal

Inherited: Yes

Applies to: Block elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win X X P P / / /
Mac X / - P / - -

Defines howwhitespace within the element is treated, normal acts

like traditional web browsers: it reduces any sequence of
whitespace to a single space, pre causes whitespace to be treated
as it is in the HTML element PRE: with whitespace and returns fully
preserved, nowrap prevents an element from line-breaking, as in
the nowrap attribute for TD and TH elements in HTML4.

Examples:

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

width

Values: length I percentage I auto

Default: auto

Inherited: No
Applies to: Block elements and replaced elements

white-space 51
Support: 1

IE4 IE5 IE55 NN4 NN6 Op3 0p4

Win P P / P / Q /
Mac / / P /

Sets the width ofan element. This is most often applied to images,
but can be used on any block-level or replaced element.
Percentage values refer to the parent element's width. Negative
values aren't permitted.

Navigator 4.x applies width in an inconsistent fashion but appears

to honor it on most simple text elements and images. WinIE4/5
applies it to images and tables but ignores it for most text
elements, such as P and headings. Opera 3-6, weirdly, seems to set
the width of images to 100%. but this is largely an illusion, since
minimizing the window and then maximizing it again will reveal
correctly sized images. Basic support information for the values of
vertical-align is listed in the "CSS Support Chart" section.

Examples:

TABLE {width: 80%;}

P. sidebar {width: 20%;}

IMG. figure {width: 200px;}

word-spacing

Values: normal 1 length

Default: normal

Inherited: Yes

Applies to: All elements

Support: IE4 IE5 IE55 NN4 NN6 0p3 0p4

Win X
Mac / / - X / - - j

Sets the amount of whitespace between words. A word is usually

defined as a string of characters surrounded by whitespace, but
this isn't the case for many non-Latin-based writing systems.
Indeed, there's intentionally no definition for "word" in the CSS
specification. Length values can define a modifier to the usual
spacing, not the entire space itself; thus, normalis synonymous

with (zero). Negative values are permitted and cause words to

kern (hunch closer together).

CSS Pocket Reference

Examples:

P. spacious {word-spacing: O.Sem;}

EM {word-spacing: 5px;}
P. cramped {word-spacing: -0.2em;}

CSS Support Charts

Browser compatibility —or lack thereof — is the biggest
obstacle to adoption of CSS. The following browser sup-
port charts show how the most popular browsers support
CSS on the Windows and Macintosh platforms. The brows-
ers are Internet Explorer (Versions 3, 4, 5, and 5.5),
Netscape Navigator (Versions 4 and 6), and Opera (Ver-
sions 3 and 4). The code is:

/ Supported
X Not supported

P Partial support (some values are supported, some aren't)

B Buggy support (anything from a mangled display in the

browser window to a browser crash)

Q Quirky support (browser is technically compliant but

may not act as expected)
The charts are organized according to the CSS specifica-
tion: basic concepts, pseudo-classes and pseudo-elements,
the cascade, font properties, color and background proper-
ties, text properties, box properties, classification
properties, units.

Each numbered note attached to the various charts refers to

a correspondingly numbered section in the CSS1 specifica-
tion. This specification may be viewed at http://
ivtvw. w3-org/TR/REC-CSSl.

This chart and its notes are current as of January 2001. For
the latest information, visit http://style.webreview.com/.

CSS Support Charts 53

Basic CSS Concepts
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

Containment in HTML P / B / /
LINK / / B / /
<STYLE>...</STYLE> / / / / /
©import / / / / /
<x S7YLE»"dec;"> B / / X /
Grouping / / / / /
x, y, z{dec;} / / / / /
Inheritance B / B / /
(inherited values) B / B / /
Class selector / / B / /
.class / / B / /
ID selector B / B B /
#ID B / B B /
Contextual selectors B / P / /
xyzjdec;} B / P / /
Comments / / / / /
/* comment */ / / / / /

Notes
7.7 Containment in HTML ©import
WinIE4+ imports files even when the @import statement is at
the end of the document style sheet. This is technically in viola-
tion of the CSS1 specification, although obviously not a major
failing; thus the Q rating.

/ / < ontainment in HTMKx STYLE="dec ;

>
,h

Navigator 4 has particular trouble with list-items, which is most

of the reason for the B.

/ .-> inheritance
Navigator Vs inheritance is unstable at best, and fatally flawed
at worst It would take too long to list all occurrences, but par-
ticularty troublesome areas include tables and lists.

54 CSS Pocket Reference

 Windows9 5/ 98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
p / P Q Q Q / /
/ / / / / / / /
/ / / / / / / /
X / X Q Q Q / /
B / / / / / / /
/ / / / / / / /
/ / X / / / / /
B / P / / / / /
B / P / / / / /
/ / B Q Q Q / /
/ / B Q Q Q / /
B / B B B B / /
B / B B B B B /
/ / / / / / / /
/ / / / / / / /
/ / B / / / / /
/ / B / / / / /

i.4 Class selector

WinIE4/5 allows class names to begin with digits; this isn't per-
mitted under CSS1.

i .5 /D selector
WinIE4/5 allows ID names to begin with digits; this isn't per-
mitted under CSS1. All browsers apply the style for a given ID
to more than one instance of that ID in an HTML document,
which isn't permitted. This is properly an error-checking prob-
lem and not a failing of the CSS implementations, but I feel it's
significant enough to warrant the ratings shown.

Basic CSS Concepts 55

Pseudo-Classes and
Pseudo-Elements
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

anchor P / B / /
:link / / B / /
:active X / X / /
:visited X / B / /
first-line X / B X /
:first-line X / B X /
first-letter X / B X /
: first- letter X / B X /

Notes
2 3 first-line
IE3 incorrectly applies : first -line styles to the entire element.

2.4 first-letter
IE3 incorrectly applies :first -letter styles to the entire
element.

56 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
p / X / / / p p

/ / X / / / / /
B / X / / / X X
B / X / / / / /
X / X X X / / /
X / X X X / / /
X / X X X / / /
X / X X X / / /

Pseudo-Classes and Pseudo-Elements 57

The Cascade
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

important X / / / /
(important / / / / /
Cascading Order B / P / /
Weight sorting B / / / /
Origin sorting B / B / /
Specificity sorting B / B / /
Order sorting B / / / /

Notes
32 Cascading Order
There are simply far too many instances of NN4 problems to list

here. If writing in support of NN4, make your style sheets as

simple and as independent of cascading order as possible.

58 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
/ / / / / / / /
/ / / / / / / /
B / P / / / / /
B / / / / / / /
B / / / / / / /
B / P / / / / /
B / / / / / / /

The Cascade 59
Font Properties
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

font-family / / P / /
<family-name> / / P / /
<generic-family> / / P / /
serif / / / / /
sans-serif / / X / /
cursive / / X / /
fantasy / / X / /
monospace / / / / /
font-style P / p / /
normal / / X / /
italic / / / / /
oblique X / X / /
font-va riant X / X Q /
normal X / X / /
small-caps X / X Q /

5.2.2 font -family cursive

Despite a preferences setting for cursive fonts, Opera doesn't
seem to apply the preference, but instead substitutes another
font.

5.2.4 font -variant small-caps

YE4/5 approximates the small -caps style by making all such
text uppercase. While this can be justified under the CSS1 spec-
ification, visually, it doesn't render the text in small caps.

60 CSS Pocket Reference

 Wlndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 Op4
/ / p / / / / /
/ / / / / / / /
p / p / / / / /
/ / / / / / / /
/ / / / / / / /
X / B / / / / /
X / B / / / / /
/ / / / / / / /
p / P / / / / /
/ / / / / / / /
/ / / / / / / /
X / / / / / / /
A / A Q Q Q / /
X / X / / / / /
X / X Q Q Q / /

Font Properties 61
 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

font-weight P / P / /
normal / / X / /
bold / / / / /
bolder X / X / /
lighter X / X / /
100 - 900 / / X / /
font-size / / p Q /
<absolute-size> / / B Q /
xx-small - xx-large / / B Q /
<relative-size> / / X / /
larger / / X / /
smaller / / X / /
<length> / / B / /
<percentage> / / P / /
font P / P Q /
<font-family> / / P / /
<font-style> / / P / /
<font-variant> X / X Q /
<font-weight> / / X / /
<font-size> / / B / /
<line-height> B / B / /

Notes
5.2.6 font-size xx-small - xx-large
Winllw 5 55 and MacIE-4 5 all set the default font-size value
to small instead of medium. (The exception is IE5 Mac when its

in strict rendering mode.) Thus, declaring an absolute font size

(such as font-size: medium) almost certainly will lead to differ-
ent size fonts in Navigator and Explorer. While this isn't

incorrect under the specification, it's confusing to many people.

62 CSS Pocket Reference

 Wlndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
p / P / / / / /
/ / X / / / / /
/ / / / / / / /
/ / / / / / / /
X / / / / / / /
/ / X / / / / /
/ / p P P P / /
/ / / Q Q Q / /
/ / / Q Q Q / /
/ / / / / B / /
/ / / / / B / /
/ / / / / B / /
/ / p / / / / /
/ / / / / / / /
p / p p P / / /
p / / / / / / /
p / p / / / / /
X / X Q Q Q / /
p / / / / / / /
/ / B Q Q P / /
B / / / / / / /

Font Properties 63
Color and Background Properties
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

color / / / / /
<color> / / / / /
background-color B / X / /
<color> B / X / /
transparent B / X / /
background-image / / X / /
<url> / / X / /
none / / X / /
background-repeat B / X / /
repeat / / X / /
repeat-x P / X / /
repeat-y P / X / /
no-repeat / / X / /

Notes
53-2 background-color <color>
Nav4 doesn't apply the background color to the entire content
box and padding, just to the text in the element. This can be
worked around by declaring a zero-width border.
53-2 background-color transparent
Nav4 insists on applying this value to the parent of an element,
not the element itself. This can lead to "holes" in the parent ele-
ment's background.

Opera 4 has a bug that shows up only when a background has

been repeated, and the rest of the background of the element is
transparent (either by default or when explicitly declared).
Scrolling the element offscreen and then bringing it back can
cause holes" to be punched through the repeated images of
ancestor elements, thus creating visual anomalies.

64 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
/ / / / / / / /
/ / / / / / / /
B / P / / / / /
B / B / / / / /
B / X / / / / B

/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
P / X p / / / /
/ / X B / / / /
P / X B / / / /
P / X B / / / /
/ / X / / / / /

5.3.4 background-repeat repeat

WinIE4 repeats only down and to the right. The correct behav-
ior is for the background image to be tiled in both vertical

directions for repeat-y. and both horizontal for repeat-x. Nav4

gets this property correct on a technicality: since it doesn't sup-
port background- position, there's no way to know whether or
not it will tile in all four directions if given the chance, or
instead emulate WinIE4's behavior. Opera 3.6, MacIE4.5 and
WinIE5 all behave correctly.

5.3.4 background-repeat repeat-x

WinIE4 only repeats to the right, instead of both left and right.

5.3.4 background-repeat repeat-y

WinIE4 only repeats down, instead of both up and down.

Color and Background Properties 65

 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

background-attachment X / X / /
scroll X / X / /
fixed X / X / /
background-position X / X / /
<percentage> X / X / /
<length> X / X / /
top X / X / /
center X / X / /
bottom X / X / /
left X / X / /
right X / X / /
background p / p / /
<background-color> p / p / /
<background-image> p / / / /
<background-repeat> p / B / /
<background-attachment> X / / / /
<background-position> X / P / /

CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
X / X / / / X /
X / X / / / X /
X / X / / / X /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
p / p p / / p p

B / p / / / / /
p / / / / / / /
p / B B / / / /
X / X / / / X /
X / X / / / / /

Color and Background Properties 67

Text Properties
Macintosh
Property or Value N4 N6 IE3 IE4 IE5

word-spacing X / X / /
normal X / X / /
<length> X / X / /
letter-spacing X / X / /
normal X / X / /
<length> X / X / /
text-decoration B B B B P

none Q / / Q /
underline Q / B Q /
overline X / X / /
line-through / / / / /
blink / / X X X
vertical-align X / X p /
baseline X / X / /
sub X / X / /
super X / X / /
top X / X / /
text-top X / X / /

Notes
5.4.3 text-decoration none
According to the specification, if an element is decorated, but
one of its children isn't, the parent's effect is still visible on the
child; in a certain sense, it "shines through." Thus, if a para-
graph is underlined, but a STRONG element within it is set to

have no underlining, the paragraph underline still spans the

STRONG element. This also means that the underlining of child
elements should be the same color as the parent element,
unless the child element has also been set to be underlined.

68 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 0p3 0p4
X / X X X X / /
X / X X X X / /
X / X X X X / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
B B B B B B B B

Q / X / / / / /
Q / B / / / / /
X / X / / / / /
/ / / / / / / /
/ / X X X X X /
X / X p p p P /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X X X / B /
X / X X X / X /

In practice, however, setting an inline element to none turns off

all decorations, regardless of the parent's decoration. The only
exceptions are Opera and IE5/Mac, which implement this part

of the specification correctly. Unfortunately, Opera 4 and

Netscape 6 don't span inline images with the text decoration of
a parent element. In addition, Netscape 6 appears not to use a
parent element's decoration, but instead replicates it onto child
elements, which is subtly wrong.

5.4.3 text-decoration blink

Since this value isn't required under CSS1, only Navigator sup-
ports it (surprise).

Text Properties 69
 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

middle X / X / /
bottom X / X B /
text-bottom X / X B /
<percentage> X / X B /
text-transform / / X / /
capitalize / / X / /
uppercase / / X / /
lowercase / / X / /
none / / X / /
text-align P / p P /
left / / / / /
right / / / / /
center / / / / /
justify B / X X /
text-indent / / / / /
<length> / / / / /
<percentage> / / / / /
line-height P / p / /
normal / / / / /
<number> P / B / /
<length> B / B / /
<percentage> P / B / /

5 \.5 text-transform uppercase

Opera 3.6 uppercases the first letter in each inline element
within a word, which (according to the CSS1 Test Suite) it

shouldn't do.

5.4.6 text-align justify

In Na\ *. this value has a tendency to break down in tables but
generally works in other drcumstaru

70 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
X / X B X / B /
X / X X X / B /
X / X X X / X /
X / X X X X / /
/ / X / / / p /
/ / X / / / / /
/ / X / / / B /
/ / X / / / / /
/ / X / / / / /
/ / p / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
B / X / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
P / p / / / Q /
/ / / / / / / /
P / X / / / / /
B / / / / / / /
P / / / / / / /

5.4.S line-height
Opera 3-6 applies background colors to the space between
lines, as opposed to just the text itself, when the background is

set for an inline element within the text. (See the CSS1 Test
Suite for more details.)

5.4. £ line-height <length>

Nav4 incorrectly permits negative values for this property-.

Text Properties 71
Box Properties
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

margin-top P / B P /
<length> P / B P /
<percentage> P / B P /
auto P / B P /
margin-right B B P P /
<length> B / / P /
<percentage> B / / P /
auto X / X P /
margin -bottom X / X P /
<length> X / X P /
<percentage> X / X P /
auto X / X P /
margin-left B / p P /
<length> / / / P /
<percentage> B / / P /
auto B / X P /

Notes
5. 5.01 margin-top
All margin properties seem to be problematic, or else complete-
ly unsupported, on inline elements; see margin for details.

5. 5.02 margin-right
All margin properties seem to be problematic, or else complete-
ly unsupported, on inline elements; see margin for details.

Opera I sometimes applies right margins to all the boxes of an

inline element, not just the last cone. This seems to come and go
somewhat randomly, but it's common enough to be easily

noticeable.

72 CSS Pocket Reference

 W!ndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
/ B P P / / /
/ B P P / / /
/ / P P / / /
/ / P P / / /
B B P P P Q / B

B / / P P / / /
B / X P P / / /
X / X X X / / /
X / / p P / / /
X / X p P / / /
X / X p P / / /
X / X p P / / /
B / p p P / / B

B / / p P / / /
B / / p P / / /
X / X X X / / /

5.5.03 margin-bottom
All margin properties seem to be problematic, or else complete-
ly unsupported, on inline elements; see margin for details.

5.5.04 margin-left
All margin properties seem to be problematic, or else complete-
ly unsupported, on inline elements; see margin for details.

Opera 4 sometimes applies left margins to all the boxes of an

inline element, not just the first one. This seems to come and
go somewhat randomly, but it's common enough to be easily
noticeable.

Box Properties 73
 Macintosh
Property or Value N4 N6 IE3 IE4 IE5

margin B B B P /
<length> B / B P /
<percentage> B / B P /
auto X / B P /
padding-top B / X P /
<length> B / X P /
<percentage> B / X P /
padding-right B / X P /
<length> B / X P /
<percentage> B / X P /
padding-bottom B / X P /
<length> B / X P /
<percentage> B / X P /

Notes
5. 5.05 margin
margin is fairly well supported on block-level elements in most
browsers, with the notable exception of NN4.X. margin on
inline elements is fully supported in IE5/Mac, IE55 Win. NN6,
and Opera 4/5. margin should never be used on inline ele-
ments in NN4.X, which has severe and page-mangling bugs.
Opera 4's problems with correctly applying right and left mar-
gins to inline elements seems to get worse with margin.

74 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4

B/B
B

B//P P///
B~~ B~~ P~~ ~~P
P P
7
/
7
/
B~~
/

X
B
P/// /
/
/
X
P

p p Q / /
B / X p p / / /
B / X p p / / /
B / X p p Q / /
B / X p p / / /
B / X p p / / /
B / X p p / / /
B / X p p / / /
B / X p p / / /

5.5. 06 padding-top
All padding properties seem to be problematic, or else com-
pletely unsupported, on inline elements; see padding for
details.

5.5. 7 padding-right
All padding properties seem to be problematic, or else com-
pletely unsupported, on inline elements; see padding for
details.

55. 08 padding-bottom
All padding properties seem to be problematic, or else com-
pletely unsupported, on inline elements; see padding for
details.

Box Properties 75
 Macintosh
Property or Value N4 N6 IE3 IE4 IE5

padding-left B / X P /
<length> B / X P /
<percentage> B / X P /
padding B / X P /
<length> B / X P /
<percentage> B / X P /
border-top-width B / X P /
thin / / X P /
medium / / X P /
thick / / X P /
<length> / / X P /
border-right-width B / X P /
thin / / X P /
medium / / X P /
thick / / X P /
<length> / / X P /

Notes
5. 5 .09 padding-left
All padding properties seem to be problematic, or else com-
pletely unsupported, on inline elements; see padding for
details.

5.5. 10 padding
padding is fairly well supported on block-level elements in

most browsers, with the notable exception of NN4.X. padding

on inline elements is fully supported in IE5/Mac, NN6, and
Opera 4/5. padding should never be used on inline elements in
NN4.X, which has severe and page-mangling bugs. Opera 3-6
honors negative padding values, which are illegal, but since
you shouldn't use negative padding values, this is an easily
avoided problem.

76 CSS Pocket Reference

 W!ndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
B / X P P / / /
B / X P P / / /
B / X P P / / /
B / X p p Q B /
B / X p p / B /
B / X p p / B /
B / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
B / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /

5.5.11 border-top-width
Navigator creates visible borders even when no border- style
is set and doesn't set borders on all when
sides a style is set.

Things get really ugly when borders are applied to inline styles.

IE4 and IE5 correctly handle borders on block-level elements

but ignore them for inlines.

5.5.12 border-right-width
Navigator 4.x creates visible borders even when no border-
style is set and doesn't set borders on all sides when a style is

set. Things get really ugly when borders are applied to inline
IE4 and IE5 correctly handle borders on block-level
styles. ele-

ments but ignore them for inlines.

Box Properties 77
 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

border-bottom-width B / X P /
thin B / X P /
medium B / X P /
thick B / X P /
<length> B / X P /
border-left-width B / X P /
thin / / X P /
medium / / X P /
thick / / X P /
<length> / / X P /
border-width B / X P /
thin / / X P /
medium / / X P /
thick / / X P /
<length> / / X P /
border-color P / X / /
<color> P / X / /

Notes
5.5.13 border-bottom-width
Navigator 4.x creates visible borders even when no border-
style is set and doesn't set borders on all sideswhen a style is
set. Things get really ugly when borders are applied to inline
styles. IE4 and IE5/Win correctly handle borders on block-level
elements but ignore them for inlines.

5.5. 14 border-left-widtb
Navigator creates visible borders even when no border- style
is set and doesn't set borders on all sides when a style is set.
Things get really ugly when borders are applied to inline styles.

II i and IE5 correctly handle borders on block-level elements

but ignore them for inlines.

78 CSS Pocket Reference

 Wlndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
B / / p p / / /
B / A p p / / /
B / / p p / / /
B / / p p / / /
B / / p p / / /
B / X p p / / /
/ / / p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
B / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
/ / X p p / / /
P / X / / / / /
P / X / / / / /

55. 75 border-width
Navigator creates visible borders even when no border- style
is set and doesn't set borders on all when
sides a style is set.

Things get really ugly when borders are applied to inline styles.

IE4 and IE5 correctly handle borders on block-level elements

but ignore them for inlines.

Box Properties 79
 Macintosh
Property or Value N4 N6 IE3 IE4 IE5

border-style P / X / /
none / / X / /
dotted X / X / /
dashed X / X / /
solid / / X / /
double / / X / /
groove / / X / /
ridge / / X / /
inset / / X / /
outset / / X / /
border-top X / X p /
<border-top-width> X / X p /
<border-style> X / X p /
<color> X / X p /
border-right X / X p /
<border-right-width> X / X p /
<border-style> X / X p /
<color> X / X p /
border-bottom X / X p /
<border-bottom-width> X / X p /
<border-style> X / X p /
<color> X / X p /

Notes
5.5.18 border-top
Opera3 doesn't apply border styles to table elements, which is

the reason for the P rating. IE4 and IE5 don't apply borders to
inline elements.

CSS Pocket Reference

 W!ndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
p / X p p / / /
/ / X / / / / /
X / X X X / / /
X / X X X / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /

5.5.19 border-right
Opera3 doesn't apply border which
styles to table elements, is

the reason for the P rating. IE4 and IE5 don't apply borders to
inline elements.

Box Properties 81
 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

border-left X / X P /
<border-left-width> X / X P /
<border-style> X / X P /
<color> X / X P /
border P / X P /
<border-width> B / X P /
<border-style> P / X P /
<color> / / X P /
width P / X / /
<length> P / X / /
<percentage> P / X / /
auto P / X / /
height X / X / /
<length> X / X / /
auto X / X / /

Notes
5. 5.20 border-bottom
Opera3 doesn't apply border styles to table elements, which is
the reason for the P rating. IE4 and IE5 Win don't apply bor-
ders to inline elements, which is the reason for those P ratings.

5.5.21 border-left
Opera3 doesn't apply border styles to table elements, which is

the reason for the P rating. IE4 and IE5 don't apply borders to
inline elements.

82 CSS Pocket Reference

 Wlndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
X / X p p / p /
X / X p p / p /
X / X p p / p /
X / X p p / p /
p / X p p / p /
B / X p p / p /
P / X p p / p /
/ / X p p / p /
P / X p p / Q /
P / X p p / Q /
P / X p p / Q /
P / X p p / Q /
X / X / / / / /
X / X / / / / /
X / X / / / / /

5. 522 border
Opera3 doesn't apply border styles to table elements, which is
the reason for the P rating. IE4 and Win/IE5 don't apply bor-
ders to inline elements, which is the reason for those P ratings.

5.5.23 ww/tf?
Navigator 4.x applies width in an inconsistent fashion but
appears to honor on most simple text elements and images.
it

WinIE4/5 applies it to images and tables but ignores it for most

text elements such as P and headings. Opera 3.6, weirdly,
seems to set the width of images to 100%, but this is largely an
illusion, since minimizing the window and then maximizing it

again reveals correctly sized images.

Box Properties 83
 Macintosh
Property or Value N4 N6 IE3 IE4 IE5

float P / X B Q
left B / X / /
right B / X / /
none / / X / /
clear P / X / /
none / / / / /
left B / X / /
right B / X / /
both / / X / /

Notes
5.5.25float
float is one of the most complicated and hardest-to-imple-

ment aspects of the entire specification. Basic floating is

generally supported by all browsers, especially on images, but
when the specification is closely tested, or the document struc-
ture becomes complicated, floating most often happens
incorrectly or not at all. The floating of text elements is espe-
cially inconsistent, although IE5 and Opera have cleaned up

their act to a large degree, leaving WinIE4 and Nav4 the major
transgressors in this respect. Authors should use float with
some care and thoroughly test any pages employing it.

Opera 4 seems to place floated elements a little bit off from

where the ideal place would seem to be, but in general, its sup-
port is extremely robust and can generally be counted on.

84 CSS Pocket Reference

 Wlndows95/98/2000
N6 IE3 IE4 IE5 IE55 Op3 0p4
p / X p P Q B Q
B / X B B / / /
B / X B B / / /
/ / X / / / / /
P / X P P / B /
/ / / / / / / /
B / X B B / X /
B / X B B / / /
/ / X / / / / /

5.5.26 cfetfr
Like float, clear isn't a simple thing to support. There is typi-

cally basic support, but as things get more complicated,

browser behavior tends to break down. You should thorough-
ly test your pages when using this property.

Box Properties 85
Classification Properties
Macintosh
Property or Value N4 N6 IE3 IE4 IE5

display P / X P /
block B / X P /
inline X / X X /
list- item P / X p /
none / / X / /
white-space P / X X /
normal / / X X /
pre / / X X /
nowrap X / X X /
list-style-type P / X / /
disc / / X / /
circle / / X / /
square / / X / /
decimal / / X / /
lower-roman / / X / /
upper-roman / / X / /
lower-alpha / / X / /
upper-alpha / / X / /
none B / X / /

Notes
5.6.1 display inline
Opera 3.6 almost gets inline right, but seems to honor the
occasional carriage return as though it were a <BR> element,
instead of plain whitespace.

5.63 list-style-type none

Mac\"a\4 displays question marks for bullets when using this
value.

5.6. 5 list-style-position inside

The positioning and formatting of list-items when set to this

value arc a bit odd under MacIE4.

86 CSS Pocket Reference

 W!ndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
p / X p p p p /
B / / X / / / /
X / / X / / B /
B / / X X X X /
/ / X / / / / /
P / / X X p X /
/ / / X X / X /
/ / X X X X X /
X / X X X / X /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /
/ / X / / / / /

Classification Properties 87
 Macintosh

Property or Value N4 N6 IE3 IE4 IE5

list-style-image X / X / /
<url> X / X / /
none X / X / /
list-style-position X / X / /
inside X / X Q /
outside X / X / /
list-style P / X P /
<keyword> P / X / /
<position> X / X Q /
<url> X / X / /

88 CSS Pocket Reference

 Wlndows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 0p4
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
X / X / / / / /
p / X p / / / /
/ / X / / / / /
X / X Q Q / / /
X / X / / / / /

Classification Properties
Units
Macintosh

Property or Value N4 N6 IE3 IE4 IE5

Length Units / / B / /
em / / / / /
ex Q / Q Q /
px / / / / /
in / / / / /
cm / / / / /
mm / / / / /
Pt / / / / /
pc / / / / /
Percentage Units / / / / /
<percentage> / / / / /
Color Units P / P / /
#000 / / B / /
#000000 / / B / /
(RRR,GGG,BBB) / / / / /
(R%,G%,B%) / / X / /
<keyword> B / / / /
URLs B / B / /
<url> B / B / /

Notes
6 / Length Units ex
All supporting browsers appear to calculate ex as one-half em.
This is arguably a reasonable approximation, but it's technical-
ly incorrect.

6.3 Color Units <keyword>

Navigator generates a color for any apparent keyword. For
example, color: invalidValue yields a dark blue, and 'color:
inherit') (a valid declaration under CSS2) comes out as a
vaguely nauseous green.

90 CSS Pocket Reference

 Windows95/98/2000
N4 N6 IE3 IE4 IE5 IE55 Op3 Op4
p / P / / / / /
/ / / / / / / /
Q / / Q / Q /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
/ / / / / / / /
P / P / / / / /
/ / / / / / / /
/ / / / / / / /
/ / X / / / / /
/ / X / / / / /
B / / / / / / /
B / / / / / / /
B / / / / / / /

6.4 £/ftZs <wr/>

Navigator determines relative URLs in a style sheet with respect
to the location of the HTML document, not with respect to the
location of the style sheet itself.

Units 91
Web Design

O REILLY'
CSS Pocket Reference
Cascading Style Sheets, or CSS, is the W3C-
approvecl method for controlling the visual
presentation of web pages.

CSS Pocket Reference covers the key

information a web designer or developer must know to
effectively implement CSS in web documents. It provides a
quick introduction to the key concepts of CSS, an alphabetical
reference to all the CSS1 properties, and detailed information
about CSS support for Windows and Macintosh browsers
including: Netscape Navigator Versions 4 and 6, Internet
Explorer Versions 3, 4, 5, and 5.5, and Opera Versions 3
and 4.

Eric A. Meyer is the author of Cascading Style Sheets:

The Definitive Guide (O'Reilly). He is an invited member
of the W3C CSS&FP Working Group, and he coordinated
the authoring and creation of the W3Cs CSS Test Suite.

He lives in Cleveland, Ohio.

Visit O'Reilly on the Web at www.oreilly.com

US $9.95
ISBN 0-596-00120-7 CAN $14.95
90000

780596"001209 36920"00120'