This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors, all together in alphabetical order, as well as just the selectors by type; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized.  Also included is a brief DOM-CSS / CSSOM reference.

Note that CSS rule-definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM, the rule-management system, is object-based.

See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

Basic rule syntax

 Be warned that any syntax error in a rule-definition will invalidate the entire rule.

Style rules

selectorlist { property: value; [more property:value; pairs] }

...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]


See selector, pseudo-element, pseudo-class lists below.

Examples

strong { color: red;}                                
div.menu-bar li:hover > ul { display: block; }

More about examples: #1, #2

@rules

As these have so many different structure-formats, see the desired At-rule for syntax.

Keyword index

  1. A
    1. :active
    2. additive-symbols
    3. ::after (:after)
    4. align-content
    5. align-items
    6. align-self
    7. all
    8. <angle>
    9. animation
    10. animation-delay
    11. animation-direction
    12. animation-duration
    13. animation-fill-mode
    14. animation-iteration-count
    15. animation-name
    16. animation-play-state
    17. animation-timing-function
    18. @annotation
    19. annotation()
    20. attr()
  2. B
    1. ::backdrop
    2. backface-visibility
    3. background
    4. background-attachment
    5. background-blend-mode
    6. background-clip
    7. background-color
    8. background-image
    9. background-origin
    10. background-position
    11. background-repeat
    12. background-size
    13. <basic-shape>
    14. ::before (:before)
    15. <blend-mode>
    16. block-size
    17. blur()
    18. border
    19. border-block-end
    20. border-block-end-color
    21. border-block-end-style
    22. border-block-end-width
    23. border-block-start
    24. border-block-start-color
    25. border-block-start-style
    26. border-block-start-width
    27. border-bottom
    28. border-bottom-color
    29. border-bottom-left-radius
    30. border-bottom-right-radius
    31. border-bottom-style
    32. border-bottom-width
    33. border-collapse
    34. border-color
    35. border-image
    36. border-image-outset
    37. border-image-repeat
    38. border-image-slice
    39. border-image-source
    40. border-image-width
    41. border-inline-end
    42. border-inline-end-color
    43. border-inline-end-style
    44. border-inline-end-width
    45. border-inline-start
    46. border-inline-start-color
    47. border-inline-start-style
    48. border-inline-start-width
    49. border-left
    50. border-left-color
    51. border-left-style
    52. border-left-width
    53. border-radius
    54. border-right
    55. border-right-color
    56. border-right-style
    57. border-right-width
    58. border-spacing
    59. border-style
    60. border-top
    61. border-top-color
    62. border-top-left-radius
    63. border-top-right-radius
    64. border-top-style
    65. border-top-width
    66. border-width
    67. bottom
    68. box-decoration-break
    69. box-shadow
    70. box-sizing
    71. break-after
    72. break-before
    73. break-inside
    74. brightness()
  3. C
    1. calc()
    2. caption-side
    3. ch
    4. @character-variant
    5. character-variant()
    6. @charset
    7. :checked
    8. circle()
    9. clear
    10. clip
    11. clip-path
    12. cm
    13. color
    14. <color>
    15. column-count
    16. column-fill
    17. column-gap
    18. column-rule
    19. column-rule-color
    20. column-rule-style
    21. column-rule-width
    22. column-span
    23. column-width
    24. columns
    25. content
    26. contrast()
    27. <counter>
    28. counter-increment
    29. counter-reset
    30. @counter-style
    31. cubic-bezier()
    32. cursor
    33. <custom-ident>
  4. D
    1. :default
    2. deg
    3. :dir()
    4. direction
    5. :disabled
    6. display
    7. dpcm
    8. dpi
    9. dppx
    10. drop-shadow()
  5. E
    1. element()
    2. ellipse()
    3. em
    4. :empty
    5. empty-cells
    6. :enabled
    7. ex
  6. F
    1. fallback
    2. filter
    3. :first
    4. :first-child
    5. ::first-letter (:first-letter)
    6. ::first-line (:first-line)
    7. :first-of-type
    8. flex
    9. flex-basis
    10. flex-direction
    11. flex-flow
    12. flex-grow
    13. flex-shrink
    14. flex-wrap
    15. float
    16. :focus
    17. font
    18. @font-face
    19. font-family (property)
    20. font-family (descriptor)
    21. font-feature-settings (property)
    22. font-feature-settings (descriptor)
    23. @font-feature-values
    24. font-kerning
    25. font-language-override
    26. font-size
    27. font-size-adjust
    28. font-stretch (property)
    29. font-stretch (descriptor)
    30. font-style (property)
    31. font-style (descriptor)
    32. font-synthesis
    33. font-variant (property)
    34. font-variant (descriptor)
    35. font-variant-alternates
    36. font-variant-caps
    37. font-variant-east-asian
    38. font-variant-ligatures
    39. font-variant-numeric
    40. font-variant-position
    41. font-weight (property)
    42. font-weight (descriptor)
    43. <frequency>
    44. :fullscreen
  7. G
    1. grad
    2. <gradient>
    3. grayscale()
    4. grid
    5. grid-area
    6. grid-auto-columns
    7. grid-auto-flow
    8. grid-auto-rows
    9. grid-column
    10. grid-column-end
    11. grid-column-gap
    12. grid-column-start
    13. grid-gap
    14. grid-row
    15. grid-row-end
    16. grid-row-gap
    17. grid-row-start
    18. grid-template
    19. grid-template-areas
    20. grid-template-columns
    21. grid-template-rows
  8. H
    1. height
    2. height
    3. :hover
    4. hsl()
    5. hsla()
    6. hue-rotate()
    7. hyphens
    8. hz
  9. I
    1. <image>
    2. image()
    3. image-orientation
    4. image-rendering
    5. image-resolution
    6. ime-mode
    7. @import
    8. in
    9. :in-range
    10. :indeterminate
    11. inherit
    12. initial
    13. inline-size
    14. inset()
    15. <integer>
    16. :invalid
    17. invert()
    18. isolation
  10. J
    1. justify-content
  11. K
    1. @keyframes
    2. khz
  12. L
    1. :lang()
    2. :last-child
    3. :last-of-type
    4. left
    5. :left
    6. <length>
    7. letter-spacing
    8. line-break
    9. line-height
    10. linear-gradient()
    11. :link
    12. list-style
    13. list-style-image
    14. list-style-position
    15. list-style-type
  13. M
    1. margin
    2. margin-block-end
    3. margin-block-start
    4. margin-bottom
    5. margin-inline-end
    6. margin-inline-start
    7. margin-left
    8. margin-right
    9. margin-top
    10. mask
    11. mask-clip
    12. mask-composite
    13. mask-image
    14. mask-mode
    15. mask-origin
    16. mask-position
    17. mask-repeat
    18. mask-size
    19. mask-type
    20. matrix()
    21. matrix3d()
    22. max-block-size
    23. max-height
    24. max-height
    25. max-inline-size
    26. max-width
    27. max-width
    28. max-zoom
    29. @media
    30. min-block-size
    31. min-height
    32. min-height
    33. min-inline-size
    34. min-width
    35. min-width
    36. min-zoom
    37. minmax()
    38. mix-blend-mode
    39. mm
    40. ms
  14. N
    1. @namespace
    2. negative
    3. :not()
    4. :nth-child()
    5. :nth-last-child()
    6. :nth-last-of-type()
    7. :nth-of-type()
    8. <number>
  15. O
    1. object-fit
    2. object-position
    3. offset-block-end
    4. offset-block-start
    5. offset-inline-end
    6. offset-inline-start
    7. :only-child
    8. :only-of-type
    9. opacity
    10. opacity()
    11. :optional
    12. order
    13. orientation
    14. @ornaments
    15. ornaments()
    16. orphans
    17. :out-of-range
    18. outline
    19. outline-color
    20. outline-offset
    21. outline-style
    22. outline-width
    23. overflow
    24. overflow-wrap
    25. overflow-x
    26. overflow-y
  16. P
    1. pad
    2. padding
    3. padding-block-end
    4. padding-block-start
    5. padding-bottom
    6. padding-inline-end
    7. padding-inline-start
    8. padding-left
    9. padding-right
    10. padding-top
    11. @page
    12. page-break-after
    13. page-break-before
    14. page-break-inside
    15. pc
    16. <percentage>
    17. perspective
    18. perspective()
    19. perspective-origin
    20. pointer-events
    21. polygon()
    22. position
    23. <position>
    24. prefix
    25. pt
    26. px
  17. Q
    1. quotes
  18. R
    1. rad
    2. radial-gradient()
    3. range
    4. <ratio>
    5. :read-only
    6. :read-write
    7. rect()
    8. rem
    9. repeating-linear-gradient()
    10. repeating-radial-gradient()
    11. :required
    12. resize
    13. <resolution>
    14. revert
    15. rgb()
    16. rgba()
    17. :right
    18. right
    19. :root
    20. rotate()
    21. rotate3d()
    22. rotatex()
    23. rotatey()
    24. rotatez()
    25. ruby-align
    26. ruby-merge
    27. ruby-position
  19. S
    1. s
    2. saturate()
    3. scale()
    4. scale3d()
    5. scalex()
    6. scaley()
    7. scalez()
    8. :scope
    9. scroll-behavior
    10. scroll-snap-coordinate
    11. scroll-snap-destination
    12. scroll-snap-type
    13. ::selection
    14. sepia()
    15. <shape>
    16. shape-image-threshold
    17. shape-margin
    18. shape-outside
    19. skew()
    20. skewx()
    21. skewy()
    22. speak-as
    23. src
    24. steps()
    25. <string>
    26. @styleset
    27. styleset()
    28. @stylistic
    29. stylistic()
    30. suffix
    31. @supports
    32. @swash
    33. swash()
    34. symbols
    35. symbols()
    36. system
    T
    1. tab-size
    2. table-layout
    3. :target
    4. text-align
    5. text-align-last
    6. text-combine-upright
    7. text-decoration
    8. text-decoration-color
    9. text-decoration-line
    10. text-decoration-style
    11. text-emphasis
    12. text-emphasis-color
    13. text-emphasis-position
    14. text-emphasis-style
    15. text-indent
    16. text-orientation
    17. text-overflow
    18. text-rendering
    19. text-shadow
    20. text-transform
    21. text-underline-position
    22. <time>
    23. <timing-function>
    24. top
    25. touch-action
    26. transform
    27. transform-box
    28. <transform-function>
    29. transform-origin
    30. transform-style
    31. transition
    32. transition-delay
    33. transition-duration
    34. transition-property
    35. transition-timing-function
    36. translate()
    37. translate3d()
    38. translatex()
    39. translatey()
    40. translatez()
    41. turn
  20. U
    1. unicode-bidi
    2. unicode-range
    3. :unresolved
    4. unset
    5. <url>
    6. url()
    7. user-zoom
  21. V
    1. :valid
    2. var()
    3. vertical-align
    4. vh
    5. @viewport
    6. visibility
    7. :visited
    8. vmax
    9. vmin
    10. vw
  22. W
    1. white-space
    2. widows
    3. width
    4. width
    5. will-change
    6. word-break
    7. word-spacing
    8. word-wrap
    9. writing-mode
  23. X Y Z
    1. z-index
    2. zoom
  24. Others
    1. --*

Selectors

A complete list of selectors in the Selectors Level 3 specification.

CSS3 Tutorials

These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:

Concepts

DOM-CSS / CSSOM

Major object types:

Important methods: