CSS Property Reference

Part of the Beginning HTML5 & CSS3 For Dummies Cheat Sheet

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 <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
animation-delay <time>
animation-direction normal | alternate | reverse | alternate reverse
animation-duration <time>
animation-fill-mode none | forwards | backwards | both
animation-iteration-count infinite | <number>
animation-name none | <identifier>
animation-play-state running | paused
animation-timing-function <timingfunction>
backface-visibility visible | hidden
background-attachment scroll | fixed | inherit
background-clip border-box | padding-box | content-box | inherit
background-color <color> | inherit
background-image <uri> | none | inherit
background-origin border-box | padding-box | content-box | inherit
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit
background-size <length> | <percentage> | auto | cover | contain
background [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit
border-collapse collapse | separate | inherit
border-color [ <color> ]{1,4} | inherit
border-image none | <image>
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 | <image>
border-image-slice [<number> | <percentage>]{1,4} && fill?
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4}
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
border-spacing <length> <length>? | inherit
border-style <border-style>{1,4} | inherit
border-top border-right border-bottom border-left [ <border-width> || <border-style> ||border-top-color ] | inherit
border-top-color border-right-color border-bottom-color border-left-color <color> | inherit
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius [ <length> | <percentage> ]{1,2}
border-top-style border-right-style border-bottom-style border-left-style <border-style> | inherit
border-top-width border-right-width border-bottom-width border-left-width <border-width> | inherit
border-width <border-width>{1,4} | inherit
border [ <border-width> || <border-style> ||border-top-color ] | inherit
bottom <length> | <percentage> | auto | inherit
box-shadow none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
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 <shape> | auto | inherit
color <color> | inherit
columns <'column-width'> || <'column-count'>
column-count <number> | auto
column-fill auto | balance
column-gap <length> | normal
column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
column-rule-color <color>
column-rule-style [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
column-rule-width <length> | [thin | medium | thick]
column-span none | all | inherit
column-width <length> | auto
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
counter-increment [ <identifier> <integer>? ]+ | none | inherit
counter-reset [ <identifier> <integer>? ]+ | none | inherit
cursor [ [<uri> ,]* [ 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 [ [ <family-name> | <generic-family> ] [,<family-name>| <generic-family> ]* ] | inherit
font-size <absolute-size> | <relative-size> | <length> |<percentage> | 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 <length> | <percentage> | auto | inherit
@keyframes [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
left <length> | <percentage> | auto | inherit
letter-spacing normal | <length> | inherit
line-height normal | <number> | <length> | <percentage>| inherit
list-style-image <uri> | 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 <margin-width> | inherit
margin-top margin-bottom <margin-width> | inherit
margin <margin-width>{1,4} | inherit
max-height <length> | <percentage> | none | inherit
max-width <length> | <percentage> | none | inherit
min-height <length> | <percentage> | inherit
min-width <length> | <percentage> | inherit
opacity <number> | inherit
orphans <integer> | inherit
outline-color <color> | invert | inherit
outline-style <border-style> | inherit
outline-width <border-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 <padding-width> | inherit
padding <padding-width>{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 | <length>
perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
position static | relative | absolute | fixed | inherit
quotes [<string> <string>]+ | none | inherit
right <length> | <percentage> | 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 <length> | <percentage> | inherit
text-transform capitalize | uppercase | lowercase | none |inherit
top <length> | <percentage> | auto | inherit
transform none | <transform-function>+
transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
transform-style flat | preserve-3d
transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transition-delay <time>
transition-duration <time>
transition-timing-function <timing-function>
transition-property none | <single-transition-property># [ ‘,’ <single-transition-property># ]*
unicode-bidi normal | embed | bidi-override | inherit
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |<length> | inherit
visibility visible | hidden | collapse | inherit
white-space normal | pre | nowrap | pre-wrap | pre-line |inherit
widows <integer> | inherit
width <length> | <percentage> | auto | inherit
word-spacing normal | <length> | inherit
z-index auto | <integer> | inherit
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

SERIES
Beginning HTML5 & CSS3 For Dummies Cheat Sheet

Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.