Complete CSS Reference

JavaScript Kit

CSS Reference (based on MSDN and WC3 CSS reference)

Last updated: October 21st, 2001

- Font Properties

Property	Valid Values	Example	Inherited?
font-family	[font name or type]	font-family: Verdana, Arial;	Y
font-style	normal \| italic	font-style:italic;	Y
font-variant	normal \| small-caps	font-variant:small-caps;	Y
font-weight	normal \| bold	font-weight:bold;	Y
font-size	[ xx-large \| x-large \| large \| medium \| small \| x-small \| xx-small ] \| [ larger \| smaller ] \| percentage \| length	font-size:12pt;	Y
font	[ font-style \|\| font-variant \|\| font-weight ] ? font-size [ / line-height ] ? font-family	font: bold 12pt Arial;	Y

- Color and Background Properties

Property	Valid Values	Example	Inherited?
color	color	color: red	Y
background-color	color \| transparent	background-color: yellow	N*
background-image	url \| none	background-image: url(house.jpg)	N*
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	background-repeat: no-repeat	N*
background-attachment	scroll \| fixed	background-attachment: fixed	N*
background-position	[ position \| length ] \| {1,2} \| [ top \| center \| bottom ] \|\| [ left \| center \| right ]	background-position: top center	N*
background	transparent \| color \|\| url \|\| repeat \|\| scroll \|\| position	background: silver url(house.jpg) repeat-y	N*

* Starting in CSS2, the properties indicated above are inherited.

- Text Properties

Property	Valid Values	Example	Inherited?
letter-spacing	normal \| length	letter-spacing:5pt	Y
text-decoration	none \| underline \| overline \| line-through	text-decoration:underline	N
vertical-align	sub \| super \|	vertical-align:sub	N
text-transform	capitalize \| uppercase \| lowercase \| none	text-transform:lowercase	N
text-align	left \| right \| center \| justify	text-align:center	N
text-indent	length \| percentage	text-indent:25px	N
line-height	normal \| number \| length \| percentage	line-height:15pt	N

- Box Properties

Property	Valid Values	Example	Inherited?
margin-top	length \| percentage \| auto	margin-top:5px	N
margin-right	length \| percentage \| auto	margin-right:5px	N
margin-bottom	length \| percentage \| auto	margin-bottom:1em	N
margin-left	length \| percentage \| auto	margin-left:5pt	N
margin	length \| percentage \| auto {1,4}	margin: 10px 5px 10px 5px	N
padding-top	length \| percentage	padding-top:10%	N
padding-right	length \| percentage	padding-right:15px	N
padding-bottom	length \| percentage	padding-bottom:1.2em	N
padding-left	length \| percentage	padding-left:10pt; }	N
padding	length \| percentage {1,4}	padding: 10px 10px 10px 15px	N
border-top-width	thin \| medium \| thick \| length	border-top-width:thin	N
border-right-width	thin \| medium \| thick \| length	border-right-width:medium	N
border-bottom-width	thin \| medium \| thick \| length	border-bottom-width:thick	N
border-left-width	thin \| medium \| thick \| length	border-left-width:15px	N
border-width	thin \| medium \| thick \| length {1,4}	border-width: 3px 5px 3px 5px	N
border-top-color	color	border-top-color:navajowhite	N
border-right-color	color	border-right-color:whitesmoke	N
border-bottom-color	color	border-bottom-color:black	N
border-left-color	color	border-left-color:#C0C0C0	N
border-color	color {1,4}	border-color: green red white blue; }	N
border-top-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-top-style:solid	N
border-right-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-right-style:double	N
border-bottom-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-bottom-style:groove	N
border-left-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-left-style:none	N
border-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-style:ridge; }	N
border-top	border-width \| border-style \| border-color	border-top: medium outset red	N
border-right	border-width \| border-style \| border-color	border-right: thick inset maroon	N
border-bottom	border-width \| border-style \| border-color	border-bottom: 10px ridge gray	N
border-left	border-width \| border-style \| border-color	border-left: 1px groove red	N
border	border-width \| border-style \| border-color	border: thin solid blue	N
float	none \| left \| right	float:none	N
clear	none \| left \| right \| both	clear:left	N

- Classification Properties

Property	Valid Values	Example	Inherited?
display	none \| block \| inline \| list-item	display:none	N
list-style-type	disk \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	list-style-type:upper-alpha	Y
list-style-image	url \| none	list-style-image:url(icFile.gif)	Y
list-style-position	inside \| outside	list-style-position:inside	Y
list-style	keyword \|\| position \|\| url	list-style: square outside url(icFolder.gif)	Y

- Positioning Properties

Property	Valid Values	Example	Applies to	Inherited?
clip	shape \| auto	clip:rect(0px 200px 200px 0px)	all elements	N
height	length \| auto	height:200px	DIV, SPAN and replaced elements	N
left	length \| percentage \| auto	left:0px	absolutely and relatively positioned elements	N
overflow	visible \| hidden \| scroll \| auto	overflow:scroll	all elements	N
position	absolute\| relative \| static	position:absolute	all elements	N
top	length \| percentage \| auto	top:0px	absolutely and relatively positioned elements	N
visibility	visible \| hidden \| inherit	visibility:visible	all elements	N
width	length \| percentage \| auto	width:80%	DIV, SPAN and replaced elements	N
z-index	auto \| integer	z-index:-1	absolutely and relatively positioned elements	N

- Printing Properties

Property	Valid Values	Example	Inherited?
page-break-before	auto \| always \|\| left \| right	page-break-before:always	N
page-break-after	auto \| always \|\| left \| right	page-break-before:auto	N

- Pseudo Classes

Property	Valid Values	Example	Inherited?
cursor	auto \| crosshair \| default \| hand \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	{ cursor:hand; }	Y
active, hover, link, visited	n/a	a:hover { color:red; }	Y
first-letter, first-line	any font manipulating declaration	p:first-letter{ float:left;color:blue } .	N