To add custom CSS in WordPress, open Appearance > Customize > Additional CSS (classic themes) or Appearance > Editor > Styles > ⋮ > Additional CSS (block themes), paste your rules and publish. That is the right home for a few dozen lines. For anything larger, or anything that must survive a theme switch, put the CSS in a child theme or a small plugin file instead.
TL;DR:
- Classic themes use Appearance > Customize > Additional CSS. Block themes use the Site Editor's Styles panel. Both are free and built into core.
- Additional CSS is stored per theme and printed inline on every page, so it is perfect for small tweaks and poor for big stylesheets.
- A real .css file, loaded through a child theme or plugin with wp_enqueue_style, is cacheable and survives theme changes. Notepad is enough to write one.
- If your rule is ignored, the cause is almost always specificity or caching, not a typo. Fix the selector before you reach for !important.
- CSS styles the page and HTML builds it. CSS is not C++, and the two have nothing in common except a habit of punishing missing semicolons.
Table of Contents
- Add Custom CSS in the Customizer or Site Editor, Whichever Your Theme Uses
- Where Custom CSS Should Live: Five Places Compared
- How to Make a Custom CSS File, Step by Step
- Why Your CSS Gets Ignored, and the Fix That Isn't !important
- CSS vs. HTML vs. C++: Clearing Up the Basics
- Custom CSS Examples You Can Paste Today
- Keep Custom CSS Maintainable Across Several Sites
- Get Custom CSS Added Across Every Site by Asking for It
- Frequently Asked Questions
- Sources
Add Custom CSS in the Customizer or Site Editor, Whichever Your Theme Uses
WordPress core ships a CSS box, so you do not need a plugin for a simple tweak. Which door you use depends on your theme type, and the quickest check is whether Appearance > Editor exists in your admin menu.
Classic themes
- Go to Appearance > Customize.
- Click Additional CSS at the bottom of the panel.
- Type or paste your rules. The preview updates as you type.
- Click Publish.
Block themes
- Go to Appearance > Editor.
- Open Styles (the half-filled circle icon).
- Click the three-dot menu and choose Additional CSS.
- Add your rules, then click Save.
Both routes write to the same place: a stored custom_css entry tied to the active theme. That detail matters more than it looks. Switch themes and your CSS stays behind with the old one. Copy it into a text file before you change anything.
If you are on a hosted store or site builder, the idea is the same, but the box lives somewhere else. Usually it is a stylesheet in the theme's asset folder, linked from the main layout file. Check that platform's docs for the exact path.
Where Custom CSS Should Live: Five Places Compared
Most guides stop at "paste it in the Customizer." That is fine for 20 lines. It is the wrong answer at 800.
| Location | Survives theme switch? | Cached as a separate file? | Best for |
|---|---|---|---|
| Customizer / Site Editor Additional CSS | No | No, printed inline in the page head | Small tweaks, quick fixes |
Child theme style.css |
No (tied to that theme) | Yes | Design changes for one theme |
Small custom plugin with a .css file |
Yes | Yes | Site-wide rules you want to keep |
| Page builder CSS field | Depends on builder | Usually inline | One element or one page |
| Block-level "Additional CSS class(es)" plus a rule | Only as far as the rule lives | Depends on where the rule is | Targeting specific blocks cleanly |
Here is the trade-off nobody mentions. Additional CSS is printed inside the HTML of every page. A 30 KB pile of rules is therefore re-downloaded with every page view, because the browser cannot cache it separately from the document. A 30 KB external stylesheet downloads once and is then served from cache.
My pick: Additional CSS for anything under about 50 lines, a plugin file for anything you would be upset to lose. The theme-specific child style.css sits in the middle and is fine if you never plan to change themes. Everybody says that, and most people change themes anyway.
How to Make a Custom CSS File, Step by Step
A CSS file is a plain text file with a .css extension. Nothing else about it is special.
- Create the file. Make a text file called
custom.css. - Write your rules. For example:
.site-footer { background: #111; } - Upload it. Put it in your child theme folder, or in a folder inside
wp-content/plugins/if you are making a plugin. - Load it. WordPress does not pick up stray CSS files by itself. You enqueue the file with
wp_enqueue_style(), as the WordPress Theme Handbook describes, inside a function hooked towp_enqueue_scripts. - Clear caches. Purge your caching plugin and your browser cache before judging the result.
A minimal loader for a child theme's functions.php:
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'my-custom-css',
get_stylesheet_directory_uri() . '/custom.css',
array(),
filemtime( get_stylesheet_directory() . '/custom.css' )
);
} );
The filemtime argument is the useful part. It uses the file's last-modified time as the version number, so browsers fetch a fresh copy every time you edit. That ends the "I changed it and nothing happened" ritual.
Can you do CSS in Notepad?
Yes. CSS is plain text, so Notepad, TextEdit in plain-text mode or any code editor works. Two traps: in Notepad's Save dialog, set "Save as type" to All files, or you will get custom.css.txt; and save as UTF-8, or special characters in content: rules may turn into nonsense. A proper code editor adds color and error hints, which is nice but not required.
Why Your CSS Gets Ignored, and the Fix That Isn't !important
Your rule is probably correct. It is losing an argument you did not know was happening.
When two rules target the same element, the browser picks a winner by specificity, then by source order. MDN's specificity documentation lays out the scoring. An ID counts most, then classes and attributes, then element names.
No number of class selectors outranks one ID selector. Ten classes score (0,10,0), a single ID scores (1,0,0), and the ID wins.
So if your theme styles #masthead .menu a and you write .menu a, you lose however many times you save. Common causes, in the order I would check them:
- Caching. A caching plugin, a CDN or your own browser is serving the old file. Hard-refresh and purge first. It is the cause more often than anyone admits.
- Specificity. Open your browser's developer tools, inspect the element, and see which rule is crossed out. Match or beat that selector.
- Wrong target. Your selector says
.buttonbut the theme calls it.wp-block-button__link. Inspect, do not guess. - Load order. A stylesheet loaded after yours, at equal specificity, wins. Additional CSS prints late in the head, which is why it often works when a file does not.
- A broken earlier rule. One missing brace can swallow every rule after it. Paste your CSS into a validator if everything below a certain line fails.
Use !important only as a last resort. It works, but it starts an arms race: the next person overriding it needs !important too.
Pro Tip: Test a rule live in developer tools before you save it anywhere. Edit the value in the Styles pane and watch the page change. When it looks right, copy the exact selector DevTools shows into your CSS. This removes most guesswork about selectors and takes about ten seconds.
CSS vs. HTML vs. C++: Clearing Up the Basics
These questions come up constantly, so here are the plain answers.
What is the difference between HTML and CSS? HTML defines what is on the page: headings, paragraphs, images, links. CSS defines how it looks: color, spacing, fonts, layout. Delete the CSS and your page still works but looks like 1996. Delete the HTML and there is nothing left to style.
Is CSS just C++? No. C++ is a general-purpose programming language that compiles into software. CSS is a style sheet language the W3C CSS working group maintains as a web standard. It has no loops, no functions in the programming sense and no compilation. A rule is a selector plus declarations, and that is most of what you need to know.
Where does this leave PHP and JavaScript? PHP runs on the server and builds the HTML. JavaScript runs in the browser and changes behavior. CSS only styles. If a problem is "this button is the wrong color," you want CSS. If it is "this button does nothing," you do not.
Custom CSS Examples You Can Paste Today
Each of these works as-is in Additional CSS. Change the selectors to match your theme, since class names vary.
/* Make body text slightly larger */
body { font-size: 18px; line-height: 1.6; }
/* Restyle every button block */
.wp-block-button__link { background: #0a5; border-radius: 4px; }
/* Hide the post date on mobile only */
@media (max-width: 600px) {
.posted-on { display: none; }
}
/* Add breathing room above headings */
h2 { margin-top: 2em; }
Three habits keep this manageable. Comment every block so you remember why it exists in a year. Keep related rules together. And put mobile rules inside a @media query so they do not leak onto desktop.
If you do not want to write rules by hand, a CSS generator or a browser extension that injects your own styles on a page is a fair way to prototype. Treat both as sketchpads. Neither one saves anything to your WordPress site, so the final rule still needs to go into one of the five places above.
Keep Custom CSS Maintainable Across Several Sites
CSS pasted into one site is a fix. CSS pasted into twelve sites is a maintenance problem, and the failure mode is quiet: the same footer fix lives in twelve boxes, in slightly different versions, and nobody remembers which is current.
A routine that holds up:
- Keep one master file of snippets, with a comment header for each saying what it does and which sites use it.
- Before any theme update or switch, export the Additional CSS to that file.
- After pasting, check the live page, not just the preview. Preview does not always match what caching serves.
- Review the CSS on each site once a year and remove rules for things that no longer exist.
If you manage several sites, the broader habits in our WordPress workflow guide apply here too. Standardize first, then automate. And if you are weighing tools for that, pick by job, not by feature list.
Get Custom CSS Added Across Every Site by Asking for It
The tedious part of CSS in WordPress is rarely writing the rule. It is opening a dozen admin screens to paste the same rule into each. Presshand is a WordPress MCP client that runs on your own machine or server and connects Claude or ChatGPT to your sites. CSS is one of its 83 WordPress jobs, so you can say "add this rule to the footer on these three sites" instead of clicking through each dashboard. If you are unsure what the plumbing involves, our MCP client explainer covers it.
It costs $97 once, covers every site you own, and has no per-site fees or monthly caps. The Agency licence is $197 and adds rebrand and resell rights. Updates are optional at $49 a year after the first 12 months. One honest limit: an AI will write CSS that is valid, not necessarily CSS that suits your design. Check the result on the live page, and keep your own copy of anything important.
Frequently Asked Questions
How do I add custom CSS in WordPress for free?
Use the built-in Additional CSS box. On classic themes it is under Appearance > Customize, and on block themes it is in the Site Editor's Styles panel. No plugin or payment is required.
How do I make a custom CSS file?
Save a plain text file with a .css extension, such as custom.css, and write your rules in it. Upload it to your child theme or plugin folder and load it with wp_enqueue_style(). WordPress will not load a stray CSS file on its own.
What is the difference between HTML and CSS?
HTML defines the content and structure of a page, such as headings, paragraphs and images. CSS controls presentation, such as colors, fonts and layout. A page needs HTML to exist and CSS to look the way you want.
Is CSS just C++?
No. C++ is a compiled, general-purpose programming language, while CSS is a style sheet language for describing how web pages look. They share no syntax worth mentioning and serve entirely different jobs.
Can I do CSS in Notepad?
Yes, CSS is plain text. When saving, choose "All files" as the type so the name stays custom.css rather than custom.css.txt, and use UTF-8 encoding.
Why is my custom CSS not working?
The usual causes are caching, a theme rule with higher specificity, or a selector that does not match the real class name. Purge caches, then inspect the element in your browser's developer tools to see which rule is winning.
Sources
- CSS Specificity | MDN Web Docs (Mozilla)
- Including CSS and JavaScript | WordPress Theme Handbook (WordPress.org)
- Cascading Style Sheets | W3C
- CSS: Cascading Style Sheets | MDN Web Docs (Mozilla)