PHASE 0Beginner ~20 min· topic 4 of 4

Topic 0.4

Inspecting CSS in DevTools

In one line

DevTools shows every rule that matches an element, which declarations won and which were crossed out, the final computed values and the box model, and lets you edit and toggle styles live to find out why something looks the way it does.

Think of it like this

A doctor's X-ray. From the outside you only see that your arm hurts. The X-ray shows the bones inside and exactly where the crack is. DevTools is the X-ray for your page: you see every rule touching an element, which one won and why, instead of guessing.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Elements panel: The DevTools panel that shows the page's live HTML and the CSS of the selected element.
Element picker: A DevTools tool (Ctrl+Shift+C) that lets you click any part of the page to select it.
Styles pane: The list of every CSS rule that matches the selected element, winner first.
Crossed out: A declaration drawn with a line through it: it matched but lost the cascade, or it is invalid.
Computed value: The final value the browser uses for a property, after all rules, inheritance and conversions.
Box model: The four layers of every element's box: content, padding, border and margin.
Padding: Space inside an element, between its content and its border.
Margin: Space outside an element's border, pushing other elements away.
Force state: Making DevTools pretend an element is hovered, focused or active, so you can see those styles.

Step by step

01Select the element

Right-click the button in the first live example below and choose Inspect. DevTools opens with the <button> highlighted in the HTML tree. (The preview is a frame inside this page; DevTools inspects it like any other page.)

02Read the Styles pane from the top

At the top is element.style, then the most specific rule, then weaker ones, then the browser's own user agent stylesheet rule for buttons at the bottom. Look for crossed-out lines: each one lost to a declaration higher up. The colour that wins is the one not crossed out.

Styles pane (simplified)whole filetext

element.style {
}
.actions .buy {            style.css:9
  background: seagreen;
}
.buy {                     style.css:4
  background: orange;      <- crossed out
  padding: 10px 18px;
}
button {                   user agent stylesheet
  padding: 1px 6px;        <- crossed out
  ...
}

03Toggle and edit

Hover the background: seagreen line and untick its checkbox. The button turns orange immediately, because the next rule down now wins, and the orange line is no longer crossed out. Tick it again. Then click 10px in padding and press the up arrow a few times to watch the button grow.

04Check the Computed tab

Switch to Computed and find background-color. It shows one final value, rgb(46, 139, 87) (seagreen). Expand it to see both declarations that tried to set it, and click the winning one's link to jump to the rule.

05Read the box model

At the top of the Computed tab, the box diagram shows the content size in the middle, then padding, border and margin around it. Hover each layer to highlight it on the page. Double-click a number to edit it.

Read the box modeldiagram

Rendering diagram…

06Find out why a style isn't applying

Use this order every time. 1) Is the rule in the Styles pane at all? If not, the selector doesn't match: check the class name in the HTML tree. 2) Is the declaration crossed out? Find the uncrossed one above it that wins. 3) Is there a warning icon? The property or value is invalid. 4) Does the Computed tab show the value you expected but the page still looks wrong? Then the problem is layout, not the cascade.

Try it yourself

1
Find the winner yourself
In the first example, predict which background DevTools will show crossed out. Inspect the button to check. Then untick background: seagreen and predict the new colour before you look.
2
Spot the typo
Still in the first example, find the line with the warning icon. Hover it to read the message, then fix colr to color in the CSS tab. The warning disappears on the next Run.
3
Grow the box with arrow keys
Inspect the box in the second example. In the Styles pane click 16px in padding and press Shift+Up twice. Predict the new visible width (200 + 36 + 36 + 4 + 4 = 280px), then check the box diagram.

Code & diagrams

A button to inspect New tab

Right-click the button → Inspect. Find the crossed-out `background: orange`, the `colr` line with a warning icon, and the user agent stylesheet rule for `button`.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

background-color: rgb(46, 139, 87)
color: rgb(255, 255, 255)
padding: 10px 18px

The box model, measured New tab

Inspect the box and open the Computed tab: the diagram shows 200 in the middle, 16 padding, 4 border, 24 margin. 200 + 16 + 16 + 4 + 4 = 240px of visible width.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

content width: 200px
padding + border each side: 16px 4px
visible width (offsetWidth): 240
margin: 24px

States to force with :hov New tab

Inspect the link, click `:hov` in the Styles pane and tick `:hover`, then `:focus-visible`. The page shows those styles while you move the mouse away and edit them.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

A class name that doesn't match

In the first example, rename .buy to .Buy in both CSS rules (capital B).

terminal

$ Console

── what you'll see ──

background-color: rgb(240, 240, 240)

Myth vs fact

Myth

If a rule isn't working, the browser didn't load my CSS.

Fact

Usually the file loaded fine. Check the Styles pane: the rule may be crossed out (it lost the cascade), marked invalid, or missing because its selector doesn't match. Only if none of your rules appear at all should you check the Network tab.

Myth

Editing styles in DevTools saves them to my files.

Fact

Edits are temporary and vanish on reload. Copy them into your CSS file (Chrome's Changes tab helps), or set up a Workspace to save edits directly.

Myth

The Styles pane shows the final values.

Fact

It shows the declarations as written. The Computed tab shows the final values the browser actually uses, after inheritance and conversion to pixels and rgb().

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
In the Console, $0 is the element currently selected in the Elements panel: getComputedStyle($0).display reads its final display value without scrolling the Computed tab.
▸
The Styles pane also exposes newer tools: badges like flex and grid in the HTML tree open layout overlays, and the Layout tab draws grid lines and gaps (Phases 7 and 8). Container queries, @layer and nesting are shown with their context above each rule.
▸
The Rendering drawer (Chrome: Esc → ⋮ → Rendering) can emulate prefers-color-scheme: dark, prefers-reduced-motion, print media and vision deficiencies, and can flash areas that repaint, which helps with dark mode, accessibility and performance work.
▸
The Performance panel shows how long Recalculate Style and Layout take. Very broad selectors on huge DOMs, or JavaScript that reads layout (offsetWidth) right after writing styles in a loop (forced synchronous layout), show up there as long purple bars.

Remember this

1
Open DevTools with F12, Ctrl+Shift+I (Cmd+Option+I on a Mac), or right-click an element on the page and choose Inspect. The Elements panel (called Inspector in Firefox) shows the live HTML tree on one side and the CSS for the selected element on the other. Ctrl+Shift+C (Cmd+Shift+C) turns on the element picker: hover over the page and click the thing you want to inspect.
2
The Styles pane (Firefox: Rules) lists every rule that matches the selected element, the winner of the cascade at the top. The first box, element.style, shows the inline style attribute (empty if there is none). Each rule shows where it came from on the right: a file name and line number such as style.css:12, or user agent stylesheet for the browser's defaults. Further down, sections titled Inherited from body (or another ancestor) show inherited properties.
3
A declaration that lost the cascade is crossed out (struck through): it matches, but another declaration won. A declaration the browser couldn't understand is also struck through and has a warning icon; hover it to see the reason, such as "Unknown property name" or "Invalid property value". A rule that doesn't appear at all means its selector doesn't match this element, which usually means a typo or a wrong class name.
4
You can edit everything: click a value to change it, click after the last declaration to add a new one, or use the + button to create a new rule. With a number selected, the up and down arrow keys change it by 1 (Shift for 10, Alt/Option for 0.1). Hover a declaration and a checkbox appears: untick it to switch that one declaration off. :hov lets you force a state like :hover or :focus so you can style it without holding the mouse still, and .cls adds or removes classes.
5
The Computed tab shows the final value of every property after the cascade, inheritance and unit conversion (for example 2em becomes 32px, navy becomes rgb(0, 0, 128)). Expand a property with its arrow to see every declaration that tried to set it and which one won, with a link to the source. Use the filter box to find a property quickly.
6
The box model diagram (at the top of the Computed tab in Chrome and Edge; the Layout tab in Firefox) draws the element's content size in the middle, surrounded by padding (space inside the border), border, and margin (space outside the border). Hovering an element in the HTML tree highlights the same layers on the page: content in blue, padding in green, margin in orange. You'll study the box model properly in Phase 5.
7
Edits in DevTools live only in your browser's memory. Reload and they're gone, so copy the declarations you want back into your real CSS file. Chrome's Changes tab (in the drawer, opened with Esc) lists everything you edited, which makes copying easy.

Explain it without notes

How do you find out why a CSS declaration isn't taking effect?

What is the difference between the Styles pane and the Computed tab?

What does it mean when a declaration is crossed out, and when it has a warning icon?

Practice

In the first example, without touching the HTML, make the button orange again by editing only the CSS. Give two different ways.

In the second example, change the CSS so the box's visible width is exactly 300px, keeping padding: 16px and the 4px border. What width do you need?

Trade-offs

↔
Experimenting in DevTools is the fastest way to find a fix, but edits are easy to lose and can drift from your source files; copy changes back promptly or use Workspaces.

Done when you can

I can open DevTools and inspect any element with right-click → Inspect or the picker.
I can read the Styles pane: winner at the top, crossed-out losers, warning icons, user agent styles.
I can toggle, edit and add declarations, and force :hover with :hov.
I can use the Computed tab to find a property's final value and which rule set it.
I can read the box model diagram: content, padding, border, margin.
I can follow a step-by-step routine to find out why a style isn't applying.

Command Palette

Words you'll meet

Step by step

01Select the element

02Read the Styles pane from the top

03Toggle and edit

04Check the Computed tab

05Read the box model

06Find out why a style isn't applying

Try it yourself

Find the winner yourself

Spot the typo

Grow the box with arrow keys

Code & diagrams

Break it on purpose

A class name that doesn't match

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can