CSS 2.1 Reference

Many years ago, we developed a tool for web designers called Xyle Scope for which we created this CSS 2.1 reference.

The product has been discontinued, but this is still an accurate CSS 2.1 reference that many people find useful. So we decided to keep it.

Today, we focus on other Things.

Cascading Style Sheets 2.1 Reference : Properties

Quick access to all 95 CSS 2.1 properties

Sections

Text
Type
Spacing
Layout
Layout Box
Positioning
Background
Elements
Lists
Tables
Generated
Miscellany
User Interface
Printing
Instructions

Properties

 

Instructions

JavaScript seems to be disabled in your browser. This web application does not work without JavaScript.

  1. Choose sections and properties from the respective columns.
  2. Some terms are underlined to signify that there are associated notes. Notes contain further explanations and examples.
  3. To view a term's note, it suffices to place the mouse pointer over the underlined term. The note will be displayed as long as the pointer remains there.
  4. A note can be made permanent by clicking on the underlined term. Clicking again reverts to temporary mode.
  5. The arrow keys can also be used to navigate sections, properties, and notes. IE and Opera users may want to use the W (up), A (left), S (right), Y (down) keys.
color color The text color. Also used for text decorations and as an initial value for border colors. Either a rgb-value, a hexadecimal value, or one of 17 predefined color names. depends on browser yes all elements FF Op Sa IE
font font Shortcut for specifying all font properties and line-height Either

font-style font-variant font-weight font-size/line-height font-family

or one of 6 predefined system font keywords.

"/line-height" is optional. Also font-style, font-variant, and font-weight are optional and may appear in any order.

 see individual properties yes all elements FF Op Sa IE
font-family font-family A list of font family names. The first one found on the computer will be used. A comma "," separated list of specific font families and generic font families. depends on browser yes all elements, except replaced elements FF Op Sa IE
font-size font-size The size of the font Either a length, a percentage, one of several predefined absolute sizes, or relative sizes.

Percentages and the em unit are relative to the font size of the parent (e.g. 1.2em = 120%).

 medium yes all elements FF Op Sa IE
font-style font-style Specifies an oblique or italic style within the current font family Either normal, italic, or oblique. normal yes all elements FF Op Sa IE
font-variant font-variant Specifies a small-caps style within the current font family Either normal or small-caps. normal yes all elements FF Op Sa IE
font-weight font-weight Specifies the weight of the current font Either normal, bold, bolder, lighter, or one of 9 numeric weights. normal yes all elements FF Op Sa IE
text-decoration text-decoration Specifies underlining, over-lining, strike-out, or blinking effects Either none or any combination of the following keywords: underline, overline, line-through, blink. none no all elements FF Op Sa IE
text-transform text-transform Specifies the case of text Either capitalize, uppercase, lowercase, or none. none yes all elements FF Op Sa IE
white-space white-space Specifies how tabs, line breaks, and extra white space in an element's content is handled Either normal, pre, nowrap, pre-wrap, or pre-line.

The values pre-wrap and pre-line were added in CSS 2.1 and are hardly supported by major browsers.

 normal yes block elements FF Op Sa IE
text-align text-align Specifies the horizontal alignment of lines of text Either left, right, center, or justify. depends on browser yes block-level elements FF Op Sa IE
text-indent text-indent Specifies the indentation of the first line of a paragraph Either a length or a percentage.

Percentages refer to the parent element's width.

 0 yes block-level elements FF Op Sa IE
line-height line-height Specifies the minimum distance between baselines of adjacent lines Either a factor, a length, or a percentage.

Percentages and em values are calculated for the current font size. The result of this computation is inherited.

 depends on browser yes all elements FF Op Sa IE
word-spacing word-spacing Specifies an additional amount of space to be added to the font specific word spacing Either normal or a length.

Negative values are allowed provided the resulting amount of word spacing is not negative. Relative values are computed once and then inherited.

 normal yes all elements FF Op Sa IE
letter-spacing letter-spacing Specifies an additional amount of space to be added to the font specific letter spacing Either normal or a length.

Negative values are allowed. Relative values are computed once and then inherited.

 normal yes all elements FF Op Sa IE
vertical-align vertical-align Raise or lower letters and images above or below the baseline of text Either a percentage, a length, or one of 8 predefined vertical alignment keywords.

Percentages refer to the line height of the element itself. A negative value lowers the element.

 baseline no inline elements FF Op Sa IE
direction direction Specifies writing direction, direction of table column layout, horizontal overflow, and the position of incomplete last lines. Either ltr or rtl. ltr yes all elements FF Op Sa IE
unicode-bidi unicode-bidi Controls the Unicode standard bidirectional rendering algorithm Either normal, embed, or bidi-override. normal no all elements FF Op IE
margin margin Specifies all 4 individual margin properties in one step Up to 4 instances of either a length, a percentage, or auto.

Percentages refer to width of containing block. Negative values are allowed.

 0 no all elements FF Op Sa IE
margin-... margin-top, margin-right, margin-bottom, margin-left Specifies the space between the element's bounding box and the bounding boxes of adjacent elements Either a length, a percentage, or auto.

Percentages refer to width of containing block. Negative values are allowed.

 0 no all elements FF Op Sa (IE)
padding padding Specifies all 4 individual padding properties in one step Up to 4 instances of either a length, or a percentage.

Percentages refer to width of containing block.

 0 no all elements FF Op Sa IE
padding-... padding-top, padding-right, padding-bottom, padding-left Specifies how much space to insert between the contents of an element and its margin or border (if there is one) Either a length, or a percentage.

Percentages refer to width of containing block.

 0 no all elements FF Op Sa IE
border border, border-top, border-right, border-bottom, border-left Specifies width, color, and style on one or more borders border-width border-style border-color

Individual values are optional and may appear in any order.

 see individual properties no all elements FF Op Sa IE
border-width border-width Specifies the border's thickness. The value needs to be large enough for some border styles to render correctly. Up to 4 instances of a length or the keywords thin, medium, or thick. medium no all elements FF Op Sa IE
border-...-width border-top-width, border-right-width, border-bottom-width, border-left-width Specifies the border's thickness. The value needs to be large enough for some border styles to render correctly. Either a length or one of the keywords thin, medium, or thick. medium no all elements FF Op Sa IE
border-style border-style Specifies all individual border styles in one step Up to 4 instances of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa (IE)
border-...-style border-top-style, border-right-style, border-bottom-style, border-left-style Specifies the appearance of the border One of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa (IE)
border-color border-color Specifies all border colors at once Up to 4 instances of a rgb-value, a hexadecimal value, transparent, or one of 17 predefined color names. taken from the color property of the element no all elements FF Op Sa (IE)
border-...-color border-top-color, border-right-color, border-bottom-color, border-left-color The individual border colors Either a rgb-value, a hexadecimal value, transparent, or one of 17 predefined color names. taken from the color property of the element no all elements FF Op Sa (IE)
width width Specifies the width of an element's content area Either a length, a percentage, or auto.

Percentages refer to the parent element's width.

 auto no block-level and replaced elements FF Op Sa (IE)
min-width min-width Protects an element from becoming too narrow Either a length or a percentage.

Percentages refer to width of containing block.

 0 no all elements except non-replaced inline elements and table elements FF Op Sa
max-width max-width Protects an element from becoming too wide Either a length, a percentage, or none.

Percentages refer to width of containing block.

 none no all elements except non-replaced inline elements and table elements FF Op Sa
height height Specifies the height of an element's content area Either a length or auto. auto no block-level and replaced elements FF Op Sa (IE)
min-height min-height Protects an element from becoming too small Either a length or a percentage.

Percentages refer to the containing block's height, provided that height has been set explicitly. Otherwise the value is treated as 0.

 0 no all elements except non-replaced inline elements and table elements FF Op Sa
max-height max-height Protects an element from becoming too tall Either a length, a percentage, or none.

Percentages refer to the containing block's height, provided that height has been set explicitly. Otherwise the value is treated as none.

 none no all elements except non-replaced inline elements and table elements FF Op Sa
overflow overflow Determines the display of child elements that do not fit within the content area of their parent Either visible, hidden, scroll, or auto.

  • visible: children may stick out
  • hidden: the part that sticks out is hidden
  • scroll: scroll bars are shown
  • auto: scroll bars appear if necessary

 visible no block level and replaced elements FF Op Sa IE
clip clip Allows the visible portion of an element to be clipped to a specified rectangle Either a shape or auto. auto no absolutely positioned elements FF Op Sa IE
display display Determines whether an element is displayed a a block, inline, list, or other type of item Either none, inline, block, list-item, run-in, inline-block, inline-table, or one of several parts of a table. inline no all elements (FF) Op Sa (IE)
position position Specifies the method by which the position of the element's box is determined. Elements that are not "static" make use of the positioning properties "top, right, bottom, and left." Either static, relative, absolute, or fixed.

The values absolute, and fixed imply that the element must be block. The display property is ignored in this case.

 static no all elements FF Op Sa (IE)
top, right, bottom, left top, right, bottom, left Specifies the position of fixed, absolutely, and relatively positioned elements Either a length, percentage, or auto. auto no elements with position other than static FF Op Sa IE
float float Moves an element to the left or right of the parent element until it encounters another block-level element. Floated elements are removed from the normal flow and treated as block-level elements. Either left, right, or none. none. no all elements FF Op Sa IE
clear clear Lists the sides on which floating elements are not allowed Either none, left, right, or both. none no all elements FF Op Sa IE
z-index z-index Specifies the order in which overlapping elements are stacked on top of each other. Normally elements that come later in the source document are on top of earlier elements. Either auto or an integer.

A negative value places an element behind its containing block.

 auto no positioned elements FF Op Sa IE
visibility visibility Makes an element completely transparent without removing it from the document flow Either visible, hidden, or collapse. visible yes all elements FF Op Sa IE
background background Shortcut for setting all 5 background properties at once background-attachment background-color background-image background-position background-repeat.

Individual values can be specified in any order. If values are omitted the initial values of the respective properties are assumed.

 see individual properties no all elements FF Op Sa IE
background-attachment background-attachment Determines whether the image should be fixed or moveable when the element is scrolled Either scroll or fixed. scroll no all elements FF Op Sa (IE)
background-color background-color Sets the background color of the element's content and padding areas Either a rgb-value, a hexadecimal value, one of 17 predefined color names, or transparent. transparent no all elements FF Op Sa IE
background-image background-image Sets the image at a specified URL as the background for an element Either a URL or none. none no all elements FF Op Sa IE
background-position background-position Specifies the image's initial position A horizontal position value followed by a vertical position value. Both are specified by using either a percentage, a length, or one of 5 position keywords.

Percentages are used to determine points both in the element and the image. The image is placed such that both points match.

 0 0 no all elements FF Op Sa IE
background-repeat background-repeat Determines whether and how the image is repeated in the element Either repeat, repeat-x, repeat-y, no-repeat. repeat no all elements FF Op Sa IE
list-style list-style Shortcut for specifying individual list-style properties at once list-style-type list-style-position list-style-image.

Individual values are optional and can appear in any order.

 see individual properties yes elements with display value list-item FF Op Sa IE
list-style-type list-style-type Specifies a label Either none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-greek, armenian, georgian. disc yes elements with display value list-item FF Op Sa (IE)
list-style-position list-style-position Determines whether the label is placed inside our outside the list-item box Either inside or outside. outside yes elements with display value list-item FF Op Sa IE
list-style-image list-style-image Specifies a small image to be used as the label Either a URL or none. none yes elements with display value list-item FF Op Sa IE
border-collapse border-collapse Determines whether table cells have separate borders or share borders with adjacent cells, groups of rows and columns, or the table itself. Either collapse or separate. separate yes tables and inline tables (display: inline-table) FF Op Sa IE
border-spacing border-spacing Determines the space between pairs of borders Either 1 or 2 instances of a length.

If 2 values are present, the first one determines horizontal and the second vertical distance.

 0 yes table and inline tables with separate borders FF Op Sa
empty-cells empty-cells Hides borders for empty cells Either show or hide.

Examples:

hide
1/21/3
2/12/22/3
show
1/21/3
2/12/22/3

 show yes table cells with separated borders FF Op Sa
table-layout table-layout Enables fast table layout Either auto or fixed.

If table-layout is set to fixed than the width of the table columns are computed after the first row. Explicit values for width on column elements are honored.

 auto no tables and inline tables having their width property not set to auto. FF Op Sa IE
caption-side caption-side Determines whether the caption is placed above or below the table Either top or bottom. top yes table-caption elements FF Op Sa
other properties other properties affecting tables Properties that have a special effect when applied to tables or cells: width, vertical-align
width width Sets a minimum width on a table or cell Either a length, a percentage, or auto.

When applied to the table element, percentages refer to the parent element's width. Otherwise they refer to the table's width.

 auto no table, table-column, and table-cell elements FF Op Sa IE
vertical-align vertical-align Determines the vertical alignment of table cells Either baseline, top, bottom, or middle. baseline no table cells FF Op Sa IE
content content Specifies text to be used as the content of pseudo-elements that were introduced using :before or :after selectors One or more instances of either a text string, a counter, counters, or the keywords normal, open-quote, close-quote, no-open-quote, no-close-quote. normal no :before and :after pseudo-elements FF Op Sa
quotes quotes Specifies the actual quote marks to be used when open-quote or close-quote values are specified for the content property Either none or any number of text string pairs.

Each pair of strings specifies open and close quote marks for increasingly nested levels of quotations.

 depends on browser yes all elements FF Op
counter-increment counter-increment Increments the specified counters Either none or any number of counter names. none no all elements (FF) Op
counter-reset counter-reset Resets the specified counters Either none or any number of counter names. none no all elements (FF) Op
cursor cursor Either a URL, auto, or one of 19 predefined cursor keywords. auto yes all elements (FF) (Op) (Sa) IE
outline outline Shortcut for setting all three individual outline properties. An outline is drawn around the element but doesn't take up any space. It may thus overlap adjacent elements. Useful for temporarily highlighting an element. outline-width outline-style outline-color

Individual values are optional and may appear in any order.

 see individual properties no all elements FF Op Sa
outline-width outline-width Specifies the outline width Either a length or one of the keywords thin, medium, or thick. medium no all elements FF Op Sa
outline-style outline-style Specifies the appearance of the outline Either one of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa
outline-color outline-color Specifies the color of the outline Either invert or on of the color values. invert no all elements FF Op Sa
page-break-before page-break-before Determines how page breaks before an element should be handled Either auto, always, avoid, left, or right.

Values left and right indicate that a page break should occur, and that the element should be placed on the left or right page, respectively. (Example: When printing books it is common for all chapters to start on the right page. This can be achieved by applying page-break-before: right to ever chapter heading.)

 auto no block-level elements (FF) (Op) (Sa) (IE)
page-break-after page-break-after Determines how page breaks after an element should be handled Either auto, always, avoid, left, or right.

Values left and right indicate that a page break should occur, and that the next element should be placed on the left or right page, respectively. (Example: page-break-after: avoid can be used to prevents page breaks after headings.)

 auto no block-level elements (FF) (Op) (Sa) (IE)
page-break-inside page-break-inside Indicates whether a page break inside an element should or should not occur. Either auto or avoid.

Example: page-break-inside: avoid could be used on list elements ul, ol, dl to prevent list items to appear on different pages.

 auto yes block-level elements Op
widows widows If a paragraph is broken across two pages there is a certain number of lines that appear at the top and the bottom of the page (these are referred to as "widows" and "orphans", respectively). This property specifies the minimum number of widows. An integer. 2 yes block-level elements Op
orphans orphans If a paragraph is broken across two pages there is a certain number of lines that appear at the top and the bottom of the page (these are referred to as "widows" and "orphans", respectively). This property specifies the minimum number of orphans. An integer. 2 yes block-level elements Op
rgb-value

Red, green, and blue components specified as either percentages or numbers in the range 0 ... 255.

Examples:

rgb(100%, 50%, 0%), rgb(255, 128, 0)
hexadecimal value

The symbol # followed by pairs of hexadecimal digits specifying red, green, and blue components. A hexadecimal digit is a number or letter in the range 0 ... 9, a (= 10) ... f (= 15).

Examples:

#ffa500 mi, #008000 mi, #800080 mi

#rgb can be used as a shortcut for #rrggbb.

color names
aqua mi, black mi, blue mi, fuchsia mi, gray mi,
green mi, lime mi, maroon mi, navy mi, olive mi, orange mi, purple mi, red mi, silver mi, teal mi,
white mi, yellow mi
system font keywords

These are fonts typically used by the underlying operating system. The parenthesis contain a preview if your browser supports system font keywords

caption (captioned controls like buttons)
icon (icon labels)
menu (menu lists)
message-box   (dialog boxes)
small-caption (small controls)
status-bar (window status bar)
specific font families

Examples:

"Verdana", "Times New Roman", "Andale Mono".
generic font families
sans-serif (no cross-strokes)
serif (with cross-strokes)
monospace   (each letter takes the same amount of space)
cursive (resembles handwriting)
fantasy (for decorative purposes)
length

A decimal number followed by an absolute unit:

mm (Millimeter)
cm  (Centimeter, 1cm = 10mm)
in (Inch, 1in = 2.54cm)
pt (Point, 1pt = 1/72 in)
pc (Pica, 1pc = 12pt)

a relative unit:

em  (1em = size of current font)
ex (1ex = height of letter 'x' in current font)

or the pixel unit:

px
percentage

A decimal number in the range 0...100 followed by a % symbol.

absolute sizes

For standard web browsers the CSS specification recommends the following scaling factors which also correspond to certain HTML headings:

xx-large 2 h1
x-large 1.5 h2
large 1.2 h3
medium 1 h4
small 0.89 h5
x-small 0.75
xx-small 0.6 h6
relative sizes

The following keywords increase or decrease the current font size by one step according to the table of font sizes (see absolute sizes): larger, smaller

numeric weights
100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900
pre

All white-space characters are preserved. This corresponds to the HTML <pre> element. Tabs are replaced by up to 8 spaces to ensure that columns have a constant width of 8 characters.

nowrap

Collapses extra white-space like normal, but does not automatically break lines that are too long. Line breaks only occur at <br /> elements.

pre-wrap

Like pre, but automatically introduces line breaks to avoid loosing content when the element's width is too narrow.

pre-line
Like normal, but line break characters in the text are honored.
factor

A decimal number (e.g. 1.2) to be multiplied with the font size. Since this factor will be inherited, the line height will be recalculated accordingly for children with different font sizes.

vertical alignment keywords
baseline
sub (subscript)
super (superscript)
top (aligns top of element with tallest thing on the line)
text-top (aligns top of element with top of parent's tallest letter)
middle (element is centered 0.5ex above baseline)
bottom (aligns bottom of element with lowest thing on the line)
text-bottom (aligns bottom of element with bottom of parent's font)
4 instances

Margin, padding, border-width, border-style, and border-color properties can be used to set the associated individual top, right, bottom, left properties.

Example:

margin: 1em;
(all margins = 1em)
margin: 1em 2em;
(top & bottom = 1em, left & right = 2em)
margin: 1em 2em 3em;
(top = 1em, left & right = 2em, bottom = 3em)
margin: 1em 2em 3em 4em;
(top = 1em, right = 2em, bottom = 3em, left = 4em)
dotted
border-width: 2px
dashed
border-width: 2px
solid
border-width: 2px
double
border-width: 3px
groove
border-width: 6px
ridge
border-width: 6px
inset
border-width: 6px
outset
border-width: 6px
hidden

Similar to none except for shared borders in tables where hidden will remove other borders.

shape

Example:

rect(5px, 110px, 55px, 10px)

The values are top, right, bottom, left. The example thus refers to a rectangle that starts 5px from the top and 10px from the left, and is 100px wide and 50px tall.

parts of a table

table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption

inline

Does not start and end a new line. May span several lines, generating text boxes on each line.

block

Starts and ends on a new line.

list-item

Displayed as a box with a label. The characteristics of the label are set with the list-style property.

run-in

If the next sibling is displayed as a block box then the element is displayed as if it were the first inline box of that sibling.

inline-block

Treated as an inline box seen from the outside, but the content inside the box is formatted as a block-level element.

inline-table
The following magic square (from Albrecht Dürer's engraving named "Melancholia") is realized as an inline-table
163213
510118
96712
415141
(numbers from 1 to 16 are arranged in such a way that all rows, columns, and main diagonals have the same sum).
static

The properties bottom, left, top, and right have no effect on static elements. Instead static elements are placed inside their parent's content box according to the normal flow of the document.

relative

The properties bottom, left, top, and right move the element up, right, down, or left from its normal position.

A relatively positioned element becomes the containing block for absolutely positioned children.

absolute

The properties bottom, left, top, and right place the element relative to the closest containing block.

An absolutely positioned element becomes the containing block for absolutely positioned children. The initial containing block is the viewport.

fixed

The properties bottom, left, top, and right place the element relative to the viewport. Fixed elements do not move with the scroll bar.

A fixed element becomes the containing block for absolutely positioned children.

position keywords
left (= 0% horizontal)
right (= 100% horizontal)
center (= 50% horizontal or vertical)
top (= 0% vertical)
bottom (= 100% vertical)
disc
  • item one
  • item two
  • item three
circle
  • item one
  • item two
  • item three
square
  • item one
  • item two
  • item three
decimal
  • item one
  • item two
  • item three
decimal-leading-zero
  • item one
  • item two
  • item three
lower-roman
  • item one
  • item two
  • item three
upper-roman
  • item one
  • item two
  • item three
lower-alpha
  • item one
  • item two
  • item three
upper-alpha
  • item one
  • item two
  • item three
lower-latin
  • item one
  • item two
  • item three
upper-latin
  • item one
  • item two
  • item three
lower-greek
  • item one
  • item two
  • item three
armenian
  • item one
  • item two
  • item three
georgian
  • item one
  • item two
  • item three
baseline

Ensures that the baselines of all first lines of text across every row match.

text string

Strings are either delimited by single or double quotes.

Examples:

"structure", 'presentation'

Strings may span several lines if a backslash "\" appears immediately before the line break. The line break however is ignored in the output. To include a line break in the output the unicode escape sequence "\A" has to be used.

counter

Examples:

counter(chapter), counter(section, roman)

A single style sheet can make use of several counters. The name of the particular counter appears inside the parenthesis and can be chosen by the author. An optional list-style-type can be given to specify how counters are represented. The default is decimal.

counters

A nested counter.

Examples:

counters(chapter, "."), counters(section, "-", roman)

The second argument specifies the string inserted between numbers representing different nesting levels

cursor keywords
default, pointer, text, help, wait, progress, crosshair, move,
e-resize, ne-resize, n-resize, nw-resize,
w-resize, sw-resize, s-resize, se-resize

Hover over a keyword to get a preview of the respective cursor.