DevTools for CSS
Browser DevTools are the single most important tool in a CSS developer's workflow. Professional developers spend as much time in DevTools as they do in their code editor — it's where you inspect live styles, debug layout problems, experiment with design changes, and understand exactly why something looks the way it does. This page walks through the DevTools features you'll use every day.
Opening DevTools
Opening DevTools: Keyboard: F12 (Windows/Linux) or Cmd+Option+I (macOS) Keyboard: Ctrl+Shift+I (Windows/Linux) Right-click: Right-click any element → "Inspect" Console: Ctrl+Shift+J (Windows) / Cmd+Option+J (macOS) The quickest way to inspect a specific element: Right-click it → Inspect DevTools opens with that exact element selected
The Elements panel
The Elements panel (called "Inspector" in Firefox) shows the live DOM — the HTML structure of the page as the browser currently sees it, including any changes made by JavaScript. You can click any element to select it, and the Styles panel on the right updates to show every CSS rule that applies to it.
Elements panel — things you can do: Click any element → select it; styles panel updates Hover over an element → the element is highlighted on the page Double-click text → edit the text content live Double-click attribute → edit an attribute (e.g. class name) Right-click an element → copy HTML, hide element, force a state (:hover) Arrow keys → navigate up/down the DOM tree H key (with element selected) → toggle visibility (adds display:none)
The Styles panel — understanding the output
When you select an element, the Styles panel shows all CSS rules that match it, ordered from most specific to least specific. This is the cascade made visible.
Styles panel layout (for a selected <h2> inside <main>):
element.style { ← inline styles (highest priority)
(none)
}
main h2 { ← rule from styles.css, line 24
color: #1a1a2e; ← applied ✓
font-size: 1.5rem; ← applied ✓
}
h2 { ← rule from styles.css, line 15
color: darkblue; ← overridden (struck through) — less specific
}
* { ← universal selector
box-sizing: border-box;
}
Inherited from <main>: ← inherited properties shown separately
font-family: system-ui, sans-serif;
color: #222;
user agent stylesheet ← browser defaults (lowest priority)
display: block;
font-size: 1.5em;
font-weight: bold;Editing styles live
You can edit any value in the Styles panel and the page updates immediately:
Click a value to edit it — type a new value and press Enter.
Use arrow keys on a number — Up/Down nudges by 1; Shift+Up/Down by 10; Alt+Up/Down by 0.1.
Click a colour swatch — a colour picker opens; drag the cursor to experiment.
Check/uncheck the checkbox next to a declaration to toggle it on and off.
Click the empty space in a rule to add a new declaration.
Click the
+button at the top of the Styles panel to add a new rule.
The Computed panel
The Computed panel shows the final resolved values for every property — after the cascade, inheritance, and value calculation have all been applied. This is what the browser is actually using to render the element.
Computed panel for a <p> element: color: rgb(34, 34, 34) ← your #222 in hex, resolved to rgb font-family: system-ui, ... ← inherited from body font-size: 16px ← 1rem resolved based on root font-size line-height: 27.2px ← 1.7 × 16px = 27.2px margin-bottom: 16px ← your declared value display: block ← browser default Click any property → jumps to the rule in the Styles panel that set it
The box model diagram
In the Computed panel (Chrome) or the Computed section of the Inspector (Firefox), there's a visual diagram of the box model for the selected element — a nested rectangle showing the exact pixel dimensions of the content area, padding, border, and margin.
┌──────────── margin: 16px 0 ─────────────────┐ │ ┌────────── border: 0 ─────────────────┐ │ │ │ ┌──────── padding: 0 ────────────┐ │ │ │ │ │ │ │ │ │ │ │ content: 688px × 96px │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ Hover over any section to highlight it on the page. Click any number to edit it live.
Forcing element states
Testing :hover or :focus styles is tricky — the moment you move your mouse to DevTools, the hover state disappears. DevTools lets you force a state:
In Chrome: 1. Select an element in the Elements panel 2. Click the ":hov" button in the Styles panel header 3. Check ":hover", ":focus", ":active", ":visited", or ":focus-within" → The state persists even as you inspect styles In Firefox: Right-click an element → "Change pseudo-class state"
The Layout panel — Flexbox and Grid overlays
Chrome and Firefox both have dedicated layout visualisation tools. When you select a flex or grid container, DevTools can overlay the flex/grid lines directly on the page, showing you track sizes, gaps, and item placement.
Chrome Layout panel (inside Elements → Layout tab):
Flexbox section → toggle overlay for any flex container
Grid section → toggle overlay for any grid container; shows:
- grid lines (numbered from 1)
- track sizes (e.g. 1fr = 320px, 200px, etc.)
- named areas
- gaps
Firefox also has an excellent grid inspector — click the "grid" badge
next to any element with display:grid in the Inspector panel.Quick reference
You want to… | Use this |
|---|---|
Inspect a specific element | Right-click → Inspect |
See all styles for an element | Elements → Styles panel |
See final computed values | Elements → Computed panel |
Check the box model | Computed panel → box diagram |
Test hover/focus styles | Styles panel → ":hov" toggle |
Find what's overriding a style | Look for the struck-through declaration above |
Inspect flex/grid layout | Elements → Layout panel → toggle overlay |
Test colour changes | Click the colour swatch in Styles panel |
Copy all your live edits | More Tools → Changes → copy diff |