Setting Up Your Environment

Developer tools are your CSS debugger

Right-click any element and choose Inspect (or press F12). The Elements (Chrome, Edge) or Inspector (Firefox) panel shows:

• Styles — every rule that applies to the selected element, in cascade order, with overridden declarations crossed out, and invalid ones marked with a warning icon. Click any value to edit it live; tick boxes toggle declarations on and off.
• Computed — the final value of every property, and which rule it came from. When "my CSS doesn't work", look here first.
• Box model diagram — the element's content size, padding, border, and margin.
• Layout — overlays for Flexbox and Grid containers showing lines, tracks, and gaps.
• Toggle element state (:hov) — force :hover, :focus, and other states to style them.
• Device toolbar (Ctrl + Shift + M) — preview phone sizes.
• Rendering tab — emulate dark mode, reduced motion, and vision deficiencies.

Changes in DevTools are temporary. Copy the ones you like into your stylesheet.

Live reload

A local server with live reload saves a lot of time: VS Code's Live Server extension or npx browser-sync start --server --files "**/*" reload the page (or inject new CSS without a reload) when you save.

Checking and formatting

• Our CSS Validator and the W3C CSS validator catch typos and invalid values.
• Stylelint is the standard CSS linter (Level 3).
• Prettier formats CSS consistently. Our Code Beautifier does it in the browser, and CSS Minifier shrinks it for production.

Every example in this course was checked with the W3C's Nu checker (its CSS mode), and the computed values shown were read from a real Chromium browser.