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; }
@rules
As these have so many different structure-formats, see the desired At-rule for syntax.
Keyword index
- A
- B
::backdrop
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
<basic-shape>
::before (:before)
<blend-mode>
block-size
blur()
border
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
brightness()
- C
calc()
caption-side
ch
@character-variant
character-variant()
@charset
:checked
circle()
clear
clip
clip-path
cm
color
<color>
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
contrast()
<counter>
counter-increment
counter-reset
@counter-style
cubic-bezier()
cursor
<custom-ident>
- D
- E
- F
fallback
filter
:first
:first-child
::first-letter (:first-letter)
::first-line (:first-line)
:first-of-type
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
:focus
font
@font-face
font-family (property)
font-family (descriptor)
font-feature-settings (property)
font-feature-settings (descriptor)
@font-feature-values
font-kerning
font-language-override
font-size
font-size-adjust
font-stretch (property)
font-stretch (descriptor)
font-style (property)
font-style (descriptor)
font-synthesis
font-variant (property)
font-variant (descriptor)
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight (property)
font-weight (descriptor)
<frequency>
:fullscreen
- G
- H
- I
- J
- K
- L
- M
margin
margin-block-end
margin-block-start
margin-bottom
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
mask
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
matrix()
matrix3d()
max-block-size
max-height
max-height
max-inline-size
max-width
max-width
max-zoom
@media
min-block-size
min-height
min-height
min-inline-size
min-width
min-width
min-zoom
minmax()
mix-blend-mode
mm
ms
- N
- O
object-fit
object-position
offset-block-end
offset-block-start
offset-inline-end
offset-inline-start
:only-child
:only-of-type
opacity
opacity()
:optional
order
orientation
@ornaments
ornaments()
orphans
:out-of-range
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
- P
pad
padding
padding-block-end
padding-block-start
padding-bottom
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
@page
page-break-after
page-break-before
page-break-inside
pc
<percentage>
perspective
perspective()
perspective-origin
pointer-events
polygon()
position
<position>
prefix
pt
px
- Q
- R
- S
s
saturate()
scale()
scale3d()
scalex()
scaley()
scalez()
:scope
scroll-behavior
scroll-snap-coordinate
scroll-snap-destination
scroll-snap-type
::selection
sepia()
<shape>
shape-image-threshold
shape-margin
shape-outside
skew()
skewx()
skewy()
speak-as
src
steps()
<string>
@styleset
styleset()
@stylistic
stylistic()
suffix
@supports
@swash
swash()
symbols
symbols()
system
tab-size
table-layout
:target
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-orientation
text-overflow
text-rendering
text-shadow
text-transform
text-underline-position
<time>
<timing-function>
top
touch-action
transform
transform-box
<transform-function>
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
translate()
translate3d()
translatex()
translatey()
translatez()
turn
- U
- V
- W
- X Y Z
- Others
Selectors
- Basic Selectors
- Type selectors
elementname
- Class selectors
.classname
- ID selectors
#idname
- Universal selectors
* ns|* *|*
- Attribute selectors
[attr=value]
- Type selectors
- Combinators (more info)
- Adjacent sibling selectors
A + B
- General sibling selectors
A ~ B
- Child selectors
A > B
- Descendant selectors
A B
- Adjacent sibling selectors
- Pseudo-elements (more info)
- Standard pseudo-classes (more info)
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
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:
- Using CSS media queries
- Using CSS counters
- Using CSS gradients
- Using CSS transforms
- Using CSS animations
- Using CSS transitions
- Using CSS multiple backgrounds
- Using CSS flexible boxes
- Using CSS multi-column layouts
Concepts
- CSS syntax
- At-rule
- Comments
- Specificity
- Initial value
- Inheritance
- Specified value
- Computed value
- Used value
- Actual value
- Box model
- Replaced element
- Value definition syntax
DOM-CSS / CSSOM
Major object types:
- document . styleSheets
- styleSheets[x] . cssRules
- cssRules[x] . cssText (selector & style)
- cssRules[x] . selectorText
- elem . style
- elem . style . cssText (just style)
- elem . className
- elem . classList
Important methods: