# 6 places to add custom CSS in WordPress that survive updates There are 6 places to add custom CSS in WordPress that survive theme updates, and finding the right one for your theme takes about 2 minutes: | Your setup | Where the CSS goes | | --- | --- | | Block theme, whole site | Appearance → Editor → Styles → ⋮ → Additional CSS | | Block theme, one block type | Styles → Blocks → the block → Additional block CSS | | One block on one page | The block's Advanced section → Additional CSS | | Classic theme | Appearance → Customize → Additional CSS | | A lot of CSS | A child theme's `style.css` | | Elementor | Advanced tab → Custom CSS, or Site Settings → Custom CSS | But there's one place you shouldn't put it: the theme's own `style.css`. **Anything you add to a theme's own files is overwritten the next time that theme updates.** Five of the six store your CSS in the database, and the child theme keeps it in its own folder that the parent's update never touches, so none of them has that problem. ## Block themes: Additional CSS in Styles The Site Editor has had a site-wide CSS box since WordPress 6.2. 1. In wp-admin, go to Appearance → Editor and open Styles. 2. Click the ⋮ menu in the Styles header and choose Additional CSS. It moved into that menu in WordPress 6.9, which is why older tutorials can't find it. 3. Paste your CSS and save. For example, this rounds every button on a block theme: ```css .wp-element-button { border-radius: 999px; } ``` So why not do everything here? The WordPress docs recommend trying the regular Styles controls first, since color, font and spacing need no code there (the [text color guide](/guides/change-text-color-in-wordpress) shows how). Save CSS for what those controls can't do. ## Block themes: CSS for one block type When the CSS is only for one kind of block, say every Quote, put it on that block type. 1. In Styles, click Blocks and choose the block. 2. Open Additional block CSS. 3. Write the property and value only, no selector or braces: `font-style: italic;` WordPress wraps it in the block's selector for you. Hover states and nested elements are the exception: those need braces, like `:hover { background: #bb00bb; }`, and `&` targets a nested element the way it does in Sass. ## One block on one page Recent WordPress versions also give individual blocks their own Additional CSS field. 1. Select the block in the editor. 2. In the block's settings, expand Advanced. 3. Find Additional CSS and add property and value pairs, like `color: red;`. The field only shows for users with the `edit_css` capability, which on a normal single site means administrators. It's the cleanest way to [hide a page title](/guides/hide-page-title-in-wordpress) or tweak one hero section without a site-wide rule. ## Classic themes: the Customizer 1. Go to Appearance → Customize. 2. Click Additional CSS, near the bottom of the list. 3. Type your CSS and watch the preview on the right update. 4. Click Publish. If Additional CSS isn't in the list, check which kind of theme you're on. Block themes hide the Customizer unless a plugin needs it. ## A child theme, for a lot of CSS Once your CSS runs to hundreds of lines, a text box stops being a nice place to keep it. A child theme inherits everything from its parent and keeps its own `style.css` in its own folder, so the parent can update freely. The WordPress developer handbook walks through setting one up. It's more work than the boxes above, so it's only worth it when the CSS is big enough that you want it in version control. ## Elementor For one element, select it, open the Advanced tab and expand Custom CSS. For the whole site, open the menu at the top left of the Elementor panel, choose Site Settings, then the Custom CSS tab. Elementor's docs say Custom CSS isn't on its Essential plan, and they describe site-wide CSS as a Pro feature, so the free plugin shows neither field. ## Or ask your assistant CSS has a habit of hitting more than you meant. A rule for "the header buttons" catches the footer buttons too, and you find out from a client. With [Kitepod](/wordpress-mcp) connected, you can describe the change and let Claude or ChatGPT write the selector: ```prompt Add custom CSS so the buttons in my site header are fully rounded and the header gets a 1px light gray bottom border. Don't change any other buttons. ``` Custom CSS is a design change in Kitepod, so it's staged on a preview link you can open, or send to whoever has to sign off, and nothing goes live until you publish it. After it does, Kitepod screenshots the page before and after, which is the quickest way to spot a rule that reached further than the header. On Elementor sites it can also regenerate Elementor's CSS cache, so the change shows up on the first reload. ## What goes wrong When CSS doesn't do what you expect, check these in order: 1. Is it saved and published? The Customizer needs Publish, and the Site Editor needs Save. Closing the tab loses it. 2. Is a cache serving the old stylesheet? Purge it at every layer you've got (plugin, host, CDN), then hard-reload. 3. Is the theme's selector more specific than yours? Right-click the element, choose Inspect, and match the selector the theme uses. Use `!important` only as a last resort. 4. Is there a syntax error? A missing `}` can break every rule after it. Paste the CSS into a validator to find the line. 5. Did you switch themes? CSS added in Styles is cleared when you change themes, and Customizer CSS stays with the theme it was added to. Copy it somewhere before you switch. ## Finer points ### Where is Additional CSS in WordPress 6.9 and later? In the Site Editor, under Appearance → Editor → Styles, in the ⋮ menu in the Styles header. ### Will theme updates delete my custom CSS? Not if you added it through Styles, the Customizer, a block's Additional CSS field or a child theme. Only CSS written into the theme's own files gets overwritten. ### Does custom CSS slow down my site? A few dozen lines won't make a measurable difference. The box CSS is printed into each page, so if you've got thousands of lines, a child theme stylesheet that browsers can cache is the better home. ### Can I add CSS to just one page? Yes. Use the Additional CSS field in a block's Advanced section, or give a block a class under Advanced → Additional CSS class(es) and target that class from your site-wide CSS. ### Do I need a plugin to add custom CSS? No. WordPress has Additional CSS built in, in the Customizer for classic themes and in Styles for block themes since 6.2. ### Why is the Additional CSS field missing for some users? It needs the `edit_css` capability. On a single site that's administrators; editors and authors won't see it.