CSS documentation — DevDocs https://devdocs.

io/css/

CSS reference

Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-
elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors
organized by type. Also included is a brief DOM-CSS / CSSOM reference.

Basic rule syntax

Style rule syntax

style-rule ::=
selectors-list {
properties-list
}

Where :

selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]

properties-list ::=
[property : value] [; properties-list]

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on
the data type defined for each specified property.

Style rule examples

strong {
color: red;
}

div.menu-bar li:hover > ul {

display: block;
}

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax
error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule
definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

At-rule syntax

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

Index

Note: The property names in this index do not include the JavaScript names where they differ from the CSS

1 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

standard names.

- B border-bottom-style

--* ::backdrop border-bottom-width

-webkit-line-clamp backdrop-filter border-collapse

backface-visibility border-color
A
background border-end-end-radius
abs()
background-attachment border-end-start-radius
accent-color
background-blend-mode border-image
acos()
background-clip border-image-outset
:active
background-color border-image-repeat
additive-symbols (@counter-
background-image border-image-slice
style)
background-origin border-image-source
::after (:after)
background-position border-image-width
align-content
background-position-x border-inline
align-items
background-position-y border-inline-color
align-self
background-repeat border-inline-end
align-tracks
background-size border-inline-end-color
all
<basic-shape> border-inline-end-style
<an-plus-b>
::before (:before) border-inline-end-width
<angle>
:blank border-inline-start
<angle-percentage>
bleed (@page) border-inline-start-color
animation
<blend-mode> border-inline-start-style
animation-delay
block-overflow border-inline-start-width
animation-direction
block-size border-inline-style
animation-duration
blur() border-inline-width
animation-fill-mode
border border-left
animation-iteration-count
border-block border-left-color
animation-name
border-block-color border-left-style
animation-play-state
border-block-end border-left-width
animation-timeline
border-block-end-color border-radius
animation-timing-function
border-block-end-style border-right
@annotation
border-block-end-width border-right-color
annotation()
border-block-start border-right-style
:any-link
border-block-start-color border-right-width
appearance
border-block-start-style border-spacing
ascent-override (@font-face)
border-block-start-width border-start-end-radius
asin()
border-block-style border-start-start-radius
aspect-ratio
border-block-width border-style
ata2n()
border-bottom border-top
atan()
border-bottom-color border-top-color
atan2()
border-bottom-left-radius border-top-left-radius
attr()
border-bottom-right-radius border-top-right-radius

2 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

border-top-style cos() env()

border-top-width <counter> exp()
border-width counter-increment length#em
bottom counter-reset length#ex
@bottom-center counter-set
F
box-decoration-break @counter-style
fallback (@counter-style)
box-shadow counters()
filter
box-sizing cross-fade()
<filter-function>
break-after cubic-bezier()
:first
break-before ::cue
:first-child
break-inside ::cue-region
::first-letter (:first-letter)
brightness() :current
::first-line (:first-line)
cursor
C :first-of-type
<custom-ident>
calc() fit-content()
length#cap
caption-side <flex>
length#ch
caret-color flex
length#cm
@character-variant flex-basis
character-variant() D flex-direction
@charset angle#deg flex-flow
:checked :default flex-grow
circle() :defined flex-shrink
clamp() descent-override (@font-face) flex-wrap
clear <dimension> flex_value#fr
clip :dir float
clip-path direction :focus
<color> :disabled :focus-visible
color display :focus-within
color-scheme <display-box> font
column-count <display-inside> font-display (@font-face)
column-fill <display-internal> @font-face
column-gap <display-legacy> font-family
column-rule <display-listitem> font-family (@font-face)
column-rule-color <display-outside> font-feature-settings
column-rule-style drop-shadow() font-feature-settings (@font-
column-rule-width resolution#dpcm face)

column-span resolution#dpi @font-feature-values

column-width resolution#dppx font-kerning

columns font-language-override
E font-optical-sizing
conic-gradient()
element()
contain font-size
ellipse()
content font-size-adjust
:empty
content-visibility font-stretch
empty-cells
contrast() font-stretch (@font-face)
:enabled

3 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

font-style H inset-inline-start
font-style (@font-face) frequency#Hz <integer>
font-synthesis hanging-punctuation :invalid
font-variant :has invert()
font-variant (@font-face) height :is
font-variant-alternates height (@viewport) isolation
font-variant-caps @historical-forms length#ic
font-variant-east-asian :host() length#in
font-variant-ligatures :host-context()
J
font-variant-numeric :hover
justify-content
font-variant-position hsl()
justify-items
font-variation-settings hsla()
justify-self
font-variation-settings (@font- hue-rotate()
justify-tracks
face) hwb()
font-weight hyphenate-character K
font-weight (@font-face) hyphens frequency#kHz
forced-color-adjust hypot() @keyframes
format()
<frequency> I L
<ident> lab()
<frequency-percentage>
<image> :lang
:fullscreen
image() :last-child
:future
image-orientation :last-of-type
G image-rendering @layer
angle#grad image-resolution layer()
gap image-set() layer() (@import)
<gradient> @import lch()
::grammar-error :in-range leader()
grayscale() :indeterminate :left
grid inherit left
grid-area inherits (@property) @left-bottom
grid-auto-columns initial <length>
grid-auto-flow initial-letter <length-percentage>
grid-auto-rows initial-letter-align letter-spacing
grid-column initial-value (@property) line-break
grid-column-end inline-size line-clamp
grid-column-start input-security line-gap-override (@font-face)
grid-row inset line-height
grid-row-end inset() line-height-step
grid-row-start inset-block linear-gradient()
grid-template inset-block-end :link
grid-template-areas inset-block-start list-style
grid-template-columns inset-inline list-style-image
grid-template-rows inset-inline-end list-style-position

4 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

list-style-type max-height opacity()

local() max-height (@viewport) :optional
:local-link max-inline-size order
log() max-lines orientation (@viewport)
max-width @ornaments
M
max-width (@viewport) ornaments()
length#mm
max-zoom (@viewport) orphans
margin
@media :out-of-range
margin-block
min() outline
margin-block-end
min-block-size outline-color
margin-block-start
min-height outline-offset
margin-bottom
min-height (@viewport) outline-style
margin-inline
min-inline-size outline-width
margin-inline-end
min-width overflow
margin-inline-start
min-width (@viewport) overflow-anchor
margin-left
min-zoom (@viewport) overflow-block
margin-right
minmax() overflow-clip-margin
margin-top
mix-blend-mode overflow-inline
margin-trim
mod() overflow-wrap
::marker
time#ms overflow-x
marks (@page)
overflow-y
mask N
overscroll-behavior
mask-border @namespace
overscroll-behavior-block
mask-border-mode negative (@counter-style)
overscroll-behavior-inline
mask-border-outset :not
overscroll-behavior-x
mask-border-repeat :nth-child
overscroll-behavior-y
mask-border-slice :nth-col
mask-border-source :nth-last-child P
mask-border-width :nth-last-col Pseudo-classes
mask-clip :nth-last-of-type Pseudo-elements
mask-composite :nth-of-type length#pc
mask-image <number> length#pt
mask-mode length#px
O
mask-origin pad (@counter-style)
object-fit
mask-position padding
object-position
mask-repeat padding-block
offset
mask-size padding-block-end
offset-anchor
mask-type padding-block-start
offset-distance
masonry-auto-flow padding-bottom
offset-path
math-style padding-inline
offset-position
matrix() padding-inline-end
offset-rotate
matrix3d() padding-inline-start
:only-child
max() padding-left
:only-of-type
max-block-size padding-right
opacity

5 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

padding-top repeat() scroll-margin-inline-start

@page repeating-conic-gradient() scroll-margin-left
page-break-after repeating-linear-gradient() scroll-margin-right
page-break-before repeating-radial-gradient() scroll-margin-top
page-break-inside :required scroll-padding
paint() resize scroll-padding-block
paint-order <resolution> scroll-padding-block-end
::part reversed() scroll-padding-block-start
:past revert scroll-padding-bottom
path() rgb() scroll-padding-inline
:paused rgba() scroll-padding-inline-end
<percentage> :right scroll-padding-inline-start
perspective right scroll-padding-left
perspective() @right-bottom scroll-padding-right
perspective-origin :root scroll-padding-top
:picture-in-picture rotate scroll-snap-align
place-content rotate() scroll-snap-stop
place-items rotate3d() scroll-snap-type
place-self rotateX() @scroll-timeline
::placeholder rotateY() scrollbar-color
:placeholder-shown rotateZ() scrollbar-gutter
:playing round() scrollbar-width
pointer-events row-gap ::selection
polygon() ruby-align selector()
<position> ruby-merge sepia()
position ruby-position <shape>
pow() shape-image-threshold
S
prefix (@counter-style) shape-margin
saturate()
print-color-adjust shape-outside
scale
@property sign()
scale()
sin()
Q scale3d()
size (@page)
length#Q scaleX()
size-adjust (@font-face)
quotes scaleY()
skew()
scaleZ()
R skewX()
:scope
angle#rad skewY()
scroll-behavior
length#rem ::slotted
scroll-margin
radial-gradient() speak-as (@counter-style)
scroll-margin-block
range (@counter-style) ::spelling-error
scroll-margin-block-end
<ratio> sqrt()
scroll-margin-block-start
:read-only src (@font-face)
scroll-margin-bottom
:read-write steps()
scroll-margin-inline
rect() <string>
scroll-margin-inline-end
rem() @styleset

6 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

styleset() text-indent url()

@stylistic text-justify :user-invalid
stylistic() text-orientation user-select
suffix (@counter-style) text-overflow :user-valid
@supports text-rendering user-zoom (@viewport)
supports() (@import) text-shadow
V
@swash text-size-adjust
length#vh
swash() text-transform
length#vmax
symbols (@counter-style) text-underline-offset
length#vmin
symbols() text-underline-position
length#vw
syntax (@property) <time>
:valid
system (@counter-style) <time-percentage>
var()
time#s <timing-function>
vertical-align
top
T @viewport
@top-center
angle#turn viewport-fit (@viewport)
touch-action
tab-size visibility
transform
table-layout :visited
transform-box
tan()
<transform-function> W
:target
transform-origin :where
target-counter()
transform-style white-space
target-counters()
transition widows
::target-text
transition-delay width
target-text()
transition-duration width (@viewport)
:target-within
transition-property will-change
text-align
transition-timing-function word-break
text-align-last
translate word-spacing
text-combine-upright
translate() word-wrap
text-decoration
translate3d() writing-mode
text-decoration-color
translateX()
text-decoration-line X
translateY()
text-decoration-skip resolution#x
translateZ()
text-decoration-skip-ink
type() Z
text-decoration-style
z-index
text-decoration-thickness U
zoom (@viewport)
text-emphasis unicode-bidi
text-emphasis-color unicode-range (@font-face) Others
text-emphasis-position unset --*
text-emphasis-style <url>

Selectors

The following are the various selectors, which allow styles to be conditional based on various features of elements within
the DOM.

7 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

Basic selectors

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create
other, more complex selectors.

Universal selector *
Type selector elementname
Class selector .classname
ID selector #idname
Attribute selector [attr=value]

Grouping selectors

Selector list A, B

Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.

Combinators

Combinators are selectors that establish a relationship between two or more simple selectors, such as " A is a child of
B " or " A is adjacent to B ", creating a complex selector.

Adjacent sibling combinator A + B

Specifies that the elements selected by both A and B have the same parent and that the element selected by B
immediately follows the element selected by A horizontally.

General sibling combinator A ~ B

Specifies that the elements selected by both A and B share the same parent and that the element selected by A
comes before—but not necessarily immediately before—the element selected by B .

Child combinator A > B

Specifies that the element selected by B is the direct child of the element selected by A .

Descendant combinator A B

Specifies that the element selected by B is a descendant of the element selected by A , but is not necessarily a
direct child.

Column combinator A || B Experimental

Specifies that the element selected by B is located within the table column specified by A . Elements which span
multiple columns are considered to be a member of all of those columns.

Pseudo

Pseudo classes :

Specifies a special state of the selected element(s).

Pseudo elements ::

8 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

Represents entities that are not included in HTML.

See also Selectors in the Selectors Level 4 specification.

Concepts

Syntax and semantics

CSS syntax
At-rules
Cascade
Comments
Descriptor
Inheritance
Shorthand properties
Specificity
Value definition syntax
CSS unit and value types
CSS functional notations

Values

Actual value
Computed value
Initial value
Resolved value
Specified value
Used value

Layout

Block formatting context

Box model
Containing block
Layout mode
Margin collapsing
Replaced elements
Stacking context
Visual formatting model

DOM-CSS / CSSOM

9 of 10 03/01/2023 00:16
CSS documentation — DevDocs https://devdocs.io/css/

Major object types

Document.styleSheets

styleSheets[i].cssRules

cssRules[i].cssText (selector & style)

cssRules[i].selectorText

HTMLElement.style

HTMLElement.style.cssText (just style)

Element.className

Element.classList

Important methods

CSSStyleSheet.insertRule()

CSSStyleSheet.deleteRule()

See also

Mozilla CSS extensions (prefixed with -moz- )

WebKit CSS extensions (mostly prefixed with -webkit- )
Microsoft CSS extensions (prefixed with -ms- )

External Links

CSS Indices (w3.org)

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.

Last modified: Jul 10, 2022, by MDN contributors

© 2005–2022 MDN contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Exported from DevDocs — https://devdocs.io

10 of 10 03/01/2023 00:16