The Inspector Panel
🔍 Lesson 2 — The Inspector Panel
The Inspector is the panel you will use most often. It shows the live HTML structure of any page and all the CSS rules that apply to any element you select. You can edit both HTML and CSS directly and see the results in real time — without touching a single source file.
💡 Fastest way to open
Right-click any element on the page and choose Inspect — or press
Ctrl + Shift + C to activate the element picker and click anything on screen. The Inspector opens with that element already selected.
🗺️ How the Inspector is Laid Out
<body>
<main>
<section class="hero">
<h1 class="headline">Welcome</h1>
<p class="subtitle">Subtitle text</p>
</section>
</main>
</body>
html > body > main > section.hero > h1.headline
.headline style.css:24
☑font-size: 2rem;
☑color: #1a1a2e;
h1 style.css:8
☑font-weight: 700;
☑color: black;
user agent stylesheet
display: block;
The left pane shows the HTML tree. The right pane shows the CSS rules for the selected element. The breadcrumb bar at the bottom of the HTML pane shows the full path from root to the selected element — click any ancestor to jump to it.
🌳 Navigating the HTML Tree
| Action | How |
|---|---|
| Select an element | Click the node in the tree |
| Expand / collapse | Click the ▶ triangle next to the tag |
| Expand all children | Alt + Click the triangle |
| Search the tree | Ctrl + F — search by tag, class, selector, or text |
| Scroll element into view | Right-click node → Scroll Into View |
| Copy CSS selector | Right-click node → Copy → CSS Selector |
| Screenshot one element | Right-click node → Screenshot Node |
✏️ Editing HTML Live
Edit an Attribute
Double-click any attribute value to edit it inline. Add or remove class names and the page updates instantly.
Edit Text Content
Double-click the text inside a text node to change it. Good for testing layout with different text lengths.
Edit as HTML
Right-click a node → Edit as HTML. A text editor opens — paste in entirely new markup and press
Ctrl + Enter to apply.Move Elements
Drag any node in the tree to reorder it — before or after siblings, or into a new parent. Test layout changes without touching source files.
Delete an Element
Select a node and press
Delete. Press Ctrl + Z to undo.Add a New Attribute
Click after the last attribute inside an opening tag — a cursor appears. Type
data-debug="true" and press Enter.🎨 Reading the CSS Rules Pane
Rules appear from most specific to least specific. The rule at the top wins. Struck-through declarations are overridden by a more specific rule above them — this is the fastest way to answer "why isn't my CSS working?"
.hero .headline winsstyle.css:42
☑ color: #1a1a2e;
☑ font-size: 2.5rem;
.headline overriddenstyle.css:18
color: #333;
☑ line-height: 1.3;
h1 overriddenstyle.css:5
font-size: 2rem;
☑ font-weight: 700;
Inherited from section.hero inherited
font-family: 'Inter', sans-serif;
Toggle a Declaration
Click the checkbox to the left of any property to toggle it off and on. The page updates instantly — use this to confirm what a style is actually doing.
Edit a Value
Click any value to edit it inline. Use
↑ / ↓ arrow keys to increment numbers by 1. Hold Shift to step by 10.Force Pseudo-States
Click :hov in the Rules toolbar to force
:hover, :focus, or :active — inspect styles that only appear on interaction without holding the mouse.Jump to Source File
Every rule shows a file name and line number (e.g.
style.css:42) on the right. Click it to jump to that exact line in the Debugger's source view.📦 The Box Model Diagram
Switch to the Layout tab in the right pane to see the box model — the actual pixel values for margin, border, padding, and content of the selected element.
margin
24
top
0
right
24
bottom
0
left
border
1
top
1
right
1
bottom
1
left
padding
16
top
24
right
16
bottom
24
left
content
480 × 64
Common gotchas the box model reveals: unexpected margin collapsing (two stacked elements sharing one margin), padding that looks like margin, and width mismatches caused by
box-sizing: content-box vs border-box.
🧮 Rules vs Computed Styles
The Computed tab shows the final resolved value of every property after all cascading, inheritance, and unit conversions have been applied. This is different from the Rules pane, which shows raw declared values.
| Situation | Use |
|---|---|
| "Which rule is winning?" | Rules pane — shows the full cascade with struck-through losers |
| "What is the actual pixel value?" | Computed — shows resolved px after rem/em conversion |
| "Why is font-size 14px when I set 1rem?" | Computed — shows the calculated px value and which rule produced it |
| "What colour does the browser actually render?" | Computed — shows the final hex/rgb value with a colour swatch |
| "Which properties have been explicitly set?" | Computed with Browser Styles hidden — only non-default properties show |
ℹ️ Tip
In the Computed tab, click the ▶ expand arrow next to any property to see exactly which CSS rule produced that computed value and which source file it came from.
✏️ Exercises
-
Live-edit a colour. Open DevTools on any website, press
Ctrl + Shift + C, and click the main heading. In the Rules pane, find acolorproperty and click its value. Type a new colour (e.g.red) and press Enter. PressCtrl + Zto undo. - Toggle a declaration. With an element selected, find any CSS property in the Rules pane and click its checkbox to turn it off. Observe how the element changes. Click again to restore it.
-
Force a hover state. Select a button or navigation link. Click :hov in the Rules toolbar and tick
:hover. Look for any new CSS rules that appear — these are the hover styles. -
Read the box model. Select any
<div>or card element and switch to the Layout tab. Identify the content dimensions, padding, border, and margin values. -
Compare Rules vs Computed. With an element selected, note the
font-sizevalue in the Rules pane (likely inremorem). Switch to the Computed tab and findfont-size— it shows the resolved pixel value. Click the expand arrow to see which rule produced it. -
Edit as HTML. Right-click any heading in the HTML tree and choose Edit as HTML. Change the text content and press
Ctrl + Enter. Refresh the page to confirm the original is restored.
📌 Key Takeaways
- Ctrl + Shift + C activates the element picker — click anything on screen to inspect it immediately.
- Struck-through declarations in the Rules pane are overridden — the winning rule is above them.
- Toggle checkboxes on CSS properties to isolate exactly what a style is doing.
- :hov forces pseudo-states so you can inspect hover/focus/active styles without holding the mouse.
- The box model diagram (Layout tab) gives exact pixel values for every layer of the element's spacing.
- Computed styles show the final resolved value — use it when a unit conversion (rem → px) or inheritance is unclear.
- File links in the Rules pane jump directly to the source CSS file and line number.