CSS and Page Styling
What the exam tests
Selectors and specificity, the cascade, box model, layout with flexbox and grid, responsive design with media queries, and typography and colour.
Core rules
- A rule is a selector plus a declaration block: property: value;.
- Cascade order: origin/importance, specificity, then source order.
- Specificity: inline (1,0,0,0) > IDs (0,1,0,0) > classes/attributes/pseudo-classes (0,0,1,0) > elements/pseudo-elements (0,0,0,1).
- Box model: content, padding, border, margin. box-sizing: border-box includes padding and border in width.
- display: block/inline/inline-block/none; flex and grid handle one- and two-dimensional layout.
- Media queries apply rules at breakpoints.
Worked example
#main a {color: red} vs .nav a.active {color: blue} vs a {color: green} Specificity: #main a = (1,0,1); .nav a.active = (0,2,1); a = (0,0,1). The ID rule wins, so the link is red even if .nav a.active appears later, unless !important or an inline style is used. Reasoning: compare ID count first, then class count, then element count.
Traps
Do not confuse margin with padding. Do not assume later CSS always wins - specificity beats source order. Do not use !important as a routine fix. Inline styles outrank selectors. A missing semicolon can kill the next declaration.