The Elements Tab

The Elements tab shows you the live HTML structure of your page and every CSS rule applied to any element. When something looks wrong — wrong color, wrong size, wrong position, elements overlapping — the Elements tab tells you exactly which CSS rule is responsible and where it comes from.

---

Why First: The Button With the Wrong Color

You spent time picking the perfect color scheme for your CA portal. The primary action button should be a deep navy blue. It is showing up orange. You look at your code. The className seems right. You search for the color in your files. You cannot find where orange is coming from.

Open DevTools. Right-click the orange button. Click Inspect.

DevTools opens the Elements tab with that exact button's HTML highlighted. The Styles panel on the right shows every CSS rule applied to that button, in order of priority. You will see the orange color rule — and crucially, you will see which class is responsible, which file it came from, and whether your navy blue rule exists somewhere below it but is being overridden (it will be shown with a strikethrough).

The answer that took 20 minutes of guessing takes 20 seconds with the Elements tab.

---

The Excel Analogy

Think of the Elements tab like a cell in Excel where you can see every piece of formatting applied to it — the font, the fill color, the border, the number format — and exactly which formatting rule applied it (a conditional formatting rule, a cell style, a manual format).

Excel's Format Cells dialog shows you what formatting a cell has. But DevTools goes further — it shows you all the rules that could have applied AND which rule won (because of specificity), just like seeing all the conditional formatting rules for a cell and which one is currently active.

---

Navigating the HTML Tree

When you open the Elements tab, you see the full HTML structure of your page — every <div>, every <button>, every <p> tag — as a collapsible tree.

Expanding and collapsing: Click the arrow (▶) next to any element to expand it and see its children. Click again to collapse. This is exactly like expanding a folder tree in Windows Explorer.

The selected element: When you click an element in the tree, it highlights on the page (a blue outline appears around the corresponding part of the page). Conversely, when you hover over elements in the tree, they highlight on the page.

Finding elements quickly: Press Ctrl + F (Windows) or Cmd + F (Mac) while in the Elements tab to open a search box. Type a class name, element type, or text content to find it in the tree.

---

The Right-Click → Inspect Shortcut

You do not need to hunt through the HTML tree to find an element. There is a better way:

1. Right-click the element on the page that you want to inspect
2. Click Inspect (or Inspect Element)
3. DevTools opens and highlights that exact element in the HTML tree

This is by far the most common way to start an Elements investigation. See a UI problem → right-click it → Inspect → you're looking at its HTML and CSS immediately.

There is also a "Pick element" button in the DevTools toolbar — a small cursor icon (or Ctrl + Shift + C / Cmd + Shift + C). Click it, then hover over the page — elements will highlight as you hover. Click any element to select it in DevTools. Useful when right-clicking isn't convenient.

---

The Styles Panel: Reading CSS Rules

When an element is selected in the Elements tab, the right panel shows the Styles section. This is where the real work happens.

How the Styles Panel is Organized

The Styles panel shows CSS rules from highest priority to lowest. The rule that "wins" (actually determines the element's appearance) is at the top. Lower priority rules that were overridden appear below with a strikethrough on the overridden property.

Example of what you might see for a button:

This tells you: bg-orange-500 is winning over bg-navy-600. You have both classes on the button — probably accidentally. Remove bg-orange-500 from the button's className in your code.

Where Each Rule Comes From

After each CSS rule, you will see a reference like tailwind.css:1 or globals.css:47. This is the file and line number where this rule is defined. Click it to jump to that exact line in the Sources tab.

For Tailwind classes, the reference is usually tailwind.css:1 (all Tailwind utilities are in one generated file) — not very specific. But the class name itself (like bg-orange-500) tells you exactly which Tailwind class to remove from your component.

Filtering Styles

At the top of the Styles panel is a filter box. Type a property name like color or background to show only matching rules. Useful when the element has many styles and you're looking for something specific.

---

The Computed Styles Panel

The Computed panel (a tab next to Styles) shows the final calculated value of every CSS property for the selected element — after all rules have been applied and the cascade has resolved.

This is the ground truth. If you want to know the exact pixel size of an element, or the exact color that's rendering, or the exact font that's being used — check Computed.

Useful computed properties to check:

---

The Box Model Diagram

At the bottom of the Styles panel (or in the Computed tab), you will see a diagram of nested rectangles labeled margin, border, padding, and content. This is the Box Model.

Hover over each layer in the diagram and it highlights the corresponding space on the actual page. This makes it instantly clear where spacing is coming from.

The Excel analogy: This is like hovering over a cell in Excel and seeing that the "extra space" between rows is coming from row height, not cell padding — the distinction between where space lives matters when you need to adjust it.

Common use cases for the Box Model:

• Element has unexpected space around it → which layer is adding that space?
• Two elements have a gap between them you didn't expect → is it margin on one, or padding on another?
• Element is larger than expected → is the border contributing to the size?

---

Live CSS Editing in DevTools (Without Touching Your Code)

One of the most powerful features of the Elements tab: you can edit CSS directly in DevTools and see the change instantly on the page. The edit is temporary (it disappears on refresh) but it lets you experiment before committing to a code change.

Editing Existing Properties

In the Styles panel, click on any property value. It becomes editable. Type a new value and press Enter. The change is immediately visible on the page.

For example: click on background-color: rgb(249, 115, 22), change it to background-color: navy, press Enter. The button turns navy immediately.

Adding New Properties

Click on any rule block in the Styles panel. After the last property, there is an empty line. Click it and type a new CSS property:

Press Tab to move to the value, type the value, press Enter. The property is added live.

The Filter: element.style Rule

At the top of the Styles panel, there is always an element.style {} rule block. Any CSS you add here is applied as an inline style directly to the element. This has the highest specificity — it will override all other rules. Use it for quick experiments.

---

Inspecting Flexbox and Grid Layouts

For elements using Flexbox or CSS Grid, DevTools has visual overlays:

• Flexbox: When an element has display: flex, a small "flex" badge appears next to it in the Elements tree. Click the badge to toggle a flexbox overlay — colored lines show the flex axis and gaps.

• Grid: When an element has display: grid, a "grid" badge appears. Click it to toggle a grid overlay — the grid lines and areas are drawn on the page.

These overlays make it much easier to understand why your flex layout isn't aligning as expected.

---

The Force State Feature

Some CSS states only appear when you interact with an element — like :hover (when the mouse is over it) or :focus (when it's focused). These states are hard to inspect because they disappear the moment you move to DevTools.

Force a state permanently for inspection:

Use this to debug hover effects, focus rings, and active states.