Periodic Table of CSS3 Grammar

Introduction:

The table below shows a summary of the grammar of the current Cascading Style-Sheets specification ( CSS3 ), as published by the W3C in April 2012. The entries are grouped and colour-coded based on their official usage for styling HTML elements / pages, which helps to show how they are related, and therefore how to use them. Unlike Mendelev's Periodic Table that is used in Chemistry, there is no fundamental ordering to the elements within a group, and no significance to the presence of a few empty spaces. This table is a companion to the Periodic Table of the HTML5 elements, and the Periodic Table of CSS syntax All three provide an essential reference guide for web developers.

Box-Model	Text	Background	Display	Table	Lists	Page - Based	Visual Formatting	Layout / Position	Pseudo Stuff
box-sizing Usage: content-box padding-box border-box
box-decoration-break Usage: slice clone
border Usage: border-width border-style border-color inherit
border-bottom Usage: border-width border-style border-color inherit									content Usage: normal none string uri counter attr() open-quote close-quote no-open-quote no-close-quote inherit
border-bottom-color Usage: color inherit									:link Usage: This pseudo-class lets you select links inside elements
border-bottom-right-radius Usage: length percentage length length percentage percentage									:hover Usage: This pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it.
border-bottom-left-radius Usage: length percentage length length percentage percentage									:active Usage: This pseudo-class matches when an element is being activated by the user.
border-bottom-style Usage: border-style inherit									:visited Usage: This pseudo-class lets you select only links that have been visited.
border-bottom-width Usage: border-width inherit									::after (:after) Usage: Creates a pseudo-element that is the last child of the element matched.
border-color Usage: color inherit									::before (:before) Usage: Creates a pseudo-element that is the first child of the element matched.
border-image Usage: none image �border-image-slice� stretch repeat round space									::choices Usage: This pseudo-element styles a list of options associated with a form element irrespective of the styling of its label, such as a list of radio buttons.
border-image-outset Usage: length									::first-letter (:first-letter) Usage: This CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
border-image-repeat Usage: stretch repeat round space inherit									::first-line (:first-line) Usage: This pseudo-element applies styles only to the first line of a element.
border-image-slice Usage: number{1,4} percentage{1,4}									::repeat-index Usage: This pseudo-element takes the place of the ::repeat-item rather than being nested inside as a separate element.
border-image-source Usage: none image linear-gradient() inherit								top Usage: length percentage auto inherit	::repeat-item Usage: This pseudo-element represents a single item from a repeating sequence.
border-image-width Usage: length percentage number auto inherit	font Usage: font-style font-variant font-weight font-size line-height font-family							right Usage: length percentage auto inherit	::selection Usage: This non-standard pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
border-left Usage: border-width border-style border-color inherit	@font-face Usage: font-family: font-name src: source font-weight: weight font-style: style							bottom Usage: length percentage auto inherit	::value Usage: This pseudo-element selects the representation of just the data value of a form element, in order to style its appearance.
border-left-color Usage: color inherit	font-family Usage: family-name serif sans-serif cursive fantasy monospace inherit							left Usage: length percentage auto inherit	:checked Usage: This pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select> ) element that is checked or toggled to an on state.
border-left-style Usage: border-style inherit	font-feature-settings Usage: normal quoted list of OpenType feature tag-value pairs							position Usage: static relative absolute fixed inherit	:default Usage: This pseudo-class represents any user interface element that is the default among a group of similar elements.
border-left-width Usage: border-width inherit	font-kerning Usage: auto normal none							float Usage: left right none inherit	:disabled Usage: This pseudo-class represents any disabled element.
border-radius Usage: length{1,4} percentage{1,4} inherit	font-language-override Usage: normal inherit string							clear Usage: none left right both inherit	:empty Usage: This pseudo-class represents any element that has no children at all.
border-right Usage: border-width border-style border-color inherit	font-size Usage: xx-small x-small small medium large x-large xx-large smaller larger length percentage inherit							height Usage: length percentage auto inherit	:enabled Usage: This pseudo-class represents any enabled element.
border-right-color Usage: color inherit	font-size-adjust Usage: number none inherit							width Usage: length percentage auto inherit	:first Usage: This pseudo-class describes the styling of the first page when printing a document.
border-right-style Usage: border-style inherit	font-stretch Usage: inherit ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded						color Usage: color inherit	clip Usage: shape auto inherit	:first-child Usage: This pseudo-class represents any element that is the first child element of its parent.
border-right-width Usage: border-width inherit	font-style Usage: normal italic oblique inherit						cursor Usage: uri x y auto default none context-menu help pointer progress wait cell crosshair text vertical-text alias copy move no-drop not-allowed e-resize n-resize ne-resize nw-resize s-resize se-resize sw-resize w-resize ew-resize ns-resize nesw-resize nwse-resize col-resize row-resize all-scroll inherit	clip-path Usage: uri none inherit	:first-of-type Usage: This pseudo-class represents the first sibling of the given type in the list of children of its parent element.
border-style Usage: none hidden dotted dashed solid double groove ridge inset outset inherit	font-variant Usage: normal small-caps inherit						box-shadow Usage: none inset offset-x offset-y blur-radius spread-radius color	overflow Usage: visible hidden scroll auto inherit	:focus Usage: This pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).
border-top Usage: border-width border-style border-color inherit	font-variant-ligatures Usage: normal inherit common-lig-values discretionary-lig-values historical-lig-values						transform Usage: transform- function none	overflow-x Usage: visible hidden scroll auto	:indeterminate Usage: This pseudo-class represents any elements in an indeterminate state.
border-top-color Usage: color inherit	font-weight Usage: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit						transform-origin Usage: percentage length left center right percentage length top center bottom	overflow-y Usage: visible hidden scroll auto	:in-range Usage: This pseudo-class applies only to elements that have range limitations.
border-top-left-radius Usage: length percentage length length percentage percentage	letter-spacing Usage: normal length						transform-style Usage: preserve-3d flat	overflow-wrap Usage: The word-wrap property has been renamed overflow-wrap in latest drafts of the CSS3 Text specification normal break-word	:invalid Usage: This pseudo-class represents any <input> element whose content fails to validate according to the input's type setting.
border-top-right-radius Usage: length percentage length length percentage percentage	line-height Usage: normal number length percentage						animation Usage: animation-name animation-duration animation-timing- function animation-delay animation-iteration-count animation-direction	resize Usage: none both horizontal vertical inherit	:lang Usage: This pseudo-class matches elements based on the language the element is determined to be in.
border-top-style Usage: border-style inherit	tab-size Usage: integer inherit						animation-delay Usage: time	table-layout Usage: inherit auto fixed	:last-child Usage: This pseudo-class represents any element that is the last child element of its parent.
border-top-width Usage: border-width inherit	text-align Usage: left center right justify start end -moz-left -moz-center -moz-right inherit						animation-direction Usage: normal alternate	vertical-align Usage: baseline sub super text-top text-bottom middle top bottom percentage length inherit	:last-of-type Usage: This pseudo-class represents the last sibling of the given type in the list of children of its parent element.
border-width Usage: width horizontal vertical top vertical bottom top right bottom left inherit	text-align-last Usage: auto start end left right center justify inherit						animation-duration Usage: time	z-index Usage: auto integer inherit	:left Usage: This pseudo-class matches any left-hand page when printing a page.
margin Usage: length{1,4} percentage{1,4} inherit auto	text-decoration Usage: none underline overline line-through blink inherit						animation-fill-mode Usage: none forwards backwards both	columns Usage: column-count column-width	:not Usage: This pseudo-class matches an element that is not represented by the argument.
margin-bottom Usage: length percentage inherit auto	text-decoration-color Usage: color inherit						animation-iteration-count Usage: infinite number	column-count Usage: integer auto	:nth-child Usage: This pseudo-class matches an element that has n-1 siblings before it in the document tree.
margin-left Usage: length percentage inherit auto	text-decoration-line Usage: none underline overline line-through						animation-name Usage: none name	column-fill Usage: auto balance	:nth-last-child Usage: This pseudo-class matches an element that has n-1 siblings after it in the document tree
margin-right Usage: length percentage inherit auto	text-decoration-style Usage: inherit solid double dotted dashed wavy						animation-play-state Usage: running paused	column-gap Usage: length normal	:nth-last-of-type Usage: This pseudo-class matches an element that has n-1 siblings with the same element name after it in the document tree
margin-top Usage: length percentage inherit auto	text-indent Usage: length percentage hanging each-line						animation-timing- function Usage: timing- function	column-rule Usage: column-rule-width column-rule-style column-rule-color transparent	:nth-of-type Usage: This pseudo-class matches an element that has n-1 siblings with the same element name before it in the document tree
outline Usage: outline-width outline-style outline-color inherit	text-overflow Usage: inherit overflow-type						transition Usage: transition-property transition-duration transition-timing- function transition-delay	column-rule-color Usage: color inherit	:only-child Usage: This pseudo-class represents any element which is the only child of its parent.
outline-color Usage: color inherit	text-rendering Usage: auto optimizeSpeed optimizeLegibility geometricPrecision inherit	background Usage: background-color background-image background-repeat background-attachment background-position inherit				break-after Usage: auto always avoid left right page column avoid-page avoid-column	transition-delay Usage: time	column-rule-style Usage: border-style	:only-of-type Usage: This pseudo-class represents any element that has no siblings of the given type.
outline-offset Usage: length inherit	text-shadow Usage: none color offset-x offset-y blur-radius	background-attachment Usage: scroll fixed local				break-before Usage: auto always avoid left right page column avoid-page avoid-column	transition-duration Usage: time	column-rule-width Usage: border-width	:optional Usage: This pseudo-class represents any <input> element that does not have the required attribute set on it.
outline-style Usage: auto none hidden dotted dashed solid double groove ridge inset outset inherit	text-transform Usage: none capitalize uppercase lowercase full-width full-size-kana	background-clip Usage: border-box padding-box content-box			counter-increment Usage: identifier integer inherit none	break-inside Usage: auto avoid avoid-page avoid-column	transition-property Usage: none all property-name	column-span Usage: none all	:out-range Usage: This pseudo-class applies only to elements that have range limitations.
outline-width Usage: thin medium thick length inherit	quotes Usage: open-quote close-quote none inherit	background-color Usage: color inherit			counter-reset Usage: identifier integer inherit none	page-break-after Usage: auto always avoid left right inherit	transition-timing- function Usage: timing- function	column-width Usage: length auto	:read-only Usage: This pseudo-element is provided as a way to style user interface fragments that are user-alterable
padding Usage: length{1,4} percentage{1,4}	unicode-bidi Usage: normal embed isolate bidi-override plaintext inherit	background-image Usage: image none	display Usage: none inline block list-item inline-block table inline-table table-caption table-column table-colgroup table-header-group table-row-group table-footer-group table-row table-cell flexbox inline-flexbox grid inline-grid run-in		list-style Usage: list-style-type list-style-position list-style-image	page-break-before Usage: auto always avoid left right inherit	image-rendering Usage: auto inherit optimizeSpeed optimizeQuality -moz-crisp-edges -o-crisp-edges	max-height Usage: length percentage none inherit	:read-write Usage: This pseudo-element is provided as a way to style user interface fragments that are user-alterable
padding-bottom Usage: length percentage inherit	word-spacing Usage: normal length	background-origin Usage: padding-box border-box content-box	opacity Usage: number inherit	border-collapse Usage: collapse separate inherit	list-style-image Usage: uri none inherit	page-break-inside Usage: auto avoid inherit	image-resolution Usage: from-image resolution snap	max-width Usage: length percentage none -moz-max-content -moz-min-content -moz-fit-content -moz-available	:required Usage: This pseudo-class represents any <input> element that has the required attribute set on it.
padding-left Usage: length percentage inherit	word-wrap Usage: normal break-word	background-position Usage: percentage length left center right inherit top bottom	visibility Usage: visible hidden collapse inherit	border-spacing Usage: length horizontal vertical inherit	list-style-position Usage: inside outside inherit	marks Usage: crop cross none	image-orientation Usage: angle	min-height Usage: length percentage inherit	:right Usage: This pseudo-class matches any right-hand page when printing a page.
padding-right Usage: length percentage inherit	direction Usage: ltr rtl inherit	background-repeat Usage: repeat-x repeat-y repeat space round no-repeat	backface-visibility Usage: visible hidden	caption-side Usage: top bottom left right inherit	list-style-type Usage: disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin armenian georgian none	orphans Usage: integer inherit	perspective Usage: none depth	min-width Usage: length percentage -moz-max-content -moz-min-content -moz-fit-content -moz-available	:root Usage: This pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element
padding-top Usage: length percentage inherit	hyphens Usage: none manual auto	background-size Usage: contain cover length length length auto	mask Usage: uri none inherit	empty-cells Usage: show hide inherit	marker-offset Usage: length	widows Usage: number The minimum number of lines that can stay alone on the top of a new page	perspective-origin Usage: left center right top bottom length	white-space Usage: normal pre nowrap pre-wrap pre-line inherit	:valid Usage: pseudo-class represents any <input> element whose content validates correctly according to the input's type setting.

Periodic Table of CSS3 Grammar

Introduction:

Box-Model

Text

Background

Display

Table

Lists

Page - Based

Visual Formatting

Layout / Position

Pseudo Stuff

box-sizing

box-decoration-break

border

border-bottom

content

border-bottom-color

:link

border-bottom-right-radius

:hover

border-bottom-left-radius

:active

border-bottom-style

:visited

border-bottom-width

::after (:after)

border-color

::before (:before)

border-image

::choices

border-image-outset

::first-letter (:first-letter)

border-image-repeat

::first-line (:first-line)

border-image-slice

::repeat-index

border-image-source

top

::repeat-item

border-image-width

font

right

::selection

border-left

@font-face

bottom

::value

border-left-color

font-family

left

:checked

border-left-style

font-feature-settings

position

:default

border-left-width

font-kerning

float

:disabled

border-radius

font-language-override

clear

:empty

border-right

font-size

height

:enabled

border-right-color

font-size-adjust

width

:first

border-right-style

font-stretch

color

clip

:first-child

border-right-width

font-style

cursor