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

Most WordPress themes give you a solid starting point, but at some point you’ll want to adjust something the theme settings don’t cover — a font size, a button colour, a margin that’s slightly off. That’s when custom CSS becomes useful.

WordPress has a built-in way to handle this, and there are a couple of additional methods worth knowing depending on your setup. None of them require a plugin. The right choice depends on whether you’re using a child theme, a block theme, or just need a quick targeted fix.

This guide covers each method clearly so you can pick the one that fits your situation.

Quick Answer

The fastest way to add custom CSS in WordPress is through the Additional CSS panel in the WordPress Customizer (Appearance → Customise → Additional CSS). For sites using a child theme, adding CSS directly to the child theme’s style.css file is more reliable for larger amounts of styling. If you’re comfortable editing theme files, you can also enqueue a custom stylesheet via functions.php.

Why This Matters

Adding CSS directly to a parent theme’s files is a common mistake. When the theme updates, those changes are overwritten and lost. Using the Customizer’s Additional CSS panel or a child theme keeps your custom styles separate from the theme itself, so updates don’t wipe your work.

For sites doing light customisation, the Customizer method is perfectly fine. For anything more substantial — custom layouts, component styling, brand adjustments across the site — a dedicated stylesheet in a child theme gives you better organisation and version control.

Method 1: Additional CSS in the Customizer

This is the simplest method and works on any classic WordPress theme.

1. Go to Appearance → Customise in your WordPress dashboard.
2. Click Additional CSS in the left panel.
3. Type or paste your CSS rules directly into the text box.
4. Click Publish to save and apply the styles.

The CSS is stored in the database and applied site-wide on the front end. It survives theme updates because it isn’t stored in any theme file.

One limitation: the Customizer’s Additional CSS panel has a character limit. For larger stylesheets, it becomes unwieldy and a child theme stylesheet is a better fit.

Method 2: Child Theme Stylesheet

If you’re already running a child theme (which you should be for any serious customisation), add your CSS directly to the child theme’s style.css file.

1. Go to Appearance → Theme File Editor in your WordPress dashboard.
2. Make sure your child theme is selected in the dropdown on the right.
3. Click style.css in the file list.
4. Add your CSS rules below the existing theme header comment block at the top of the file.
5. Click Update File to save.

The child theme stylesheet loads after the parent theme’s stylesheet, so your rules take effect without needing !important overrides in most cases.

If you don’t have a child theme yet, this guide on creating a WordPress child theme covers how to set one up before you start customising.

Method 3: Enqueue a Custom Stylesheet via functions.php

This method gives you more control over when and where your stylesheet loads. It’s useful if you want to keep your CSS in a separate file rather than mixed into style.css.

1. Create a new file called custom.css inside your child theme folder via FTP or your hosting file manager.
2. Add your CSS rules to that file.
3. Open functions.php in your child theme (Appearance → Theme File Editor → functions.php).
4. Add the following code:

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' );

5. Click Update File to save.

WordPress will now load custom.css on every page. When you want to update your styles, edit custom.css directly. The version number in the wp_enqueue_style() call can be bumped to force browsers to load the fresh version rather than a cached copy.

Practical Tips

In most sites I build, the Customizer’s Additional CSS is fine for small tweaks — adjusting a heading size, tweaking padding on a section. Once you’re making more than a handful of changes, move to a child theme stylesheet. It’s easier to maintain and keeps everything in one place.

Use your browser’s developer tools (right-click → Inspect) to identify exactly which CSS selector you need to target before writing your rules. This saves time and avoids specificity issues.

If a rule isn’t applying, check the specificity of the selector. The parent theme may be using a more specific selector that overrides yours. In that case, make your selector more specific rather than reaching for !important.

Common Mistakes

Editing the parent theme directly. Any CSS added to a parent theme’s files gets wiped on the next theme update. Always use one of the three methods above.

Using !important everywhere. It’s tempting as a quick fix, but it creates specificity problems that compound over time. Identify the right selector instead.

Adding CSS to the wrong place in a child theme. The child theme header comment block at the top of style.css must stay intact — WordPress reads it to identify the theme. Add your CSS below that block, not inside it.

Forgetting to version-bump the enqueued stylesheet. If you’re using Method 3 and changes don’t appear, increment the version number in wp_enqueue_style to clear the cached version.

When to Use This vs Alternatives

If you’re on a block theme (like Twenty Twenty-Four), the Customizer may not be available in the traditional form. Block themes use the Site Editor (Appearance → Editor) and handle styles through Global Styles. For block themes, custom CSS can be added under Appearance → Editor → Styles → Additional CSS.

For page-specific CSS that only applies to one post or page, some page builders include a custom CSS field per element or section. That’s fine for isolated changes, but for anything site-wide, use one of the three methods covered above.

If you want to go further with CSS, one common next step is adding a custom font to WordPress — the process uses the same enqueue approach and a handful of CSS rules.

Conclusion

For most WordPress sites, the Customizer’s Additional CSS panel handles small tweaks cleanly. Once your custom styles grow, move them to a child theme stylesheet — it’s better organised and easier to maintain long-term.