How to Add Custom CSS in WordPress (Without a Plugin)

Checked for accuracy and updated on September 6, 2026.

Most WordPress themes give a solid starting point, but at some point something needs adjusting that the theme settings don’t cover: a font size, a button colour, a margin that’s slightly off. WordPress has a built-in way to handle this, plus a couple of other methods worth knowing depending on the setup, none of them requiring a plugin. The right choice depends mostly on how much CSS is actually being added.

For a Handful of Tweaks: Additional CSS in the Customizer

The simplest method, and it works on any classic theme: go to Appearance → Customise → Additional CSS, type or paste the rules directly into the box, and click Publish. The CSS is stored in the database and applied site-wide; it survives theme updates entirely, since it isn’t stored in any theme file at all. The one real limitation is a character cap; past a certain point of accumulated CSS it becomes unwieldy, and that’s the signal to move to a child theme stylesheet instead.

On a block theme (Twenty Twenty-Three through Twenty Twenty-Five, and most current themes now; WordPress skipped releasing a Twenty Twenty-Six default theme entirely, the first time that’s happened, and WordPress 7.0 didn’t bring one either), the equivalent lives under Appearance → Editor → Styles → Additional CSS instead of the classic Customizer, since block themes use the Site Editor and Global Styles for everything else. The next default theme, Twenty Twenty-Seven, is confirmed for WordPress 7.2, targeted for early December 2026.

For Anything More Substantial: A Child Theme Stylesheet

Adding CSS directly to a parent theme’s files is the single most common mistake here: the next theme update overwrites and loses every change. A child theme is the fix: add rules to its own style.css below the existing theme header comment block (which must stay intact, since WordPress reads it to identify the theme), and because the child stylesheet loads after the parent’s, the rules take effect in most cases without needing !important overrides at all. This is the better home for custom layouts, component styling, or brand adjustments across the whole site, better organised and easier to maintain than a growing block of text in the Customizer.

For Keeping CSS in Its Own File: Enqueue via functions.php

Create a custom.css file inside the child theme folder (via FTP or the hosting file manager), add the CSS rules there, then load it with:

function veravix_custom_styles() {
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'veravix_custom_styles' );

This function needs to run somewhere. Some guides suggest pasting it directly into the child theme’s functions.php via Appearance → Theme File Editor. Worth avoiding that route specifically: a stray typo in that in-dashboard editor can produce a fatal PHP error and take the whole site offline instantly, with the dashboard itself being what just broke. A free plugin like Code Snippets runs the identical function in an isolated space that’s trivially easy to disable if something goes wrong, without the same all-or-nothing risk. Either way, when styles don’t seem to update after a change, increment the version number (the '1.0' above) in the wp_enqueue_style() call. That forces browsers to fetch the fresh file instead of serving a cached copy.

Getting the Selector Right the First Time

Use the browser’s developer tools (right-click → Inspect) to identify the exact selector before writing a rule; it saves real time and avoids most specificity headaches upfront. If a rule genuinely isn’t applying, the parent theme is usually using a more specific selector that’s winning out; make the new selector more specific in response rather than reaching for !important, which fixes the immediate problem but compounds into a real mess once several rules are all fighting for priority the same way.

Small tweaks, like a heading size or padding on one section, are genuinely fine to leave in the Customizer’s Additional CSS panel. Once changes number more than a handful, move them to a child theme stylesheet; it’s easier to maintain and keeps everything in one place rather than scattered. For page-specific CSS on a single post or page, some page builders offer a custom-CSS field per element or section, fine for isolated cases, but reach for one of the site-wide methods above once the change applies broadly. A common next step from here is adding a custom font, which uses the same enqueue approach with a handful of additional CSS rules.