CSS describes how structured documents are presented. HTML supplies the document meaning and hierarchy; CSS selects elements and assigns visual and layout properties.

A rule has a selector and a set of declarations:

p {
  max-width: 60ch;
  line-height: 1.5;
}

Selectors

Selectors choose elements by type, class, attributes or their relationships in the document tree:

.warning { font-weight: bold; }
nav a { text-decoration: none; }

Cascade

Several rules can apply to the same element. The cascade determines which declaration wins from factors such as origin, importance, selector specificity and source order.

Some properties also inherit from parent elements, while others do not.

Box model

Rendered elements are commonly described by a box model containing content, padding, border and margin.

Understanding which dimensions belong to each layer prevents many layout surprises.

Layout

Modern CSS includes layout systems such as flexbox and grid that arrange boxes according to explicit alignment and sizing rules.

Separation of concerns

The same HTML can be presented differently by changing CSS without rewriting the document semantics. CSS should therefore express presentation while the HTML continues to carry the meaningful document structure.