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 (Unicode) 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: This index does not include SVG-exclusive presentation attributes, which can be used as CSS properties on SVG elements.
Note: The property names in this index do not include the JavaScript names which do differ from the CSS standard names.
-
:-moz-brokenCSS pseudo-class::-moz-color-swatchCSS pseudo-element:-moz-drag-overCSS pseudo-class:-moz-first-nodeCSS pseudo-class::-moz-focus-innerCSS pseudo-element:-moz-handler-blockedCSS pseudo-class:-moz-handler-crashedCSS pseudo-class:-moz-handler-disabledCSS pseudo-class:-moz-last-nodeCSS pseudo-class::-moz-list-bulletCSS pseudo-element::-moz-list-numberCSS pseudo-element:-moz-loadingCSS pseudo-class:-moz-locale-dir(ltr)CSS pseudo-class:-moz-locale-dir(rtl)CSS pseudo-class::-moz-meter-barCSS pseudo-element:-moz-only-whitespaceCSS pseudo-class::-moz-progress-barCSS pseudo-element::-moz-range-progressCSS pseudo-element::-moz-range-thumbCSS pseudo-element::-moz-range-trackCSS pseudo-element:-moz-submit-invalidCSS pseudo-class:-moz-suppressedCSS pseudo-class:-moz-user-disabledCSS pseudo-class:-moz-window-inactiveCSS pseudo-class::-webkit-inner-spin-buttonCSS pseudo-element::-webkit-meter-barCSS pseudo-element::-webkit-meter-even-less-good-valueCSS pseudo-element::-webkit-meter-inner-elementCSS pseudo-element::-webkit-meter-optimum-valueCSS pseudo-element::-webkit-meter-suboptimum-valueCSS pseudo-element::-webkit-progress-barCSS pseudo-element::-webkit-progress-inner-elementCSS pseudo-element::-webkit-progress-valueCSS pseudo-element::-webkit-scrollbarCSS pseudo-element::-webkit-search-cancel-buttonCSS pseudo-element::-webkit-search-results-buttonCSS pseudo-element::-webkit-slider-runnable-trackCSS pseudo-element::-webkit-slider-thumbCSS pseudo-element
A
- Attribute selectors
abs()CSS function<absolute-size>CSS typeaccent-colorCSS propertyacos()CSS function:activeCSS pseudo-class:active-view-transitionCSS pseudo-class:active-view-transition-type()CSS pseudo-classadditive-symbolsCSS at-rule descriptor (@counter-style)::afterCSS pseudo-elementalign-contentCSS propertyalign-itemsCSS propertyalign-selfCSS propertyalignment-baselineCSS propertyallCSS propertyalpha()CSS function<alpha-value>CSS typeanchor()CSS functionanchor-nameCSS propertyanchor-scopeCSS propertyanchor-size()CSS function<angle-percentage>CSS type<angle>CSS typeanimationCSS propertyanimation-compositionCSS propertyanimation-delayCSS propertyanimation-directionCSS propertyanimation-durationCSS propertyanimation-fill-modeCSS propertyanimation-iteration-countCSS propertyanimation-nameCSS propertyanimation-play-stateCSS propertyanimation-rangeCSS propertyanimation-range-endCSS propertyanimation-range-startCSS propertyanimation-timelineCSS propertyanimation-timing-functionCSS property:any-linkCSS pseudo-classappearanceCSS propertyascent-overrideCSS at-rule descriptor (@font-face)asin()CSS functionaspect-ratioCSS propertyatan()CSS functionatan2()CSS functionattr()CSS function:autofillCSS pseudo-class<axis>CSS type
B
::backdropCSS pseudo-elementbackdrop-filterCSS propertybackface-visibilityCSS propertybackgroundCSS propertybackground-attachmentCSS propertybackground-blend-modeCSS propertybackground-clipCSS propertybackground-colorCSS propertybackground-imageCSS propertybackground-originCSS propertybackground-positionCSS propertybackground-position-xCSS propertybackground-position-yCSS propertybackground-repeatCSS propertybackground-repeat-xCSS propertybackground-repeat-yCSS propertybackground-sizeCSS propertybase-paletteCSS at-rule descriptor (@font-palette-values)<baseline-position>CSS typebaseline-shiftCSS propertybaseline-sourceCSS property<basic-shape>CSS type::beforeCSS pseudo-element:blankCSS pseudo-class<blend-mode>CSS typeblock-sizeCSS propertyblur()CSS functionborderCSS property-webkit-border-beforeCSS propertyborder-blockCSS propertyborder-block-colorCSS propertyborder-block-endCSS propertyborder-block-end-colorCSS propertyborder-block-end-styleCSS propertyborder-block-end-widthCSS propertyborder-block-startCSS propertyborder-block-start-colorCSS propertyborder-block-start-styleCSS propertyborder-block-start-widthCSS propertyborder-block-styleCSS propertyborder-block-widthCSS propertyborder-bottomCSS propertyborder-bottom-colorCSS propertyborder-bottom-left-radiusCSS propertyborder-bottom-right-radiusCSS propertyborder-bottom-styleCSS propertyborder-bottom-widthCSS propertyborder-collapseCSS propertyborder-colorCSS propertyborder-end-end-radiusCSS propertyborder-end-start-radiusCSS propertyborder-imageCSS propertyborder-image-outsetCSS propertyborder-image-repeatCSS propertyborder-image-sliceCSS propertyborder-image-sourceCSS propertyborder-image-widthCSS propertyborder-inlineCSS propertyborder-inline-colorCSS propertyborder-inline-endCSS propertyborder-inline-end-colorCSS propertyborder-inline-end-styleCSS propertyborder-inline-end-widthCSS propertyborder-inline-startCSS propertyborder-inline-start-colorCSS propertyborder-inline-start-styleCSS propertyborder-inline-start-widthCSS propertyborder-inline-styleCSS propertyborder-inline-widthCSS propertyborder-leftCSS propertyborder-left-colorCSS propertyborder-left-styleCSS propertyborder-left-widthCSS propertyborder-radiusCSS propertyborder-rightCSS propertyborder-right-colorCSS propertyborder-right-styleCSS propertyborder-right-widthCSS propertyborder-shapeCSS propertyborder-spacingCSS propertyborder-start-end-radiusCSS propertyborder-start-start-radiusCSS propertyborder-styleCSS propertyborder-topCSS propertyborder-top-colorCSS propertyborder-top-left-radiusCSS propertyborder-top-right-radiusCSS propertyborder-top-styleCSS propertyborder-top-widthCSS propertyborder-widthCSS propertybottomCSS propertybox-alignCSS propertybox-decoration-breakCSS propertybox-directionCSS property<box-edge>CSS typebox-flexCSS propertybox-flex-groupCSS propertybox-linesCSS propertybox-ordinal-groupCSS propertybox-orientCSS propertybox-packCSS property-webkit-box-reflectCSS propertybox-shadowCSS propertybox-sizingCSS propertybreak-afterCSS propertybreak-beforeCSS propertybreak-insideCSS propertybrightness()CSS function:bufferingCSS pseudo-class
C
- Class selectors
- Custom properties (--*): CSS variables
calc()CSS function<calc-keyword>CSS typecalc-size()CSS function<calc-sum>CSS typecaption-sideCSS propertycaretCSS propertycaret-animationCSS propertycaret-colorCSS propertycaret-shapeCSS property@charsetCSS at-rule:checkedCSS pseudo-class::checkmarkCSS pseudo-elementcircle()CSS functionclamp()CSS functionclearCSS propertyclipCSS propertyclip-pathCSS propertyclip-ruleCSS propertycolorCSS propertycolor()CSS functioncolor-interpolationCSS propertycolor-interpolation-filtersCSS property<color-interpolation-method>CSS typecolor-mix()CSS function@color-profileCSS at-rulecolor-schemeCSS property<color>CSS type::columnCSS pseudo-elementcolumn-countCSS propertycolumn-fillCSS propertycolumn-gapCSS propertycolumn-heightCSS propertycolumn-ruleCSS propertycolumn-rule-breakCSS propertycolumn-rule-colorCSS propertycolumn-rule-inset-cap-endCSS propertycolumn-rule-styleCSS propertycolumn-rule-visibility-itemsCSS propertycolumn-rule-widthCSS propertycolumn-spanCSS propertycolumn-widthCSS propertycolumn-wrapCSS propertycolumnsCSS propertyconic-gradient()CSS functioncontainCSS propertycontain-intrinsic-block-sizeCSS propertycontain-intrinsic-heightCSS propertycontain-intrinsic-inline-sizeCSS propertycontain-intrinsic-sizeCSS propertycontain-intrinsic-widthCSS property@containerCSS at-rulecontainerCSS propertycontainer-nameCSS propertycontainer-typeCSS propertycontentCSS property<content-distribution>CSS type<content-position>CSS typecontent-visibilityCSS propertycontrast()CSS functioncontrast-color()CSS functioncorner-block-end-shapeCSS propertycorner-block-start-shapeCSS propertycorner-bottom-left-shapeCSS propertycorner-bottom-right-shapeCSS propertycorner-bottom-shapeCSS propertycorner-end-end-shapeCSS propertycorner-end-start-shapeCSS propertycorner-inline-end-shapeCSS propertycorner-inline-start-shapeCSS propertycorner-left-shapeCSS propertycorner-right-shapeCSS propertycorner-shapeCSS property<corner-shape-value>CSS typecorner-start-end-shapeCSS propertycorner-start-start-shapeCSS propertycorner-top-left-shapeCSS propertycorner-top-right-shapeCSS propertycorner-top-shapeCSS propertycos()CSS functioncounter()CSS functioncounter-incrementCSS propertycounter-resetCSS propertycounter-setCSS property@counter-styleCSS at-rulecounters()CSS functioncross-fade()CSS functioncubic-bezier()CSS function::cueCSS pseudo-element:currentCSS pseudo-classcursorCSS property<custom-ident>CSS type@custom-mediaCSS at-rulecxCSS propertycyCSS property
D
dCSS property<dashed-function>CSS type<dashed-ident>CSS type:defaultCSS pseudo-class:definedCSS pseudo-classdescent-overrideCSS at-rule descriptor (@font-face)::details-contentCSS pseudo-elementdevice-cmyk()CSS function<dimension>CSS type:dir()CSS pseudo-classdirectionCSS property:disabledCSS pseudo-classdisplayCSS property<display-box>CSS type<display-inside>CSS type<display-internal>CSS type<display-legacy>CSS type<display-listitem>CSS type<display-outside>CSS type@documentCSS at-ruledominant-baselineCSS propertydrop-shadow()CSS functiondynamic-range-limitCSS propertydynamic-range-limit-mix()CSS function
E
<easing-function>CSS typeelement()CSS functionellipse()CSS function:emptyCSS pseudo-classempty-cellsCSS property:enabledCSS pseudo-classenv()CSS functionexp()CSS function
F
fallbackCSS at-rule descriptor (@counter-style)field-sizingCSS property::file-selector-buttonCSS pseudo-elementfillCSS propertyfill-opacityCSS propertyfill-ruleCSS propertyfilterCSS property<filter-function>CSS type:firstCSS pseudo-class:first-childCSS pseudo-class::first-letterCSS pseudo-element::first-lineCSS pseudo-element:first-of-typeCSS pseudo-classfit-contentCSS keywordfit-content()CSS functionflexCSS propertyflex-basisCSS propertyflex-directionCSS propertyflex-flowCSS propertyflex-growCSS propertyflex-line-countCSS propertyflex-shrinkCSS propertyflex-wrapCSS property<flex>CSS typefloatCSS property-moz-float-edgeCSS propertyflood-colorCSS propertyflood-opacityCSS property:focusCSS pseudo-class:focus-visibleCSS pseudo-class:focus-withinCSS pseudo-classfontCSS propertyfont-displayCSS at-rule descriptor (@font-face)font-displayCSS at-rule descriptor (@font-feature-values)@font-faceCSS at-rulefont-familyCSS at-rule descriptor (@font-face)font-familyCSS at-rule descriptor (@font-palette-values)font-familyCSS propertyfont-feature-settingsCSS at-rule descriptor (@font-face)font-feature-settingsCSS property@font-feature-valuesCSS at-rulefont-kerningCSS propertyfont-language-overrideCSS propertyfont-optical-sizingCSS propertyfont-paletteCSS property@font-palette-valuesCSS at-rulefont-sizeCSS propertyfont-size-adjustCSS propertyfont-smoothCSS propertyfont-stretchCSS at-rule descriptor (@font-face)font-stretchCSS propertyfont-styleCSS at-rule descriptor (@font-face)font-styleCSS propertyfont-synthesisCSS propertyfont-synthesis-positionCSS propertyfont-synthesis-small-capsCSS propertyfont-synthesis-styleCSS propertyfont-synthesis-weightCSS propertyfont-variantCSS propertyfont-variant-alternatesCSS propertyfont-variant-capsCSS propertyfont-variant-east-asianCSS propertyfont-variant-emojiCSS propertyfont-variant-ligaturesCSS propertyfont-variant-numericCSS propertyfont-variant-positionCSS propertyfont-variation-settingsCSS at-rule descriptor (@font-face)font-variation-settingsCSS propertyfont-weightCSS at-rule descriptor (@font-face)font-weightCSS propertyfont-widthCSS at-rule descriptor (@font-face)font-widthCSS property-moz-force-broken-image-iconCSS propertyforced-color-adjustCSS propertyframe-sizingCSS property<frequency-percentage>CSS type<frequency>CSS type:fullscreenCSS pseudo-class@functionCSS at-rule:futureCSS pseudo-class
G
gapCSS property<generic-family>CSS type<gradient>CSS type::grammar-errorCSS pseudo-elementgrayscale()CSS functiongridCSS propertygrid-areaCSS propertygrid-auto-columnsCSS propertygrid-auto-flowCSS propertygrid-auto-rowsCSS propertygrid-columnCSS propertygrid-column-endCSS propertygrid-column-startCSS propertygrid-rowCSS propertygrid-row-endCSS propertygrid-row-startCSS propertygrid-templateCSS propertygrid-template-areasCSS propertygrid-template-columnsCSS propertygrid-template-rowsCSS property
H
hanging-punctuationCSS property:has()CSS pseudo-class:has-slottedCSS pseudo-class:headingCSS pseudo-class:heading()CSS pseudo-classheightCSS property<hex-color>CSS type::highlight()CSS pseudo-element:hostCSS pseudo-class:host()CSS pseudo-class:host-context()CSS pseudo-class:hoverCSS pseudo-classhsl()CSS function<hue-interpolation-method>CSS typehue-rotate()CSS function<hue>CSS typehwb()CSS functionhyphenate-characterCSS propertyhyphenate-limit-charsCSS propertyhyphensCSS propertyhypot()CSS function
I
- ID selectors
<ident>CSS typeif()CSS functionimage()CSS functionimage-orientationCSS property-moz-image-rect()CSS functionimage-renderingCSS propertyimage-resolutionCSS propertyimage-set()CSS function<image>CSS type@importCSS at-rule!importantCSS keyword:in-rangeCSS pseudo-class:indeterminateCSS pseudo-classinheritCSS keywordinheritsCSS at-rule descriptor (@property)initialCSS keywordinitial-letterCSS propertyinitial-valueCSS at-rule descriptor (@property)inline-sizeCSS propertyinsetCSS propertyinset()CSS functioninset-blockCSS propertyinset-block-endCSS propertyinset-block-startCSS propertyinset-inlineCSS propertyinset-inline-endCSS propertyinset-inline-startCSS property<integer>CSS typeinteractivityCSS propertyinterest-delayCSS propertyinterest-delay-endCSS propertyinterest-delay-startCSS property:interest-sourceCSS pseudo-class:interest-targetCSS pseudo-classinterpolate-sizeCSS property:invalidCSS pseudo-classinvert()CSS function:is()CSS pseudo-classisolationCSS property