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
::backdropbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)<blend-mode>block-sizeblur()borderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
- C
calc()caption-sidech@character-variantcharacter-variant()@charset:checkedcircle()clearclipclip-pathcmcolor<color>column-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcontrast()<counter>counter-incrementcounter-reset@counter-stylecubic-bezier()cursor<custom-ident>
- D
- E
- F
fallbackfilter:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typeflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-family (property)font-family (descriptor)font-feature-settings (property)font-feature-settings (descriptor)@font-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretch (property)font-stretch (descriptor)font-style (property)font-style (descriptor)font-synthesisfont-variant (property)font-variant (descriptor)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weight (property)font-weight (descriptor)<frequency>:fullscreen
- G
- H
- I
- J
- K
- L
- M
marginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max-block-sizemax-heightmax-heightmax-inline-sizemax-widthmax-widthmax-zoom@mediamin-block-sizemin-heightmin-heightmin-inline-sizemin-widthmin-widthmin-zoomminmax()mix-blend-modemmms
- N
- O
object-fitobject-positionoffset-block-endoffset-block-startoffset-inline-endoffset-inline-start:only-child:only-of-typeopacityopacity():optionalorderorientation@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
- P
padpaddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originpointer-eventspolygon()position<position>prefixptpx
- Q
- R
- S
ssaturate()scale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-snap-coordinatescroll-snap-destinationscroll-snap-type::selectionsepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewx()skewy()speak-assrcsteps()<string>@stylesetstyleset()@stylisticstylistic()suffix@supports@swashswash()symbolssymbols()system
tab-sizetable-layout:targettext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><timing-function>toptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()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: