CSS Property Reference

The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article “A Quick Guide to the CSS Value Definition Syntax” at www.dummies.com/extras/beginninghtml5css3.)

Name	Values
animation	|| || || || || ||
animation-delay
animation-direction	normal | alternate | reverse | alternate reverse
animation-duration
animation-fill-mode	none | forwards | backwards | both
animation-iteration-count	infinite |
animation-name	none |
animation-play-state	running | paused
animation-timing-function
backface-visibility	visible | hidden
background-attachment	scroll | fixed | inherit
background-clip	border-box | padding-box | content-box | inherit
background-color	| inherit
background-image	| none | inherit
background-origin	border-box | padding-box | content-box | inherit
background-position	[ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
background-repeat	repeat | repeat-x | repeat-y | no-repeat | inherit
background-size	| | auto | cover | contain
background	[‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit
border-collapse	collapse | separate | inherit
border-color	[ ]{1,4} | inherit
border-image	none |
border-image-outset	['sides' || 'horizontal' || 'vertical' || 'top' || 'bottom' || 'right' || 'left'] | inherit
border-image-repeat	['type' || 'horizontal' || 'vertical' || 'stretch' || 'repeat' || 'round'] | inherit
border-image-source	none |
border-image-slice	[ | ]{1,4} && fill?
border-image-width	[ | | | auto ]{1,4}
border-radius	[ | ]{1,4} [ / [ | ]{1,4} ]?
border-spacing	? | inherit
border-style	{1,4} | inherit
border-top border-right border-bottom border-left	[ || ||border-top-color ] | inherit
border-top-color border-right-color border-bottom-color border-left-color	| inherit
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius	[ | ]{1,2}
border-top-style border-right-style border-bottom-style border-left-style	| inherit
border-top-width border-right-width border-bottom-width border-left-width	| inherit
border-width	{1,4} | inherit
border	[ || ||border-top-color ] | inherit
bottom	| | auto | inherit
box-shadow	none | [inset? && [ ? ? ? ] ]#
break-after	auto | always | avoid | left | right | page | column | avoid-page | avoid-column
break-before	auto | always | avoid | left | right | page | column | avoid-page | avoid-column
caption-side	top | bottom | inherit
clear	none | left | right | both | inherit
clip	| auto | inherit
color	| inherit
columns	<'column-width'> || <'column-count'>
column-count	| auto
column-fill	auto | balance
column-gap	| normal
column-rule	<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
column-rule-color
column-rule-style	[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
column-rule-width	| [thin | medium | thick]
column-span	none | all | inherit
column-width	| auto
content	normal | none | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
counter-increment	[ ? ]+ | none | inherit
counter-reset	[ ? ]+ | none | inherit
cursor	[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
direction	ltr | rtl | inherit
display	inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
empty-cells	show | hide | inherit
float	left | right | none | inherit
font-family	[ [ | ] [,| ]* ] | inherit
font-size	| | | | inherit
font-style	normal | italic | oblique | inherit
font-variant	normal | small-caps | inherit
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font	[ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
height	| | auto | inherit
@keyframes	[ [ from | to | ] [, from | to | ]* block ]*
left	| | auto | inherit
letter-spacing	normal | | inherit
line-height	normal | | | | inherit
list-style-image	| none | inherit
list-style-position	inside | outside | inherit
list-style-type	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style	[ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit
margin-right margin-left	| inherit
margin-top margin-bottom	| inherit
margin	{1,4} | inherit
max-height	| | none | inherit
max-width	| | none | inherit
min-height	| | inherit
min-width	| | inherit
opacity	| inherit
orphans	| inherit
outline-color	| invert | inherit
outline-style	| inherit
outline-width	| inherit
outline	[ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit
overflow	visible | hidden | scroll | auto | inherit
overflow-wrap	normal | break-word | inherit
overflow-x	visible | hidden | scroll | auto | inherit
overflow-y	visible | hidden | scroll | auto | inherit
padding-top padding-right padding-bottom padding-left	| inherit
padding	{1,4} | inherit
page-break-after	auto | always | avoid | left | right | inherit
page-break-before	auto | always | avoid | left | right | inherit
page-break-inside	avoid | auto | inherit
perspective	none |
perspective-origin	[ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ]
position	static | relative | absolute | fixed | inherit
quotes	[ ]+ | none | inherit
right	| | auto | inherit
table-layout	auto | fixed | inherit
text-align	left | right | center | justify | inherit
text-decoration	none | [ underline || overline || line-through || blink ] | inherit
text-indent	| | inherit
text-transform	capitalize | uppercase | lowercase | none |inherit
top	| | auto | inherit
transform	none | +
transform-origin	[ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] ?
transform-style	flat | preserve-3d
transition	[ none | ] || || ||
transition-delay
transition-duration
transition-timing-function
transition-property	none | # [ ‘,’ # ]*
unicode-bidi	normal | embed | bidi-override | inherit
vertical-align	baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
visibility	visible | hidden | collapse | inherit
white-space	normal | pre | nowrap | pre-wrap | pre-line |inherit
widows	| inherit
width	| | auto | inherit
word-spacing	normal | | inherit
z-index	auto | | inherit