CSS property syntax cheatsheet

Backus-Naur Form (BNF) is a context-free notation method to describe the syntax of a language. The CSS property value syntax is loosely based on BNF notation.

Formally, a BNF specification is a set of derivation rules, written as:

<symbol> ::= __expression__

in other words, the stuff on the left is replaced with the stuff on the right.

All CSS properties have values. Different properties have different value syntaxes, which are defined in their respective CSS specifications.

Component Value Types

Value type Description Example
Keyword values Actual value used; No quotation marks or angle brackets auto or none
Basic data types To be replaced with actual values; Angle brackets <length> or <percentage>
Property data type Uses same set of values as defined property, usually used for shorthand property definitions; Quotation marks within angle brackets <'grid-template-rows'> or <'flex-basis'>
Non-property data type Set of values is defined somewhere else in the specification, usually near its first appearance; Angle brackets only <line-names> or <track-repeat>

Component Value Combinators

Symbol Explanation Example
Space-separated adjacent values All values must occur in specified order 
<'property-name'> = value1 value2 value3
↓
.selector { property: value1 value2 value3; }
&& All values must occur, order doesn't matter 
<'property-name'> = value1 && value2
↓
.selector { property: value1 value2; }
.selector { property: value2 value1; }
| Only 1 value must occur 
<'property-name'> = value1 | value2 | value3
↓
.selector { property: value1; }
.selector { property: value2; }
.selector { property: value3; }
|| 1 or more values must occur, order doesn't matter 
<'property-name'> = value1 || value2 || value3
↓
.selector { property: value3; }
.selector { property: value2 value3; }
.selector { property: value1 value2 value3; }
 and so on...
[ ] Components belong to a single grouping 
<'property-name'> = [ value1 | value2 ] value3
↓
.selector { property: value1 value3; }
.selector { property: value2 value3; }

Component Value Multipliers

Symbol Explanation Example
? Optional value, can occur 0 or 1 time 
<'property-name'> = value1 [, value2 ]?
↓
.selector { property: value1; }
.selector { property: value1, value2; }
* Optional value, can occur 0 or many times, multiple values are comma-separated 
<'property-name'> = value1 [, <value2>]*
↓
.selector { property: value1; }
.selector { property: value1, <value2>; }
.selector { property: value1, <value2>, <value2>, <value2>; }
 and so on...
+ Can occur 1 or many times, multiple values are space-separated 
<'property-name'> = <value>+
↓
.selector { property: <value>; }
.selector { property: <value> <value>; }
.selector { property: <value> <value> <value> <value>; }
 and so on...
{𝓍} Value occurs 𝓍 times, multiple values are space-separated 
<'property-name'> = <value>{2}
↓
.selector { property: <value> <value>; }
{𝓍, 𝓎} Value occurs at least 𝓍 times, at most 𝓎 times, multiple values are space-separated 
<'property-name'> = <value>{1,3}
↓
.selector { property: <value>; }
.selector { property: <value> <value>; }
.selector { property: <value> <value> <value>; }
{𝓍,} Value occurs at least 𝓍 times, no maximum limit, multiple values are space-separated 
<'property-name'> = <value>{1,}
↓
.selector { property: <value>; }
.selector { property: <value> <value> <value>; }
 and so on...
# Value occurs 1 or many times, multiple values are comma-separated 
<'property-name'> = <value>#
↓
.selector { property: <value>; }
.selector { property: <value>, <value>; }
.selector { property: <value>, <value>, <value>, <value>; }
 and so on...
[ ]! Values in grouping are required, at least 1 value must occur 
<'property-name'> = <value1> [ <value2> | <value3> ]!
↓
.selector { property: <value1> <value2>; }
.selector { property: <value1> <value3>; }

References

Examples referenced from Russ Weakley's article, Understanding The CSS Property Value Syntax.
Optimised for print. Sort of.