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 | ↓
|
&& | All values must occur, order doesn't matter | ↓
|
| | Only 1 value must occur | ↓
|
|| | 1 or more values must occur, order doesn't matter | ↓
|
[ ] | Components belong to a single grouping | ↓
|
Component Value Multipliers
Symbol | Explanation | Example |
---|---|---|
? | Optional value, can occur 0 or 1 time | ↓
|
* | Optional value, can occur 0 or many times, multiple values are comma-separated | ↓
|
+ | Can occur 1 or many times, multiple values are space-separated | ↓
|
{𝓍} | Value occurs 𝓍 times, multiple values are space-separated | ↓
|
{𝓍, 𝓎} | Value occurs at least 𝓍 times, at most 𝓎 times, multiple values are space-separated | ↓
|
{𝓍,} | Value occurs at least 𝓍 times, no maximum limit, multiple values are space-separated | ↓
|
# | Value occurs 1 or many times, multiple values are comma-separated | ↓
|
[ ]! | Values in grouping are required, at least 1 value must occur | ↓
|
References
- CSS Values and Units Module Level 3
- Value definition syntax on MDN
- Understanding The CSS Property Value Syntax
Examples referenced from Russ Weakley's article, Understanding The CSS Property Value Syntax.
Optimised for print. Sort of.