CSS and Accessibility
What this domain tests
The cascade, the box model, modern layout, and the accessibility rules that make a page usable by keyboard and screen-reader users.
Core rules and concepts
- Cascade and specificity: inline style 1000, ID 100, class/attribute/pseudo-class 10, element/pseudo-element 1. Later rules win ties; inheritance passes text properties to children.
- Box model: content, padding, border, margin.
box-sizing: border-boxincludes padding and border in the declared width. - Layout with normal flow, flexbox for one dimension, grid for two. Media queries adapt layout.
- Accessibility: semantic HTML first, ARIA only when nothing native fits. WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text. Never remove focus outlines; keep everything operable by keyboard; provide a skip link; label every control; allow text resize to 200 percent; respect
prefers-reduced-motion.
Worked example
Compare #777777 on white and #767676 on white. Reasoning: the first gives about 4.48:1, just under the 4.5:1 AA threshold for body text; the second gives about 4.54:1 and passes. Darkening the grey slightly fixes the page without redesigning it. Now compute specificity for #nav .item a:hover: 100 + 10 + 1 + 10 = 121, so a later single-class rule cannot override it.
Traps that cost marks
outline: none with no replacement; placeholder text used as the only label; colour alone conveying meaning; clickable div elements without keyboard support; assuming !important is a design strategy.