Inspect Element: How to Use It Without Knowing CSS
The first time I opened Inspect Element on a live site I was managing, I groaned. Not quietly. There was this panel full of text and crossed-out lines and values I didn’t recognize, and somewhere in there was the answer to why a section wouldn’t sit where I needed it to sit. I could not find it. I didn’t know what I was looking at well enough to know where to start.
That was not the last time I groaned at it. It was just the first.
If you’ve ever right-clicked on something that looked wrong on your site and chosen “Inspect” because someone told you to, and then stared at the panel that opened and thought: what am I actually looking at, this post is for you. Not because I’m going to make it sound easy. It is not easy. But I can tell you what it’s actually doing, what it can and can’t tell you, and what to do when it stops being helpful, which it will.
How to open Inspect Element in Chrome
There are 3 ways, and they all open the same panel:
- Right-click on any element on the page and choose Inspect from the menu that appears.
- Press F12 on Windows or Linux, or Cmd + Option + I on a Mac.
- Go to Chrome’s menu (the three dots in the top right), then More Tools, then Developer Tools.
The panel that opens is called DevTools. It has a lot of tabs across the top. The one you want is Elements, which is usually the default. On the left side you’ll see the HTML structure of your page. On the right side, under Styles, you’ll see CSS rules.
That Styles panel is the part everyone sends you to. It’s also the part that looks like a mess if you don’t know what CSS is.
What you’re actually looking at in the Styles panel
CSS is how browsers style websites. It’s a set of rules: this element should be this color, this size, this position. Every element on your page has CSS rules applied to it, sometimes dozens of them, coming from your theme, your page builder, plugins you’ve installed, and the browser itself.
When you click on an element in the Elements tab, the Styles panel shows you every CSS rule that applies to it. Some of those rules are crossed out. That’s where it gets confusing.
A crossed-out rule doesn’t mean the rule is broken. It means the rule lost. Something else, with higher priority, is overriding it. The browser decided that another rule should win, and struck through the one that didn’t.
This is the thing nobody tells you at the start: Inspect Element isn’t showing you what your site looks like. It’s showing you the result of a competition between dozens of rules, and it’s only partially showing you who won and why.
How to use Inspect Element to edit CSS
This is where it gets frustrating, and I want to be honest about that up front.
You can click on any CSS value in the Styles panel and edit it. The change shows up on your page immediately. You can change a color, adjust a margin, try moving something 40px to the right. The page updates in real time. It looks like it worked.
But those changes are not live. They exist only in your browser, for this session, for you. The moment you refresh the page, they’re gone. Nobody else ever saw them. Your actual site wasn’t touched.
To make a change real, you have to take what you found in Inspect Element and apply it somewhere it actually loads: your theme’s stylesheet, a Custom CSS field in WordPress, Shopify’s theme code, Squarespace’s Custom CSS panel, whatever your platform uses. Then you save it, reload, and hope it sticks.
I say hope because here’s what I ran into, and what a lot of people run into: it doesn’t always stick. You add the CSS. You save it. You clear the cache. You refresh. Nothing changes. What the hell?
What happened is that the rule you added is losing the same competition. Something else still has higher priority. Inspect Element showed you one rule that was applied to the element, but it didn’t make clear that 6 other rules were also applied, and one of them is winning over everything you’re trying to do.
Can you permanently change a website with Inspect Element?
Not directly, no. Inspect Element lets you experiment. It’s a scratchpad that resets on every page load. To make permanent changes, you have to apply your CSS through your site’s actual stylesheet or Custom CSS area, and that’s a separate step with its own complications.
There’s also the platform problem. On WordPress, custom CSS goes in one place. On Shopify, it’s another. On Squarespace it’s another still, and the generated CSS that Squarespace applies to your elements can be specific enough that your custom rule loses anyway. Inspect Element can help you find the right rule to override, but it won’t tell you where to put the override or what priority level you need to beat.
What Inspect Element is actually useful for
I don’t want to make it sound completely useless, because it’s not. There are specific things it tells you reliably and well.
Hex codes: if you need to know the exact color of something on your page, Inspect Element will give you the six-character code. That’s genuinely useful.
Pixel values: padding, margins, font sizes. If you need to match spacing to something that already exists, you can find the numbers here.
Element names: every element on your page has a class name or an ID, and finding that name is how you target it with CSS. Inspect Element will tell you what it’s called. That’s often the first step in writing a CSS override that actually points at the right thing.
What it won’t tell you clearly is which of the many rules fighting over an element is the actual problem. It’ll show you the crossed-out lines, but identifying the specific winning rule and where it’s coming from, a theme file, a plugin, a page builder’s generated code, an inline style injected by JavaScript, requires you to read and understand what you’re seeing in a way that takes real experience to develop.
When Inspect Element stops being enough
There’s a moment most people hit where Inspect Element has shown them something, they’ve tried to act on it, and it hasn’t worked. The element still looks wrong. The rule they added isn’t taking effect. The crossed-out lines are multiplying.
I hit that moment many times. I’d identify what looked like the right rule in the Styles panel, copy the CSS, add it to my site, and nothing would change. I cleared the cache. Refreshed. Still nothing. Eventually I understood that I was trying to override a rule with something that had lower priority, and I had no clear way to know that from what Inspect Element was showing me.
That’s the honest ceiling of the tool: it’s built for people who already know how to read it. For everyone else, it gives you partial information in a format that assumes you understand the rest.
At the point where Inspect Element is showing you something but you can’t translate it into an action that works, Loupely Lens is what I built instead: you click on the element that looks wrong, and Lens reads the full CSS cascade and tells you in two sentences what’s causing it and where it came from, without requiring you to interpret the panel yourself.
A note on whether Inspect Element is legal to use
Yes. Inspect Element is a browser feature that shows you information your browser already has. You’re not accessing anything the browser wasn’t already processing to render the page you’re viewing. You can use it on any site. You can use it to understand your own site’s CSS, to compare it to a competitor’s layout, or to diagnose something that looks wrong. You cannot use it to extract content that requires a login, to scrape data at scale, or to modify anyone else’s live site. But opening it, reading it, using it to understand what’s happening on a page you’re looking at: that’s exactly what it’s for.
The one thing I want you to know that nobody told me
Inspect Element is a genuinely difficult tool to use unless you’re a seasoned designer or developer. Articles about it often make it sound like you just open it, see the problem, and fix it. That’s not what happens for most people who manage their own sites and don’t come from a technical background.
The reason it feels hard isn’t that you’re missing something other people have. It’s that the tool was built for a different audience than you, and nobody translated it. The information is there. What’s missing is something that makes it readable.
That’s what I kept running into. That’s why I built what I built. And if you want to keep using Inspect Element, the posts below will help you understand the specific things it’s most likely to show you when something looks wrong on your site:
