CSS2 Reference

The links in the "Property" column point to more useful information about the specific property.

Background Border Classification Dimension Font

Generated Content List and Marker Margin Outlines Padding

Positioning Table Text Pseudo-classes Pseudo-elements

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Background

On-line examples

Property	Description	Values	IE	F	N	W3C
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position	4	1	6	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed	4	1	6	1
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent	4	1	4	1
background-image	Sets an image as the background	url none	4	1	4	1
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	4	1	6	1
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat	4	1	4	1

Border

On-line examples

Property	Description	Values	IE	F	N	W3C
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color	4	1	4	1
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color	4	1	6	1
border-bottom-color	Sets the color of the bottom border	border-color	4	1	6	2
border-bottom-style	Sets the style of the bottom border	border-style	4	1	6	2
border-bottom-width	Sets the width of the bottom border	thin medium thick length	4	1	4	1
border-color	Sets the color of the four borders, can have from one to four colors	color	4	1	6	1
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color	4	1	6	1
border-left-color	Sets the color of the left border	border-color	4	1	6	2
border-left-style	Sets the style of the left border	border-style	4	1	6	2
border-left-width	Sets the width of the left border	thin medium thick length	4	1	4	1
border-right	A shorthand property for setting all of the properties for the right border in one declaration	border-right-width border-style border-color	4	1	6	1
border-right-color	Sets the color of the right border	border-color	4	1	6	2
border-right-style	Sets the style of the right border	border-style	4	1	6	2
border-right-width	Sets the width of the right border	thin medium thick length	4	1	4	1
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset	4	1	6	1
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color	4	1	6	1
border-top-color	Sets the color of the top border	border-color	4	1	6	2
border-top-style	Sets the style of the top border	border-style	4	1	6	2
border-top-width	Sets the width of the top border	thin medium thick length	4	1	4	1
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length	4	1	4	1

Classification

On-line examples

Property	Description	Values	IE	F	N	W3C
clear	Sets the sides of an element where other floating elements are not allowed	left right both none	4	1	4	1
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	4	1	6	2
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	4	1	4	1
float	Sets where an image or a text will appear in another element	left right none	4	1	4	1
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4	1	4	2
visibility	Sets if an element should be visible or invisible	visible hidden collapse	4	1	6	2

Dimension

On-line examples

Property	Description	Values	IE	F	N	W3C
height	Sets the height of an element	auto length %	4	1	6	1
line-height	Sets the distance between lines	normal number length %	4	1	4	1
max-height	Sets the maximum height of an element	none length %	-	1	6	2
max-width	Sets the maximum width of an element	none length %	-	1	6	2
min-height	Sets the minimum height of an element	length %	-	1	6	2
min-width	Sets the minimum width of an element	length %	-	1	6	2
width	Sets the width of an element	auto % length	4	1	4	1

Font

On-line examples

Property	Description	Values	IE	F	N	W3C
font	A shorthand property for setting all of the properties for a font in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	4	1	4	1
font-family	A prioritized list of font family names and/or generic family names for an element	family-name generic-family	3	1	4	1
font-size	Sets the size of a font	xx-small x-small small medium large x-large xx-large smaller larger length %	3	1	4	1
font-size-adjust	Specifies an aspect value for an element that will preserve the x-height of the first-choice font	none number	-	-	-	2
font-stretch	Condenses or expands the current font-family	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	-	-	-	2
font-style	Sets the style of the font	normal italic oblique	4	1	4	1
font-variant	Displays text in a small-caps font or a normal font	normal small-caps	4	1	6	1
font-weight	Sets the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4	1	4	1

Generated Content

Property	Description	Values	IE	F	N	W3C
content	Generates content in a document. Used with the :before and :after pseudo-elements	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote		1	6	2
counter-increment	Sets how much the counter increments on each occurrence of a selector	none identifier number				2
counter-reset	Sets the value the counter is set to on each occurrence of a selector	none identifier number				2
quotes	Sets the type of quotation marks	none string string	-	1	6	2

List and Marker

On-line examples

Property	Description	Values	IE	F	N	W3C
list-style	A shorthand property for setting all of the properties for a list in one declaration	list-style-type list-style-position list-style-image	4	1	6	1
list-style-image	Sets an image as the list-item marker	none url	4	1	6	1
list-style-position	Sets where the list-item marker is placed in the list	inside outside	4	1	6	1
list-style-type	Sets the type of the list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	4	1	4	1
marker-offset		auto length		1	7	2

Margin

On-line examples

Property	Description	Values	IE	F	N	W3C
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left	4	1	4	1
margin-bottom	Sets the bottom margin of an element	auto length %	4	1	4	1
margin-left	Sets the left margin of an element	auto length %	3	1	4	1
margin-right	Sets the right margin of an element	auto length %	3	1	4	1
margin-top	Sets the top margin of an element	auto length %	3	1	4	1

Outlines

Property	Description	Values	IE	F	N	W3C
outline	A shorthand property for setting all the outline properties in one declaration	outline-color outline-style outline-width	-	1.5	-	2
outline-color	Sets the color of the outline around an element	color invert	-	1.5	-	2
outline-style	Sets the style of the outline around an element	none dotted dashed solid double groove ridge inset outset	-	1.5	-	2
outline-width	Sets the width of the outline around an element	thin medium thick length	-	1.5	-	2

Padding

On-line examples

Property	Description	Values	IE	F	N	W3C
padding	A shorthand property for setting all of  the padding properties in one declaration	padding-top padding-right padding-bottom padding-left	4	1	4	1
padding-bottom	Sets the bottom padding of an element	length %	4	1	4	1
padding-left	Sets the left padding of an element	length %	4	1	4	1
padding-right	Sets the right padding of an element	length %	4	1	4	1
padding-top	Sets the top padding of an element	length %	4	1	4	1

Positioning

On-line examples

Property	Description	Values	IE	F	N	W3C
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	5	1	6	2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	4	1	6	2
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4	1	4	2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	4	1	6	2
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4	1	4	2
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length	5	1	6	2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4	1	4	2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4	1	4	1
z-index	Sets the stack order of an element	auto number	4	1	6	2

Table

Property	Description	Values	IE	F	N	W3C
border-collapse	Sets the border model of a table	collapse separate	5	1	7	2
border-spacing	Sets the distance between the borders of adjacent cells (only for the "separated borders" model)	length length	-	1	6	2
caption-side	Sets the position of the caption according to the table	top bottom left right	-	1	6	2
empty-cells	Sets whether cells with no visible content should have borders or not (only for the "separated borders" model)	show hide	-	1	6	2
table-layout	Sets the algorithm used to lay out the table	auto fixed	5	1	6	2

Text

On-line examples

Property	Description	Values	IE	F	N	W3C
color	Sets the color of a text	color	3	1	4	1
direction	Sets the text direction	ltr rtl	6	1	6	2
letter-spacing	Increase or decrease the space between characters	normal length	4	1	6	1
text-align	Aligns the text in an element	left right center justify	4	1	4	1
text-decoration	Adds decoration to text	none underline overline line-through blink	4	1	4	1
text-indent	Indents the first line of text in an element	length %	4	1	4	1
text-shadow		none color length
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	4	1	4	1
unicode-bidi		normal embed bidi-override	5			2
white-space	Sets how white space inside an element is handled	normal pre nowrap	5	1	4	1
word-spacing	Increase or decrease the space between words	normal length	6	1	6	1

Pseudo-classes

On-line examples

Pseudo-class	Purpose	IE	F	N	W3C
:active	Adds special style to an activated element	4	1	8	1
:focus	Adds special style to an element while the element has focus	-	-	-	2
:hover	Adds special style to an element when you mouse over  it	4	1	7	1
:link	Adds special style to an unvisited link	3	1	4	1
:visited	Adds special style to a visited link	3	1	4	1
:first-child	Adds special style to an element that is the first child of some other element		1	7	2
:lang	Allows the author to specify a language to use in a specified element		1	8	2

Pseudo-elements

On-line examples

Pseudo-element	Purpose	IE	F	N	W3C
:first-letter	Adds special style to the first letter of a text	5	1	8	1
:first-line	Adds special style to the first line of a text	5	1	8	1
:before	Inserts some content before an element		1.5	8	2
:after	Inserts some content after an element		1.5	8	2

Print Properties

Printing HTML documents has always been problematic. In CSS2 the print properties are added to make it easier to print from the Web.

---

The links in the "Property" column point to more useful information about the specific property.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property	Description	Values	W3C
orphans	Sets the minimum number of lines for a paragraph that must be left at the bottom of a page	number	2
marks	Sets what sort of marks should be rendered outside the page box	none crop cross
page	Sets a page type to use when displaying an element	auto identifier	2
page-break-after	Sets the page-breaking behavior after an element	auto always avoid left right	2
page-break-before	Sets the page-breaking behavior before an element	auto always avoid left right	2
page-break-inside	Sets the page-breaking behavior inside an element	auto avoid	2
size	Sets the orientation and size of a page	auto portrait landscape
widows	Sets the minimum number of lines for a paragraph that must be left at the top of a page	number	2

Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

• by blind people
• to help users learning to read
• to help users who have reading problems
• for home entertainment
• in the car
• by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

h1, h2, h3, h4
            {
            voice-family: male;
            richness: 80;
            cue-before: url("beep.au")
            }

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

---

CSS2 Aural Reference

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property	Description	Values	W3C
azimuth	Sets where the sound/voices should come from (horizontally)	angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards	2
cue	A shorthand property for setting the cue-before and cue-after properties in one declaration	cue-before cue-after	2
cue-after	Specifies a sound to be played after speaking an element's content to delimit it from other	none url	2
cue-before	Specifies a sound to be played before speaking an element's content to delimit it from other	none url	2
elevation	Sets where the sound/voices should come from (vertically)	angle below level above higher lower	2
pause	A shorthand property for setting the pause-before and pause-after properties in one declaration	pause-before pause-after	2
pause-after	Specifies a pause after speaking an element's content	time %	2
pause-before	Specifies a pause before speaking an element's content	time %	2
pitch	Specifies the speaking voice	frequency x-low low medium high x-high	2
pitch-range	Specifies the variation in the speaking voice. (Monotone voice or animated voice?)	number	2
play-during	Specifies a sound to be played while speaking an element's content	auto none url mix repeat	2
richness	Specifies the richness in the speaking voice. (Rich voice or thin voice?)	number	2
speak	Specifies whether content will render aurally	normal none spell-out	2
speak-header	Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell	always once	2
speak-numeral	Specifies how to speak numbers	digits continuous	2
speak-punctuation	Specifies how to speak punctuation characters	none code	2
speech-rate	Specifies the speed of the speaking	number x-slow slow medium fast x-fast faster slower	2
stress	Specifies the "stress" in the speaking voice	number	2
voice-family	A prioritized list of voice family names that contain specific voices	specific-voice generic-voice	2
volume	Specifies the volume of the speaking	number % silent x-soft soft medium loud x-loud	2

Measurements

Unit	Description
%	percentage
in	inch
cm	centimeter
mm	millimeter
em	one em is equal to the current font size of the current element
ex	one ex is the x-height of a font (x-height is usually about half the font-size)
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

Colors

Unit	Description
color_name	A color name (e.g. red)
rgb(x,x,x)	An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)	An RGB percentage value (e.g. rgb(70%,0%,0%))
#rrggbb	A HEX number (e.g. #ff0000)

Colors are displayed combining  RED, GREEN, and BLUE light sources.

---

Color Values

CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

This table shows the result of combining Red, Green, and Blue light sources:.

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

---

Color Names

A collection of color names is supported by most browsers.

Note: Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.

Color	Color HEX	Color Name
	#F0F8FF	AliceBlue
	#FAEBD7	AntiqueWhite
	#7FFFD4	Aquamarine
	#000000	Black
	#0000FF	Blue
	#8A2BE2	BlueViolet
	#A52A2A	Brown