CSS rules, selectors, and the cascade
CSS (Cascading Style Sheets) controls the visual presentation of HTML documents. A CSS rule consists of a selector that matches elements and a declaration block containing one or more property: value; pairs. The "cascading" in the name refers to the algorithm that determines which rule wins when multiple rules target the same element: specificity (inline > ID > class > element), source order (later rules override earlier ones at equal specificity), and importance (!important overrides the cascade, a last resort, not a first tool).
Well-formatted CSS has one property per line, consistent indentation within rules, and blank lines between rule blocks. Minified CSS collapses all that into a single line for production delivery. A formatted stylesheet is essential for code review, debugging specificity conflicts, and understanding inherited vs explicitly set values. Paste a minified CDN stylesheet here to inspect what rules it applies.
| Selector type | Example | Specificity weight |
|---|---|---|
| Element | p { } | 0,0,1 |
| Class | .card { } | 0,1,0 |
| ID | #header { } | 1,0,0 |
| Inline style | style="color:red" | 1,0,0,0 |
| Pseudo-class | a:hover { } | 0,1,1 |
| Attribute | [type="text"] { } | 0,1,0 |
CSS custom properties (variables) and modern patterns
CSS custom properties, declared as --variable-name: value and used as var(--variable-name), allow centralised theming without a preprocessor. Set them on :root for global scope or on a specific element for scoped overrides. Custom properties are live: changing them in JavaScript updates all dependent styles in real time, making them useful for theme switching, dynamic spacing, and runtime configuration. The formatter preserves custom property declarations and their scoping context.
Related: HTML formatter, JavaScript formatter. See the CI/CD guide for CSS linting in automated pipelines.