CSS Spec Terms, for Future Reference

Last updated:

I accidentally use some CSS terms interchangeably sometimes. I try to maintain discipline here, but not everyone even knows what the correct terms are, so they can't make themselves do it right.

I'll add to this list in the future as I come up with more stuff that occasionally confuses me.

rule or ruleset: A selector + braces combo, or an at-rule.

declaration block: A sequence of declarations.

declaration: A property + colon + value combo.

property value: The entire value of a property.

component value: A single piece of a property value. Like the 5px in text-shadow: 0 0 5px blue;. Can also refer to things that are multiple terms, like the 1-4 terms that make up the background-size portion of the background shorthand.

term: The basic unit of author-facing CSS, like a single number (5), dimension (5px), string ("foo"), or function. Officially defined by the CSS 2.1 grammar (look for the 'term' production)

outer : Refers to the margin box.

inner : Refers to the content box.

start/end/before/after: Refers to the logical directions, which are dependent on the 'direction' and 'writing-mode' properties. start and end are in the "inline" axis, the axis that a line of text is laid out in (horizontal in English text). Perpendicular to that, before and after are in the "block" axis, the axis that block elements are laid out in (vertical in English text).

simple selector: A single atomic selector, like a type selector, an attr selector, a class selector, etc.

compound selector: One or more simple selectors without a combinator. div.example is compound, div > .example is not.

complex selector: One or more compound selectors chained with combinators.

combinator: The parts of selectors that express relationships. There are four currently - the space (descendant combinator), the greater-than bracket (child combinator), the plus sign (next sibling combinator), and the tilda (following sibling combinator).

sequence of selectors: One or more of the named type of selector chained with commas.

inline: Something that participates in inline layout (it goes into lineboxes) and will break across lines, like <span>.

atomic inline: Something that participates in inline layout but doesn't break across lines, like <img> or anything with display:inline-block.

inline-level: Either inline or atomic inline.

block container: Something whose insides are formatted with block layout, like <div> or anything with display:inline-block.

block-level: Something that participates in block layout, like <div>.

block: A block-level block container.

(a limited set of Markdown is supported)