Chapter 3 of 10All chapters
Chapter 3 of 10
CSS
Selectors, the cascade and the box model.
How rules apply
Selectors match elements, and when rules conflict the more specific one wins, with later rules breaking ties. Inheritance passes some properties, such as colour and font, down the tree.
- Keep specificity low and flat; classes are usually enough.
- Custom properties, written --name, let one value drive a whole design.
The box model
Every element is content, padding, border and margin. Setting box-sizing to border-box makes width mean what people expect, which is why almost every project sets it globally.