Where to put custom CSS in Elementor and WordPress: a decision guide

The right place for custom CSS depends on how widely it should apply. CSS for one widget belongs in that widget's Custom CSS box. CSS for one page belongs in the page's Custom CSS. CSS used across the whole site belongs in Elementor's Site Settings, the WordPress Additional CSS panel, or, best of all for anything substantial, a child theme stylesheet. The golden rule is to keep each rule as close as possible to what it styles, and to keep site-wide CSS in one place you can find again. Below is a decision guide for each option.

The options at a glance

Feature availability changes between Elementor versions. Historically the Custom CSS boxes have been a Pro feature, so if you are on the free version and do not see them, use one of the WordPress-level options instead.

Option 1: the widget's Custom CSS box

Select any widget or container, open the Advanced tab and look for Custom CSS. Here you can use the keyword selector to mean "this element", and Elementor swaps it for a unique class.

selector .elementor-button {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    selector .elementor-button {
        width: 100%;
    }
}

Use it when: the style truly belongs to one element and nowhere else.

Avoid it when: you find yourself copying the same CSS into several widgets. That is a sign it should be a reusable class in a site-wide location. CSS scattered across dozens of widgets is very hard to find six months later.

Option 2: page-level Custom CSS

Open the page settings (the cog icon in the editor) and find the Custom CSS section under Advanced. Here, selector refers to the page wrapper.

Use it when: several elements on one landing page share a special style, such as a campaign colour, and you do not want it to load anywhere else.

Avoid it when: the same style appears on other pages too. If you later duplicate the page, the CSS travels with it, which is handy, but it also means multiple copies to update.

Option 3: Elementor Site Settings Custom CSS

In the editor, open Site Settings from the menu, then Custom CSS. This loads on every page built with Elementor.

Use it when: you have a modest amount of site-wide CSS on an Elementor Pro site and you want it next to your global colours and fonts.

Avoid it when: the CSS is long, or other developers need to review it. It lives in the database, so there is no file history and no easy way to compare changes.

Option 4: WordPress Customizer Additional CSS

In the dashboard, go to Appearance, then Customize, then Additional CSS. This works on classic themes, including Hello Elementor, with or without Elementor Pro. Block themes handle custom CSS through the Site Editor's styles instead, so the menu may look different there.

Use it when: you are on Elementor free and need a quick site-wide fix, or the CSS targets something outside Elementor such as a plugin's output.

Watch out for: Additional CSS is stored per theme. If you switch themes, it does not come with you.

Option 5: a child theme stylesheet

For anything more than a handful of rules, this is where I put CSS in my client work. A child theme sits on top of your main theme, survives theme updates, and gives you a real file you can edit in a proper code editor, back up and keep in version control.

The child theme's style.css needs a header, and its functions.php should enqueue the stylesheet:

/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
*/

.btn-pill {
    border-radius: 999px;
}

<?php
function b2c_child_styles() {
    wp_enqueue_style(
        'b2c-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'b2c_child_styles', 20 );

The Template line must match the parent theme's folder name exactly. The version number is used for cache busting, so increase it when you change the CSS and visitors get the new file. Depending on your parent theme, you may also need to enqueue the parent stylesheet; check the parent theme's documentation.

Use it when: CSS is long-lived, shared across the site, or edited by more than one person.

Option 6: a small custom plugin

If the CSS belongs to a feature rather than the design, such as styling the output of a custom booking form, put it in the plugin that provides that feature. Then the styles go wherever the feature goes, regardless of theme.

Making classes reusable

Whichever site-wide location you choose, pair it with Elementor's CSS Classes field (Advanced tab, available in the free version). Write a rule once, for example .btn-pill, then type btn-pill into the CSS Classes field of any button that needs it. No duplicated CSS, and you can see in the editor which elements use the class.

Newer Elementor releases have been moving towards class-based styling inside the editor itself, so check what your version offers before writing CSS by hand. Global colours and global fonts in Site Settings should also be your first stop for anything those can handle, as they update everywhere in one click.

The decision guide

1. Can a built-in setting do it? Use Elementor's controls, global colours or global fonts first. No CSS needed.
2. Is it for one element only? Widget Custom CSS.
3. Is it for one page only? Page Settings Custom CSS.
4. Is it a few site-wide lines? Site Settings Custom CSS on Pro, or Additional CSS on free.
5. Is it a lot of CSS, or will others work on it? Child theme stylesheet.
6. Is it part of a feature? The plugin that provides the feature.

When your CSS does not work

• Specificity. Elementor's own rules often use several classes, so a single class from you may lose. Inspect the element in your browser's developer tools to see which rule wins, then match or slightly exceed its specificity. Use !important only as a last resort.
• Load order. When two rules are equally specific, the one loaded later wins.
• Caching. Clear your caching plugin and CDN, and use Elementor's Regenerate CSS tool if Elementor's generated files look stale.
• Typos. A missing closing brace can silently break every rule after it.

Pick one main home for site-wide CSS and write it down in your site notes, so you, a colleague or a future developer know where to look. If you want to get confident reading and writing the CSS itself, the HTML and CSS for Elementor course covers selectors, specificity and responsive rules in depth.