How to View the CSS of an Elementor Page

CSS (Cascading Style Sheets) is the code that controls how HTML elements look on screen. In an Elementor page, every widget, section, and column has CSS applied to it, either from Elementor’s own stylesheet, your theme’s stylesheet, or custom rules you have added yourself.

Elementor generates its own CSS classes for every element it creates. A heading widget gets a class like elementor-widget-heading, while each specific widget instance also receives a unique class like elementor-element-abc1234 based on its internal ID. Understanding this structure is what makes it possible to target a specific element without affecting anything else on the site.

Elementor stores its generated CSS in wp-content/uploads/elementor/css/ as individual files per page and per post. When you view an Elementor page in a browser, that file is loaded alongside your theme’s stylesheet. This is why inspecting with DevTools shows CSS from multiple sources Elementor, your theme, and any custom rules you have added all layer on top of each other.

When you “view the CSS” of an Elementor page, you are looking for these class names so you can identify what styles are already applied and write custom rules that override or extend them precisely.

The advantage of CSS over inline Elementor settings is scope and specificity. Elementor’s own style controls (color pickers, spacing sliders) are convenient for common changes, but CSS lets you target hover states, apply rules conditionally by viewport size, and make changes that go beyond what Elementor’s interface exposes.

The most common reasons to inspect an Elementor page’s CSS include:

• Fixing an element that does not look right , the font is too large on mobile, a button has unexpected padding, or a spacing value does not match your design. Inspecting the live CSS shows you exactly which rule is causing the issue.
• Overriding Elementor’s default styles , Elementor applies its own default values, and sometimes you need to see what it has already set before you can write a clean override that does not conflict.
• Copying a style from one element to another , if a section looks exactly right on one page and you want to recreate it elsewhere, inspecting the CSS gives you the exact values to replicate.
• Resolving conflicts between Elementor and your theme , when theme styles and Elementor styles clash, identifying which rule is winning requires viewing the live CSS output to see which stylesheet has higher specificity.
• Writing a custom CSS class , before you add custom CSS in Elementor’s Advanced tab, you need to know which class name to target. DevTools shows you the exact class in use.
• Understanding what changed after an Elementor update , plugin updates can change class names or default values. Inspecting the CSS helps you identify what shifted and adjust your custom rules accordingly.

Method 1: Browser Developer Tools (Best for Inspecting Any Element)

This method works in Chrome, Firefox, Edge, and Safari. It gives you live inspection of any element on the page and requires no Elementor Pro.

1. Right-click on the element you want to inspect on the live page or inside Elementor’s preview.
2. Click Inspect in Chrome or Edge, or Inspect Element in Firefox or Safari.
3. The DevTools panel opens. The Elements tab shows the HTML structure. The Styles pane on the right shows all CSS rules applied to the selected element, listed from most specific to least specific.
4. You can see which stylesheet each rule comes from: Elementor’s auto-generated CSS, your theme’s CSS, or any custom rules you added.
5. To test a change, click on any value in the Styles pane and edit it. The change shows on screen instantly but resets when you refresh the page.

The class names you find here, such as .elementor-element-abc1234 or .elementor-widget-heading, are what you copy when writing custom CSS to target that specific element.

Method 2: Elementor’s Custom CSS Panel (Best for Element-Specific Changes Pro Only)

Elementor Pro includes a built-in Custom CSS panel for every widget, column, and section. This scopes any CSS you add to that element only. This feature requires Elementor Pro it is not available in the free version.

1. Open the page in the Elementor editor.
2. Click on the widget, column, or section you want to inspect or customize.
3. In the left settings panel, click the Advanced tab.
4. Scroll down to find the Custom CSS box.
5. Elementor uses the placeholder selector to represent the element’s auto-generated class. For example, to change the font size of an H2 inside that widget: selector h2 { font-size: 28px; }

Any CSS here applies only to that specific widget or section instance, so it will not accidentally affect anything else on the site.

Method 3: WordPress Additional CSS (Global, Free)

For site-wide CSS that applies to every page, use WordPress’s built-in Additional CSS area:

1. Go to Appearance > Customize.
2. Click Additional CSS at the bottom of the Customizer sidebar.
3. Enter your CSS rules. These apply to every page on the site.

This is the right place for overrides that need to apply globally, such as changing your default heading font across all Elementor pages. For changes scoped to a single page or element, use Method 1 to find the selector, then Method 2 (Pro) to keep it contained to that element.

Method 4: Elementor Site Settings CSS (Global, Elementor Pro)

Elementor Pro includes a separate Global CSS area inside Elementor itself, separate from WordPress’s Additional CSS:

1. In the Elementor editor, click the hamburger menu (three lines) in the top-left corner.
2. Go to Site Settings.
3. Click Custom CSS in the Site Settings panel.
4. Add your CSS rules here.

CSS added here is managed by Elementor and injected into the page head separately from WordPress Additional CSS. If you are troubleshooting a style override and cannot see where it is coming from, check both locations.

Why Your CSS Override Might Not Be Working (Specificity)

Elementor generates highly specific CSS selectors, which is the most common reason a custom rule appears to have no effect. When two rules target the same element, the more specific one wins. Elementor’s auto-generated selectors like #elementor-post-12345 .elementor-element-abc1234 h2 are more specific than a simple h2 rule.

To fix a specificity conflict:

• Use DevTools to find the exact class name Elementor assigned to the element, such as .elementor-element-abc1234, then include it in your CSS: .elementor-element-abc1234 h2 { font-size: 28px; }
• If the Elementor rule uses !important, you may need to as well though use it as a last resort since it makes future overrides harder.
• As a quick test, add !important temporarily. If the style applies, specificity is the issue and a more targeted selector is the real fix.