MDN will be in maintenance mode for a brief period Tuesday June 2, from around 10:00 AM until no later than

12:00 PM Pacific (in UTC, Tuesday June 2, 5:00

PM to 7:00 PM). There should be no disruption in service.

Search MDN Sign in

Technologies ▼ References & Guides ▼ Feedback ▼

See CSS: Cascading Style Sheets English ▼

CSS reference
Jump to section

Use this CSS reference to browse an alphabetical index of all of the standard CSS properties,
pseudo-classes, pseudo-elements, data types, 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

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 y

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

1 strong {

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 2 color: red;
3 }

4
5 div.menu-bar li:hover > ul {
6 display: block;
7 }

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.

Keyword index
Note: The property names in this index do not include the JavaScript names where they
di er from the CSS standard names.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 -webkit-line-clamp
- A
:active annotation() block-size

additive-symbols (@counter-style) attr() blur()

::after (:after) border

align-content B border-block

align-items ::backdrop border-block-color

align-self backdrop-filter border-block-end

backface-visibility
all border-block-end-color
background
<an-plus-b> border-block-end-style
background-attachment
<angle> border-block-end-width
background-blend-mode
<angle-percentage> border-block-start
background-clip
animation border-block-start-color
background-color
animation-delay border-block-start-style

animation-direction background-image border-block-start-width

animation-duration background-origin border-block-style

animation-fill-mode background-position border-block-width

animation-iteration-count background-repeat border-bottom

animation-name background-size border-bottom-color

animation-play-state <basic-shape> border-bottom-left-radius

::before (:before)
animation-timing-function border-bottom-right-radius
bl d (@ )
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 @annotation bleed (@page) border-bottom-style
<blend-mode>
border-bottom-width border-inline-start-width border-top-style

border-collapse border-inline-style border-top-width

border-color border-inline-width border-width

border-end-end-radius border-left bottom

border-end-start-radius border-left-color @bottom-center

border-image border-left-style box-decoration-break

border-image-outset border-left-width box-shadow

border-image-repeat border-radius box-sizing

border-image-slice border-right break-after

border-image-source border-right-color break-before

border-image-width border-right-style break-inside

border-inline border-right-width brightness()

border-inline-color border-spacing

border-inline-end border-start-end-radius C
border-inline-end-color border-start-start-radius calc()

border-inline-end-style border-style caption-side

border-inline-end-width border-top caret-color

border-inline-start border-top-color ch

border-inline-start-color border-top-left-radius @character-variant

h t i t()
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 character-variant()
border-inline-start-style border-top-right-radius
@charset
:checked conic-gradient() :dir

circle() contain direction

clamp() content :disabled

clear contrast() display

clip <counter> <display-box>

clip-path counter-increment <display-inside>

cm counter-reset <display-internal>

<color> counter-set <display-legacy>

color @counter-style <display-listitem>

color-adjust counters() <display-outside>

column-count cross-fade() dpcm

column-fill cubic-bezier() dpi

column-gap ::cue dppx

column-rule ::cue-region drop-shadow()

column-rule-color cursor

column-rule-style <custom-ident> E
element()
column-rule-width

column-span D ellipse()

column-width :default em

d t
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 columns deg :empty

<dimension> empty-cells
:enabled flex-wrap font-synthesis

env() float font-variant

ex :focus font-variant (@font-face)

font font-variant-alternates
F @font-face font-variant-caps
fallback (@counter-style)
font-family font-variant-east-asian
filter font-family (@font-face) font-variant-ligatures
<filter-function>
font-feature-settings font-variant-numeric
:first font-feature-settings (@font- font-variant-position
:first-child face) font-variation-settings
::first-letter (:first-letter) @font-feature-values font-variation-settings (@font-
::first-line (:first-line) font-kerning face)
:first-of-type font-language-override font-weight
fit-content() font-optical-sizing font-weight (@font-face)
<flex> font-size format()
flex font-size-adjust fr
flex-basis font-stretch <frequency>
flex-direction font-stretch (@font-face) <frequency-percentage>
flex-flow font-style :fullscreen
fl
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 flex-grow font-style (@font-face)
flex-shrink G
gap in
H
grad Hz :in-range

<gradient> hanging-punctuation :indeterminate

grayscale() height inherit

grid height (@viewport) initial

grid-area @historical-forms inline-size

grid-auto-columns :hover inset

grid-auto-flow hsl() inset()

grid-auto-rows hsla() inset-block

grid-column hue-rotate() inset-block-end

grid-column-end hyphens inset-block-start

grid-column-start inset-inline

grid-row I inset-inline-end

grid-row-end <ident> inset-inline-start

grid-row-start <image> <integer>

grid-template image() :invalid

grid-template-areas image-orientation invert()

grid-template-columns image-rendering isolation

grid-template-rows image-set()

Create PDF in your applications with the Pdfcrowd HTML to PDF API
J PDFCROWD
 @import J
justify-content
justify-items :link mask

justify-self list-style mask-border

list-style-image mask-border-mode
K list-style-position mask-border-outset
kHz list-style-type mask-border-repeat
@keyframes
local() mask-border-slice

mask-border-source
L M mask-border-width
:lang margin mask-clip
:last-child margin-block mask-composite
:last-of-type
margin-block-end mask-image
leader() margin-block-start mask-mode
:left margin-bottom mask-origin
left margin-inline mask-position
@left-bottom
margin-inline-end mask-repeat
<length> margin-inline-start mask-size
<length-percentage> margin-left mask-type
letter-spacing margin-right matrix()
line-break margin-top
matrix3d()
line-height k
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 line height ::marker max()
linear-gradient() marks (@page)
max-block-size opacity
N
max-height @namespace opacity()

max-height (@viewport) negative (@counter-style) :optional

max-inline-size :not order

max-width :nth-child orientation (@viewport)

max-width (@viewport) :nth-last-child @ornaments

max-zoom (@viewport) :nth-last-of-type ornaments()

@media :nth-of-type orphans

min() <number> :out-of-range

min-block-size outline

min-height O outline-color

min-height (@viewport) object-fit outline-offset

min-inline-size object-position outline-style

min-width offset outline-width

min-width (@viewport) offset-anchor overflow

min-zoom (@viewport) offset-distance overflow-anchor

minmax() offset-path overflow-block

mix-blend-mode offset-rotate overflow-inline

mm :only-child overflow-wrap

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 ms :only-of-type overflow-x

overflow-y page-break-after pt

overscroll-behavior page-break-before px

overscroll-behavior-block page-break-inside

overscroll-behavior-inline paint() Q
Q
overscroll-behavior-x paint-order

overscroll-behavior-y path() quotes

pc
P R
<percentage>
pad (@counter-style) rad
perspective
radial-gradient()
padding perspective()
padding-block range (@counter-style)
perspective-origin
padding-block-end <ratio>
place-content
padding-block-start :read-only
place-items
:read-write
padding-bottom place-self
padding-inline rect()
::placeholder
padding-inline-end rem
pointer-events
padding-inline-start repeat()
polygon()
padding-left repeating-linear-gradient()
<position>
padding-right repeating-radial-gradient()
position
ddi t :required
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 padding-top :required
prefix (@counter-style)
@page resize

<resolution> scale3d() scroll-padding-block-start

revert scaleX() scroll-padding-bottom

rgb() scaleY() scroll-padding-inline

rgba() scaleZ() scroll-padding-inline-end

:right :scope scroll-padding-inline-start

right scroll-behavior scroll-padding-left

@right-bottom scroll-margin scroll-padding-right

:root scroll-margin-block scroll-padding-top

rotate scroll-margin-block-end scroll-snap-align

rotate() scroll-margin-block-start scroll-snap-stop

rotate3d() scroll-margin-bottom scroll-snap-type

rotateX() scroll-margin-inline scrollbar-color

rotateY() scroll-margin-inline-end scrollbar-width

rotateZ() scroll-margin-inline-start ::selection

row-gap scroll-margin-left selector()

scroll-margin-right sepia()
S scroll-margin-top <shape>
s scroll-padding shape-image-threshold
saturate() scroll-padding-block shape-margin
l
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 scale scroll-padding-block-end shape-outside
scale()
size (@page) text-indent
T
skew() tab-size text-justify

skewX() table-layout text-orientation

skewY() :target text-overflow

::slotted target-counter() text-rendering

speak-as (@counter-style) target-counters() text-shadow

src (@font-face) target-text() text-transform

steps() text-align text-underline-offset

<string> text-align-last text-underline-position

@styleset text-combine-upright <time>

styleset() text-decoration <time-percentage>

@stylistic text-decoration-color <timing-function>

stylistic() text-decoration-line top

suffix (@counter-style) text-decoration-skip-ink @top-center

@supports text-decoration-style touch-action

@swash text-decoration-thickness transform

swash() text-emphasis transform-box

symbols (@counter-style) text-emphasis-color <transform-function>

symbols() text-emphasis-position transform-origin

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 system (@counter-style) text-emphasis-style transform-style

transition url() width

transition-delay user-zoom (@viewport) width (@viewport)

transition-duration will-change

transition-property V word-break

transition-timing-function :valid word-spacing

translate var() word-wrap

translate() vertical-align writing-mode

vh
translate3d()

translateX() @viewport X
translateY() viewport-fit (@viewport) x

translateZ() visibility

:visited Z
turn
vmax z-index

zoom (@viewport)
U vmin

unicode-bidi vw
Others
unicode-range (@font-face)
--*
unset W
<url> white-space

widows

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Selectors
The following are the various selectors, which allow styles to be conditional based on various
features of elements within the DOM.

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 * , ns|* , *|* , |*

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

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 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 ."

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
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
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 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 ::
Represents entities that are not included in HTML.

See also: Selectors in the Selectors Level 4 speci cation.

Concepts
Syntax and semantics
CSS syntax
At-rules
Cascade
Comments

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Descriptor

Inheritance
Shorthand properties
Specificity
Value definition syntax
CSS unit and value types

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

Layout
Block formatting context
Box model
Containing block
Layout mode
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Margin collapsing

Replaced elements
Stacking context
Visual formatting model

DOM-CSS / CSSOM
Major object types
DocumentOrShadowRoot.styleSheets

styleSheets[i].cssRules

cssRules[i].cssText (selector & style)

cssRules[i].selectorText

HTMLElement.style

HTMLElement.style.cssText (just style)

Element.className

Element.classList

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 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- )

Last modified: Apr 23, 2020, by MDN contributors

Related Topics
CSS

CSS Reference

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Learn the best of web development
Get the latest and greatest from MDN delivered straight to your inbox.

[email protected]

Sign up now

Web Technologies About

Learn Web Development MDN Web Docs Store

About MDN Contact Us

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Feedback Firefox

MDN Mozilla

© 2005-2020 Mozilla and individual contributors. Content is available under these licenses.

Terms Privacy Cookies

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD