About

A property value can have one or more components (value). Component values are specified in terms of tokens.

Common value computations

CSS-wide common keywords

initial

The initial keyword represents the value specified as the property’s initial value.

inherit

The inherit keyword represents the computed value of the property on the element’s parent.

unset

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

Type

Value types are designated in several ways:

  • (keyword|discrete) values (e.g., auto, disc, etc.)
  • basic data types, which appear between “<” and “>” (e.g., <length>, <percentage>, etc.).
  • types that have the same range of values as a property bearing the same name (e.g., <'border-width'> <'background-attachment'>, etc.).
  • non-terminals that do not share the same name as a property. In this case, the non-terminal name appears between “<” and “>”, as in <border-width>. Notice the distinction between <border-width> and <'border-width'>; the latter is defined in terms of the former.

Operator

Component values may be arranged into property values as follows:

  • Several juxtaposed words mean that all of them must occur, in the given order.
  • A bar (|) separates two or more alternatives: exactly one of them must occur.
  • A double bar (||) separates two or more options: one or more of them must occur, in any order.
  • A double ampersand (&&) separates two or more components, all of which must occur, in any order.
  • Brackets ([ ]) are for grouping.

Spaces may appear between tokens in property values.

Juxtaposition is stronger than the double ampersand, the double ampersand is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent: 

    a b   |   c ||   d &&   e f
  [ a b ] | [ c || [ d && [ e f ]]]

Modifier

Every type, keyword, or bracketed group may be followed by one of the following modifiers:

  • An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
  • A plus (+) indicates that the preceding type, word, or group occurs one or more times.
  • A question mark (?) indicates that the preceding type, word, or group is optional.
  • A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word, or group occurs at least A and at most B times.

Example

The following examples illustrate different value types: 

    Value: N | NW | NE
    Value: [ <length> | thick | thin ]{1,4}
    Value: [<family-name> , ]* <family-name>
    Value: <uri>? <color> [ / <color> ]?
    Value: <uri> || <color>
    Value: inset? && [ <length>{2,4} && <color>? ]

Documentation / Reference