You found the answer on a forum: three lines of CSS that will make your buttons rounder, or hide the tagline on phones. The post says “just add this to your site”. It does not say where, and the theme’s own files look like the obvious place.
They are not. When you add custom CSS in WordPress, it belongs in a box made for it, where theme updates cannot reach. Which box depends on your theme. Both are below, along with a few tweaks that are safe for an owner to make and some that cause trouble later.
Where to add custom CSS in WordPress
There are three proper homes for extra CSS, and one place to avoid.
- Additional CSS in the Customizer, for classic themes.
- Additional CSS in the Site Editor, for block themes.
- A child theme’s stylesheet, for large amounts of CSS that a developer maintains.
- Not the parent theme’s own
style.css. Edits there disappear at the next update.
Page builders such as Elementor also have custom CSS fields of their own. If a style only affects a builder layout, that is often a tidier place for it.
Classic themes: the Customizer box
- Go to Appearance → Customize.
- Open Additional CSS, usually the last item in the list.
- Paste your CSS. The preview on the right updates as you type, and the box flags obvious syntax errors.
- Check the preview on desktop and on the phone view, using the device icons at the bottom of the panel.
- Click Publish. Nothing is live until you do.
Block themes: Additional CSS in Styles
- Go to Appearance → Editor and choose Styles (on some versions, then the pencil icon).
- Find Additional CSS. Depending on your version it is an entry in the panel’s options menu, the three vertical dots beside the title, or listed in the panel itself.
- Paste your CSS and watch the preview.
- Click Save.
Recent versions also let you add CSS for one block type only. In the Styles panel, open Blocks, pick the block, and look for an Additional CSS section near the bottom of its settings. CSS written there applies only to that block type.
Finding the right selector
CSS needs to name the thing it changes, and themes name things differently. Copying a snippet written for another theme is the most common reason “it did nothing”.
- Open your site in Chrome, Edge or Firefox.
- Right-click the element you want to change and choose Inspect.
- The developer tools show the HTML for that element. Look at its
classnames. - Try your change in the Styles pane of the developer tools first. It is temporary and only you see it.
- When it looks right, copy the rule into your Additional CSS box.
Prefer short, readable class names. Long auto-generated names, such as the numbered classes some page builders add to each element, can change when the page is edited, and your CSS silently stops working.
Small, safe examples
These use class names WordPress itself or most themes provide. Check them with Inspect before relying on them.
Rounder corners on block buttons: .wp-block-button__link { border-radius: 6px; }
A little more space between lines of body text: body { line-height: 1.7; }
Hide the tagline on small screens (classic themes often use .site-description; block themes use .wp-block-site-tagline): @media (max-width: 600px) { .site-description { display: none; } }
Underline links inside paragraphs, which helps people who cannot easily tell link colours apart: p a { text-decoration: underline; }
Add a comment above each rule saying what it does and why, like /* rounder buttons, requested May */. Whoever looks at the box next, you included, will be grateful.
What to avoid
- Using CSS for jobs the settings already do. If the theme has a colour or font option, use it. CSS layered over settings leads to “I changed it and nothing happened”. Colours are better set through the palette, as our post on changing colours site-wide explains.
!importanton everything. It wins one fight and starts the next. Use it only when nothing else works, and note why.- Hiding things you should remove.
display: nonehides an element from view, but it still loads and is still in the page. To take something out, such as footer credits, remove it at the source; our guide to removing “Powered by WordPress” shows how. - Hiding text from visitors while leaving it for search engines. That is against Google’s spam policies and not worth the risk.
- Pasting large stylesheets from unknown sources. Big blocks of CSS you do not understand are hard to undo when one rule breaks the layout on a page you rarely visit.
When CSS belongs in a child theme instead
The Additional CSS box suits a few dozen lines. Once you have pages of it, or a developer wants it under version control alongside other code, move it into a child theme stylesheet. Our post on whether you need a child theme covers when that step is worth it.
Updates, theme changes and cache
CSS in either Additional CSS box is saved in the database, not in theme files, so theme updates do not remove it. It is, however, tied to the theme you added it under. Activate a different theme and that CSS stops applying, though it returns if you switch back. Keep a copy in a plain text file so nothing is lost if the theme changes.
Before a big edit, copy the whole box into that text file with the date at the top. The Customizer box gives you no history to browse. On a block theme the Styles revisions do include the CSS, but they bundle it with every other style change, so your own dated copy is still the quickest way back.
If a change looks right in the preview but not on the live site, clear your caching plugin and any host or CDN cache, then reload in a private window. Plugins that combine and minify CSS sometimes serve an old version until their cache is cleared.
The theme section of our complete WordPress guide covers the related settings, starting with the basics of what a theme controls.
Frequently asked questions
Can custom CSS break my website?
It can make pages look broken, but it cannot delete content, change settings or lock you out of the dashboard. A bad rule might hide a menu or squash a layout on phones. Removing or correcting the rule in the same box puts things back, which is why it helps to add one change at a time and check after each.
Can I add CSS that affects only one page?
Yes, with a more specific selector. Most themes add a class with the page’s ID to the body tag, such as page-id-42, which you can see with Inspect and put in front of your rule. Another way is to give one block its own class in the Additional CSS class(es) field under Advanced in the block settings, then target that class in your CSS.
Why does my CSS work on desktop but not on my phone?
Usually the theme has separate rules for small screens that are more specific than yours, so they win on a phone. Wrap your rule in a media query for small screens, or make the selector more specific. Inspect the element in your browser’s phone view to see which rule is taking priority.
How do I find CSS that someone else added?
Check both Additional CSS boxes first: the Customizer and, on a block theme, the Styles panel. Then check the active theme’s folder for a child theme stylesheet, any custom CSS fields in your page builder, and plugins that add CSS options. Inspecting an element in the browser also shows which stylesheet each rule comes from.
A stray rule that has broken a layout, with nobody sure where it lives, is a fault to trace rather than a design job. Our WordPress bug fixing service handles that kind of problem, at ₹1,499 per incident onwards.
Next in this series: Free vs Premium WordPress Theme: Is a Paid Theme Worth It?
