Properties

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/2 1/3 2/1 2/2 2/3 show 1/2 1/3 2/1 2/2 2/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

hide
	1/2	1/3
2/1	2/2	2/3

show
	1/2	1/3
2/1	2/2	2/3

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:

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

16	3	2	13
5	10	11	8
9	6	7	12
4	15	14	1

(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.

CSS 2.1 Reference

Cascading Style Sheets 2.1 Reference : Properties

Quick access to all 95 CSS 2.1 properties

Sections

Instructions

Products

Support

News

Company

Examples:

Examples:

Examples:

Example:

Example:

Examples:

Examples:

Examples: