How to Edit CSS in WordPress: 5 Safe Ways to Add Custom CSS

The safest way to edit CSS in WordPress is to add your own rules on top of the theme’s styles instead of changing the theme’s files. Depending on your theme, use Appearance → Customize → Additional CSS (classic themes), Appearance → Editor → Styles → Additional CSS (block themes), your theme’s own custom CSS option, a child theme’s style.css, or a code snippets plugin. All five survive theme updates. Editing the parent theme’s style.css does not.

Below we explain each method, how to find the right CSS selector, and the common reasons a CSS change doesn’t show up.

Step 1: Find the CSS you need to change

Before writing CSS, find out which element you are styling and which rule currently controls it:

1. Open the page in Chrome, Firefox, Safari or Edge, right-click the element and choose Inspect.
2. The developer tools highlight the HTML element and show its CSS rules on the right, including the file each rule comes from.
3. Edit values right there to preview the change. Nothing is saved; it is a safe sandbox.
4. When it looks right, copy the selector and the properties you changed into one of the places below.

Tip: prefer specific classes (for example .single-product .price) over long chains of tags, and use the device toolbar in developer tools to check the phone layout.

5 safe ways to add custom CSS in WordPress

1. Additional CSS in the Customizer (classic themes)

Go to Appearance → Customize → Additional CSS, paste your CSS and watch the live preview on the right. Click Publish to save. The CSS is stored in the database for the active theme, so it survives theme updates. It is the easiest option for small changes.

2. Additional CSS in the Site Editor (block themes)

Block themes such as Twenty Twenty-Five don’t use the Customizer. Go to Appearance → Editor → Styles, open the menu (three dots) and choose Additional CSS. Many changes, such as colors, fonts and spacing, can be made in the Styles panel without CSS at all, so check there first.

3. Your theme’s custom CSS option

Many premium themes have their own field for custom CSS, often with separate boxes for different screen sizes. In XStore, go to XStore → Theme Options → Theme Custom CSS. It has five boxes: Global CSS (all devices), Laptop CSS, Tablet CSS, Mobile Landscape CSS and Mobile CSS, so you don’t need to write media queries yourself. This is the place XStore’s documentation recommends for custom CSS.

4. A child theme’s style.css

For larger amounts of CSS, or if you prefer working in files, put it in a child theme’s style.css. A child theme inherits everything from the parent theme, and parent updates never overwrite it. Many premium themes include a ready child theme (XStore ships XStore-child). Edit the file over SFTP or in your code editor rather than in the built-in Theme File Editor on a live site, because a typo there can break the site with no easy undo. Our guide on updating a theme without losing customizations explains child themes step by step.

5. A code snippets plugin

Plugins such as WPCode (3,000,000+ active installations on WordPress.org) or Simple Custom CSS and JS (600,000+) let you manage CSS (and JavaScript) as named snippets that you can switch on and off, independent of the theme. Useful if you change themes often or want to keep site-wide tweaks separate from design.

Which method should you use?

Whatever you choose, keep custom CSS in one place where possible. Rules scattered across the Customizer, theme options and a plugin are hard to find later and can override each other.

What not to do

• Don’t edit the parent theme’s style.css. The next theme update replaces the file and your changes disappear.
• Don’t edit plugin CSS files. Plugin updates overwrite them too. Override plugin styles from one of the five places above.
• Don’t use the Theme File Editor on a live store without a backup and a way to access the files if something breaks.
• Don’t solve everything with !important. Use a more specific selector first; !important makes future changes harder.

Useful examples

Change the color of buttons across a WooCommerce store:

.woocommerce a.button,
.woocommerce button.button {
    background-color: #1f6feb;
    color: #ffffff;
}

Make product titles larger on phones only:

@media (max-width: 767px) {
    .woocommerce-loop-product__title {
        font-size: 16px;
        line-height: 1.3;
    }
}

Hide an element (use with care, since hidden content is still loaded):

.single-product .product_meta .tagged_as {
    display: none;
}

Class names differ between themes, so always check them with Inspect first.

Why your CSS change isn’t showing

• Caching. Clear your caching plugin, server cache and CDN, then reload with a hard refresh. Optimization plugins that combine or “remove unused CSS” may need their cache regenerated.
• Specificity. The theme’s rule is more specific than yours. Copy the selector shown in developer tools and make yours at least as specific.
• Wrong place or wrong theme. Customizer CSS belongs to the active theme; if you switched to a child theme, check that the CSS moved with you.
• A typo. A missing brace or semicolon can break every rule after it. Developer tools show invalid properties crossed out.

Keep CSS light for speed

A few dozen lines of custom CSS won’t slow anything down, but hundreds of overrides fighting the theme usually mean the theme is a poor fit for the design you want. Check your pages with the free FlashMax speed test after big style changes. If you need extensive design changes, our team also offers customization services.

FAQ

Where is custom CSS stored in WordPress?

Additional CSS from the Customizer is stored in the database for the active theme, so theme updates don’t remove it. CSS in a child theme lives in that theme’s style.css file.

Will I lose my custom CSS when I update my theme?

Not if you added it via Additional CSS, a theme’s custom CSS option, a child theme or a plugin. You will lose CSS written directly into the parent theme’s files.

How do I add CSS to a single page?

Use the page’s unique body class (for example .page-id-42, visible with Inspect) at the start of your selector, so the rule only applies to that page.

Where is Additional CSS in a block theme?

In Appearance → Editor → Styles, open the three-dot menu and choose Additional CSS.

Can I edit CSS without a plugin?

Yes. The Customizer or Site Editor’s Additional CSS, your theme’s custom CSS option and a child theme all work without a plugin.