How to find which css is being applied to an element.

[Support]

When customizing a template — adjusting colors, fonts, spacing, or fixing an override — you first need to know which CSS rule is responsible for what you’re seeing. Browser developer tools make this instant: click any element and see every CSS rule applied to it, where it comes from, and which rules are being overridden.

---

Opening the Element Inspector

Every major browser has built-in developer tools with a CSS inspector. The fastest way to open it is to right-click directly on the element you want to inspect.

Chrome, Edge, and Firefox

Method A — Right-click on the element (recommended)

Right-click on any element on the page → select Inspect (Chrome/Edge) or Inspect Element (Firefox).

The developer tools will open with that element already selected in the Elements panel (called Inspector in Firefox).

Method B — Keyboard shortcut

Press F12 to open DevTools, then click the element picker icon (✥ top-left of the panel) and click on any element on the page. This lets you pinpoint exactly what you want to inspect without right-clicking.

Method C — Safari

Enable developer tools first: Safari → Settings → Advanced → check “Show features for web developers”. Then right-click any element → Inspect Element.

---

Reading the Styles Panel

Once an element is selected in the Elements panel, look at the Styles pane on the right side. This shows every CSS rule currently applied to that element, in order of priority.

The video below walks through a real example — inspecting a featured-box-icon element that has styles coming from two different files:

In this example, you can see that featured-box-icon is defined in two separate files:

• blue.css — sets the color
• theme-elements.css (line 950) — sets the base layout and sizing

This is completely normal. Templates typically split styles across multiple files: a base stylesheet for structure and separate skin/color files for theming.

What you’ll see in the Styles pane

• CSS file name and line number — shown in gray next to each rule (e.g. theme-elements.css:950). Click it to jump directly to that line in the Sources tab.
• Crossed-out rules — a strikethrough means that rule is being overridden by a more specific rule listed above it. This is one of the most useful things to spot when debugging style issues.
• Inherited styles — shown in a separate section at the bottom, these are styles the element inherits from its parent (font, color, line-height, etc.).
• User agent stylesheet — these are the browser’s own default styles. They appear at the very bottom and are almost always overridden by the template’s CSS.

The Computed tab

Next to the Styles tab, the Computed tab shows the final calculated value of every CSS property after all rules have been applied. This is what the browser actually uses to render the element. It’s especially useful for checking the real pixel values of padding, margin, width, and height.

---

Testing Changes Directly in the Browser

You can edit CSS live in the Styles pane without touching any files — useful for testing a change before committing it.

Edit an existing value

Click on any value in the Styles pane (e.g. the color hex code or a pixel value) and type a new one. The page updates instantly.

Disable a rule temporarily

Hover over any rule in the Styles pane and uncheck the checkbox that appears. This toggles the rule off so you can see the effect without it.

Add a new property

Click at the end of any rule block in the Styles pane and start typing a new CSS property. This lets you test new values on the fly.

⚠ Note: These changes are temporary and only exist in your browser. Refreshing the page resets everything. Once you find the values you want, apply them to the actual CSS file in your template.

---

Tips

• Can’t find the right element? Use the element picker (✥) and hover over the page — the panel highlights the matching HTML as you move your cursor.
• Styles not applying? Look for crossed-out rules. The active rule (the one that wins) is always at the top of the Styles pane. You may need to add a more specific selector or use the same file that’s currently winning.
• Not sure which file to edit? Click the file:line link next to the rule in the Styles pane. It opens that exact location in the Sources tab, where you can see the full context of the rule.
• Working with a skin/color file? Changes to colors are usually in a separate file (e.g. blue.css, skin.css, or a color-scheme file). The Styles pane will tell you exactly which file is setting each color.

---

[Author]

Posts