Home

CSS Property Reference

|
|  Updated:  
2016-03-26 14:29:24
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

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-count | auto
column-fill auto | balance
column-gap | normal
column-rule || ||
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

About This Article

This article is from the book: 

About the book author:

Ed Tittel is a 28-year veteran of the computer industry. A seasoned author and consultant, Ed has more than 140 books to his credit.

Chris Minnick is an accomplished author, teacher, and programmer. Minnick authored or co-authored over 20 books, including titles in the For Dummies series. He has developed video courses for top online training platforms and he teaches programming and machine learning to professional developers at some of the largest global companies.