Text & keywords

<string>

Text in double or single quotes. A quote of the same kind, a backslash or a newline inside the string must be escaped with a backslash; \A is a line break and \2014 the character U+2014.

.note::before { content: "Note:\A"; white-space: pre; }

<ident>

Any CSS identifier: an unquoted name such as auto, sans-serif or my-grid. It starts with a letter, an underscore, a non-ASCII character, a hyphen followed by one of those, or two hyphens, and continues with letters, digits, hyphens and underscores. Other characters can be included with backslash escapes.

Keywords defined by CSS are matched case-insensitively within the ASCII range, so AUTO works. An identifier in quotes is a <string>, not an identifier.

<custom-ident>

A name you make up, such as an animation name or a grid line name. Unlike CSS keywords it is case-sensitive, so Fade and fade are different names.

A name that clashes with a keyword in the same property is invalid there: animation-name: none means no animation, never a set of keyframes called none.

<dashed-ident>

A <custom-ident> that must start with two hyphens, like a custom property name. The prefix keeps author names from ever clashing with keywords CSS adds later.

.trigger { anchor-name: --menu-button; }
.menu { position-anchor: --menu-button; }

inherit, initial, unset, revert, revert-layer, revert-rule

Keywords that every property accepts, including custom properties. Instead of giving a value, they tell the cascade where to take the value from. Each must be the only thing in the declaration; it cannot be combined with other values.

button.plain { all: unset; }
.prose ul { list-style: revert; }

<generic-font-family>

Keywords that ask for a kind of font rather than a named one. The browser maps each to an installed font, so a generic family is the usual last item in a font-family list. CSS 2 called this type <generic-family>. Generic names are keywords and must not be quoted: "serif" looks for a font actually called serif.

The ui-* keywords match nothing when the system has no such font, so the next family in the list is used.

font-family: ui-monospace, "Cascadia Code", Menlo, monospace;

<family-name>

The name of a particular font family, such as Georgia or "Helvetica Neue". It can be a quoted string, or one or more unquoted identifiers separated by spaces.

Quote any name that contains digits at the start of a word, punctuation, or a word that is also a generic family or CSS-wide keyword. Quoting every multi-word name is the simplest rule.

<absolute-size>

Font size keywords on a fixed scale. medium is the user's preferred font size, usually 16px; the other keywords step up and down from it. Browsers round the results, so exact sizes vary slightly.

xxx-large is newer than the others: Chrome 79 · Firefox 70 · Safari 16.4.

<relative-size>

A font size one step larger or smaller than the parent's. Browsers move along the <absolute-size> scale, or multiply by a ratio of about 1.2 when the parent's size is between steps.

<counter-style>

How a counter value is turned into a marker: decimal numbers, letters, roman numerals, a bullet symbol, or a numbering system for another script. It is the name of a predefined style or of one you define with @counter-style, or an anonymous style made with symbols().

<counter-style-name> is a <custom-ident>; the predefined names are matched case-insensitively, author-defined ones case-sensitively. symbols() ships in Firefox 35 and Chrome 155 only.

ol.legal { list-style-type: upper-roman; }
li::after { content: " (" counter(list-item, lower-alpha) ")"; }

<text-edge>

Which font metric marks the top and bottom edge of a line of text when trimming the extra space above and below it. The first keyword sets the over edge and the second the under edge; text on its own sets both.

.button { text-box: trim-both cap alphabetic; }