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 on a page without affecting anything else on the site.

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.

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)

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.

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 the same widget type elsewhere on the page.

Method 3: WordPress Additional CSS (Best for Site-Wide Overrides)

For changes that need to apply across your entire site rather than one specific element:

1. Go to Appearance > Customize in your WordPress dashboard.
2. Click Additional CSS at the bottom of the left panel.
3. Enter your CSS using the class names you found via DevTools. For example: .elementor-widget-heading h2 { color: #333; }
4. Click Publish to apply the change to the live site.

This approach is best for overriding Elementor defaults that affect multiple pages, such as default widget font sizes or heading colors. Use DevTools first to confirm you have the correct class name before adding it here.