Debugging CSS with Browser DevTools

Debugging CSS with browser DevTools lets you see exactly which styles apply, why a rule is not working, and how boxes, Flexbox and Grid are laid out.

How to open and use the Elements panel

Every modern browser has DevTools, a set of tools for developers built into the browser. The examples here use Chrome or Edge, but Firefox and Safari have very similar tools.

To open it, right-click any part of the page and choose Inspect, or press F12 (Cmd+Option+I on Mac). The Elements panel shows the HTML on the left and the CSS for the selected element on the right, in the Styles pane.

In the Styles pane you can:

• See every rule that matches the element, with the file name and line number.
• See crossed-out declarations. A line through a property means another rule won and overrode it.
• See a warning icon or a grayed-out property when a declaration is invalid or has no effect.
• Click any value and type a new one. The page updates live, so you can experiment without touching your files.
• Untick the checkbox next to a declaration to switch it off and see what changes.
• Use the :hov button to force states like :hover or :focus, so you can style them without holding the mouse still.
• Use the .cls button to add or remove classes on the element.

Note: Changes in DevTools are temporary. When you reload the page, they disappear. Copy the working values into your CSS file once you are happy.

The Computed tab and the box model panel

The Styles pane shows all the rules. The Computed tab shows the final result: the one value for each property that the browser actually uses. Click the little arrow next to a property to see which rule set it.

At the top of the Computed tab is the box model diagram. It shows the content size in the middle, then padding, border and margin around it, with exact pixel numbers. When you hover each layer, the browser highlights it on the page: content in blue, padding in green, margin in orange.

This is the fastest way to answer questions like "Where does this extra space come from?" Very often the answer is a margin you forgot about, for example the default margin on an <h1> or <p>.

Flexbox and Grid overlays in DevTools

In the Elements panel, elements with display: flex or display: grid have a small flex or grid badge next to them. Click the badge to show an overlay on the page.

• The grid overlay draws the grid lines, line numbers, track sizes and gaps. You can also show area names.
• The flex overlay shows the container, the items and the free space between them.

There is also a small icon next to display: flex in the Styles pane. It opens an editor where you can click to try justify-content and align-items values visually. The Layout tab lists every grid and flex container on the page, so you can turn several overlays on at once.

The outline debug trick

Sometimes you cannot tell where one box ends and another begins, or something is causing a horizontal scrollbar. Add this rule for a moment:

* {
  outline: 1px solid red;
}

Every element on the page now has a thin red line around it. We use outline instead of border because outlines do not take up space, so the layout does not change while you debug. You can quickly spot the element that is wider than the screen.

A slightly fancier version gives each nesting level a different color:

* { outline: 1px solid rgb(255 0 0 / 0.6); }
* * { outline-color: rgb(0 128 0 / 0.6); }
* * * { outline-color: rgb(0 0 255 / 0.6); }
* * * * { outline-color: rgb(255 165 0 / 0.6); }

Now parents and children are easy to tell apart. Remember to delete these rules when you are done.

Tip: To find the element causing a horizontal scrollbar, also try overflow-x: hidden on suspicious sections one by one in DevTools. When the scrollbar disappears, you found the area. Then fix the real cause, often a fixed width or a long word, instead of hiding it.

Why is my CSS not working? A debugging checklist

When a style does not apply, go through this list in order:

1. Is the CSS file loaded? Check the Network tab or look for your file name in the Styles pane. A wrong path in <link href> is very common.
2. Does the selector match? Select the element. If your rule is not listed at all, the selector is wrong. Check spelling, the . for classes and the # for IDs.
3. Is it crossed out? Then another rule wins. Compare specificity and order, or check if it is inside a cascade layer that loses.
4. Is there a typo or invalid value? DevTools shows a warning icon. A missing semicolon can break the next line too.
5. Does the property need something else? z-index needs a position or a flex/grid item, top needs position, width does nothing on an inline <span>, and gap needs flex or grid.
6. Is a media or container query active? Check that your screen width really matches the condition.
7. Is the browser showing an old version? Do a hard reload with Ctrl+Shift+R (Cmd+Shift+R on Mac) to clear the cache.

Common mistake: Adding !important to "fix" a style before understanding why it lost. It works for a moment, but the next change becomes even harder. Find the winning rule in DevTools first.

Practice exercise

Open any website you like and inspect its main heading. Find which rule sets its font-size, change the color live, look at its box model, and turn on the grid or flex overlay of its parent if it has one. Then add the outline trick to one of your own pages.

Hint: In the Styles pane, the rules at the top are the most important ones. Rules lower down with crossed-out lines lost the cascade.

Key takeaways

• Right-click and choose Inspect to open DevTools and see an element's styles.
• Crossed-out declarations were overridden; the Computed tab shows the final values.
• The box model diagram explains unexpected spacing.
• Flex and grid badges show overlays that make layouts visible.
• * { outline: 1px solid red; } and a step-by-step checklist solve most CSS bugs.