CSS Reference

D CSS REFERENCE This section includes a table listing CSS properties and values. In many cases, properties have specific values, which are listed in full. However, some values are common across many properties. These are outlined in the “Common CSS values” section, and in the CSS properties and values table these values are shown in italics. The end of the section includes information on basic selectors, pseudo-classes, pseudo-elements, CSS boilerplates, and CSS management.

The CSS box model

In CSS, every element is considered to be within its own box, and you can define the dimensions of the content and then add padding, a border, and a margin to each edge as required.

Padding, borders, and margins are added to the set dimensions of the content, so the sum of these elements is the overall space that they take up. For example, a 100-pixel-wide element with 20 pixels of padding will take up an overall width of 140 pixels, not 100 pixels with 20 pixels of padding within.

Note that the top and bottom margins on adjacent elements collapse. For example, if you set the bottom margin to 50px on an element, and set a top margin of 100px on the element below, the margin between the two elements will be 100 pixels, not 150 pixels.

Common CSS values

In addition to the values listed in the following table, a property may have a value of inherit, whereupon it takes the same value as its parent. Some properties are inherited by default—see the CSS properties and values table for more information.

Value Formats
color Color name. See Appendix B (Color Reference) for information on available CSS color names.

rgb(n,n,n): Where n is a value from 0 to 255 or a percentage. #rrggbb: Hexadecimal color format (preferred).
length An optional sign (+ or -), followed by a number and one of the following
units (there should be no whitespace between the number and
unit):
%: A percentage.
cm: Centimeters.
em: One em is equal to the font size of the parent or current element
(see following focus point for elaboration).
ex: One ex is, in theory, equal to the font size of the x character of
the current element. Most browsers render ex as half an em.
in: Inches.
mm: Millimeters.
pc: Picas. 1pc = 12pt.
pt: Points. 1pt = 1/72in.
px: Pixels.
For zero values, the unit identifier may be omitted. Generally, px, em,
and % are the best units for screen design, and pt is best for print fonts.
number An optional sign (+ or -) followed by a number.
percentage An optional sign (+ or -) followed by a number, immediately followed
by the percentage symbol.
url The word url immediately followed by parentheses, within which is
placed a URL. The URL can optionally be enclosed in single or double
quotes.

CSS properties and values

In the tables within this section, default values are listed in bold and shorthand properties are shaded in gray. A number of tables online list browser compatibility with regard to CSS. Some good examples of these and related resources can be found at the following URLs:

CSS support for most browsers
CSS support for Internet Explorer, Firefox, and Opera
Concentrates on quirks
CSS2 support in old Mac browsers—note: not updated since 2004
CSS2 support chart for old browsers—note: not updated since 2004
Live CSS3 support testing of your browser
Useful sidebar reference tools for Gecko browser users

Remember that such charts are guides only, are sometimes out of date, and should not be considered a replacement for thorough testing in a range of web browsers.

To inherit a parent element’s style for a property, use the value inherit. To raise a property’s weight in the cascade, use !important. Important declarations override all others.

p {color: red !important;}
Add comments to CSS files as follows:
/*
This is a comment in CSS
*/
/* This is a single-line comment */

Property Values Description Inherited
background   Shorthand for defining background
property values in a single declaration.
Values can be any of those from
background-attachment, backgroundcolor,
background-image, backgroundposition,
and background-repeat, in any
order. Example:
background: #ffffff
å url(background.gif) fixed left
å repeat-y;

backgrounds in CSS” and “CSS shorthand
for web backgrounds.”		 No
background-attachment scroll | fixed Determines whether a background image
is fixed or scrolls with the page.
 No
background-color transparent |
color		 Defines an element’s background color.
 No
background-image none | url Sets an element’s background image.
Example:
background-image:
å url(background_image.jpg);
 No
background-position length |
percentage | top |
center | bottom |
left | right		 Defines the initial position of the
background image. Defaults to 0,0. Values
are usually paired: x,y. Combinations of
keyword, length, and percentage are
permitted, although combining keywords
with either length or percentages is buggy
in some browsers. If only one keyword is
provided, the other defaults to center. If
only one length or percentage is given, it
sets the horizontal position, and the
vertical position defaults to 50%.		 No
background-repeat repeat |
repeat-x |
repeat-y |
no-repeat		 Defines how the background image tiles. No
border   Shorthand for defining border property
values in a single declaration. Values can
be any of those from border-width,
border-style, and border-color.
Borders are drawn on top of a box’s
background. Example:
border: 1px solid #000000;		 No
border-bottom   Shorthand for defining bottom border
property values		 No
border-bottom-color color | transparent Sets the bottom border color. No
border-bottom-style style (See border-style.) Sets the bottom border style. No
border-bottom-width (See border-width.) Sets the bottom border width. No
border-collapse collapse | separate Defines a table’s border model. In the
separate border model, which is the
default, each table cell has its own distinct
borders, but in the collapsed border
model, adjacent table cells share borders.		 Yes
border-color color | transparent Defines the element’s border color.
Defaults to the element’s color.		 No
border-left   Shorthand for defining left border
property values (see border).		 No
border-left-color color | transparent Sets the left border color. No
border-left-style (See border-style.) Sets the left border style. No
border-left-width (See border-width.) Sets the left border width. No