How to add custom CSS to WordPress?

The quickest way to add custom CSS to WordPress is through the built-in editor for your theme type. With a block theme, go to Appearance > Editor > Styles, open the three-dot menu, and choose Additional CSS. With a classic theme, go to Appearance > Customize > Additional CSS. Paste your CSS, preview the result, and save. For larger or long-term changes, a child theme stylesheet or a properly enqueued CSS file is the better option.

Custom CSS lets you fine-tune your site's design beyond what your theme's settings allow, whether that's adjusting spacing, restyling buttons, or hiding an element you don't need. This guide covers each method in detail, explains when to use which, shows you how to find the right CSS selectors, and shares best practices so your changes stay clean and survive theme updates.

Why Add Custom CSS?

Even the most flexible theme can't anticipate every design preference. Custom CSS helps you:

• Adjust colors, fonts, or spacing that aren't exposed in theme options.
• Style specific blocks, pages, or elements differently.
• Hide elements you don't want to display.
• Fix small layout issues on mobile devices.
• Style third-party plugin output, like forms or tables, to match your brand.

Before reaching for CSS, though, check whether the setting already exists. In block themes, Global Styles and block settings cover a lot of design changes without code, and those changes are easier to manage later.

Method 1: Additional CSS in the Site Editor (Block Themes)

Block themes don't use the Customizer, so WordPress provides a CSS editor inside Global Styles.

1. Open the Site Editor: Go to Appearance > Editor.
2. Open Styles: Click Styles in the sidebar, then click the pencil icon or the canvas to enter editing mode.
3. Find Additional CSS: Click the three-dot menu (More) at the top of the Styles panel and select Additional CSS.
4. Add your CSS: Type or paste your rules into the box. The preview updates as you type.
5. Save: Click Save in the top-right corner.

For example, this rule gives all images inside post content rounded corners:

.wp-block-post-content img {
  border-radius: 8px;
}

Per-Block Custom CSS

WordPress also lets you add CSS that only applies to a specific block type:

1. In Styles, click Blocks.
2. Select a block, such as Button or Quote.
3. Scroll to the bottom and expand Advanced, then find Additional CSS.

CSS added here is automatically scoped to that block, so you can write properties without a selector:

border-left: 4px solid currentColor;
padding-left: 1.25rem;
font-style: italic;

If you need to target an element inside the block, use the & nesting selector, for example & cite { font-size: 0.875rem; }.

Method 2: Additional CSS in the Customizer (Classic Themes)

For classic themes, the Customizer has a dedicated CSS panel.

1. Go to Appearance > Customize.
2. Click Additional CSS at the bottom of the panel list.
3. Enter your CSS. The live preview on the right shows your changes immediately.
4. Click Publish to make the changes live.

The Customizer's CSS editor includes syntax highlighting and will warn you about obvious errors. CSS added here is tied to the active theme, so if you switch themes, it won't carry over. WordPress keeps it saved, however, so it will reappear if you switch back.

This method is ideal for small tweaks, such as:

.site-header {
  border-bottom: 1px solid #e5e7eb;
}

.entry-title {
  letter-spacing: -0.01em;
}

@media (max-width: 600px) {
  .site-footer .widget {
    margin-bottom: 2rem;
  }
}

Method 3: Add a Custom Class to a Block

Sometimes you only want to style one particular block, not every block of that type. The block editor lets you add a custom class name:

1. Select the block in the post, page, or Site Editor.
2. In the block settings sidebar, expand Advanced.
3. In Additional CSS class(es), enter a class name like highlight-box.
4. Add CSS for that class using Method 1 or Method 2:

.highlight-box {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 1.5rem;
  border-radius: 6px;
}

This is one of the cleanest ways to style individual elements, because the class name makes your intent obvious and the rule doesn't affect anything else.

Method 4: Use a Child Theme Stylesheet

For larger amounts of CSS, or when you want your styles in version control, a child theme is the most robust choice. A child theme's style.css loads alongside the parent theme and isn't overwritten when the parent updates.

If you already have a child theme, add your rules to its style.css. Make sure the stylesheet is actually loaded. Many child themes enqueue it in functions.php like this:

function mychild_enqueue_styles() {
 wp_enqueue_style(
'mychild-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'mychild_enqueue_styles' );

The get_stylesheet_uri() function points to the active (child) theme's style.css. Using the theme version as the fourth parameter helps with cache busting: bump the version in the child theme's header when you make changes, and browsers will download the new file.

Note that for block child themes, WordPress doesn't automatically load style.css on the front end, so enqueueing it like this is necessary.

Method 5: Enqueue a Separate Stylesheet

For organized projects, you might prefer to keep custom CSS in its own file, for example assets/css/custom.css in your child theme or custom plugin. Here's how to load it properly:

function mychild_enqueue_custom_css() {
$path = get_stylesheet_directory() . '/assets/css/custom.css';

if ( ! file_exists( $path ) ) {
 return;
}

wp_enqueue_style(
'mychild-custom',
get_stylesheet_directory_uri() . '/assets/css/custom.css',
array(),
filemtime( $path )
);
}
add_action( 'wp_enqueue_scripts', 'mychild_enqueue_custom_css' );

Using filemtime() as the version automatically updates the version number whenever you edit the file, so visitors always get the latest CSS.

Loading CSS Only Where It's Needed

You can use conditional tags to load a stylesheet only on specific pages, which keeps other pages lighter:

function mychild_contact_page_css() {
if ( ! is_page( 'contact' ) ) {
return;
}

wp_enqueue_style(
'mychild-contact',
get_stylesheet_directory_uri() . '/assets/css/contact.css',
array(),
'1.0.0'
);
}
add_action( 'wp_enqueue_scripts', 'mychild_contact_page_css' );

Adding Styles to the Block Editor

If you want the editor to match the front end, load the same CSS in the editor. In a theme, use add_editor_style():

function mychild_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/custom.css' );
}
add_action( 'after_setup_theme', 'mychild_editor_styles' );

The path in add_editor_style() is relative to the theme's folder.

Adding Inline CSS

The wp_add_inline_style() function attaches CSS to an existing stylesheet handle. It's useful when CSS values come from settings, such as a color chosen by the user:

function mychild_inline_css() {
$accent = sanitize_hex_color( get_theme_mod( 'mychild_accent', '#2563eb' ) );

if ( ! $accent ) {
return;
}

$css = ".button-accent { background-color: {$accent}; }";

wp_add_inline_style( 'mychild-style', $css );
}
add_action( 'wp_enqueue_scripts', 'mychild_inline_css', 20 );

The handle (mychild-style) must match a stylesheet that is already enqueued, and the priority of 20 makes sure it runs after the main stylesheet is registered.

Method 6: Use theme.json (Block Themes)

Block theme developers can add custom CSS directly in theme.json using the css property under styles. This works for global CSS and per-block CSS:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "styles": {
    "css": ".wp-site-blocks { overflow-x: clip; }",
    "blocks": {
      "core/quote": {
        "css": "border-left: 4px solid currentColor; & cite { opacity: 0.7; }"
      }
    }
  }
}

This keeps everything in one design file that ships with the theme. For more than a few lines, though, a separate stylesheet is easier to read and maintain.

Method 7: Use a Plugin

If you want a dedicated interface that isn't tied to your theme, plugins are a good option:

• WPCode: Manages CSS, JavaScript, and PHP snippets from one screen, with options to load CSS site-wide or conditionally.
• Simple Custom CSS and JS: Lets you create multiple CSS files and choose where they load.

The main advantage of a plugin is that your CSS stays active even if you change themes.

How to Find the Right CSS Selector

Writing CSS is easy. Knowing what to target is the tricky part. Your browser's developer tools make it simple:

1. Right-click the element you want to change and choose Inspect.
2. Look at the highlighted HTML: Note the element's classes, such as wp-block-button__link or site-title.
3. Check the Styles panel: You'll see which CSS rules currently apply and which are crossed out because they're overridden.
4. Experiment live: Edit values directly in the Styles panel to test changes before adding them to WordPress.
5. Copy your final rule into your chosen CSS location.

Some useful WordPress classes to know:

• body.home, body.single, body.page: Page-type classes added by body_class().
• body.page-id-42, body.postid-15: Target a specific page or post.
• .wp-block-*: Classes for core blocks, such as .wp-block-image or .wp-block-group.
• .has-*-color and .has-*-background-color: Color classes generated from your palette.
• .logged-in and .admin-bar: Present when a user is logged in.

For example, to change the heading color only on the About page, you could write:

body.page-id-42 h1 {
  color: #1e3a8a;
}

Handling Specificity and !important

If your CSS doesn't seem to work, it's usually because another rule is more specific or loads later. Before using !important, try these approaches:

• Make your selector more specific: .site-header .menu a beats .menu a.
• Check the load order: CSS loaded later wins when specificity is equal. Enqueue your stylesheet with the parent stylesheet as a dependency to make sure it loads after.
• Use browser tools to see which rule is winning and why.

Use !important only as a last resort, such as overriding inline styles added by a plugin. Overusing it makes your CSS hard to maintain.

Best Practices for Custom CSS

Prefer settings over CSS: In block themes, use Global Styles for colors, typography, and spacing. It keeps the design consistent and editable.

Keep your CSS organized: Group rules by section (header, content, footer) and add short comments.

Use CSS custom properties: Block themes expose presets like var(--wp--preset--color--accent). Using them keeps your CSS aligned with the theme's palette.

Write mobile-friendly CSS: Test on small screens and use media queries where needed.

Don't edit parent theme files: Changes to a parent theme's style.css will be lost when it updates.

Clear caches: If you use a caching or optimization plugin, clear its cache after changing CSS so visitors see the update.

Back up before big changes: Copy your existing CSS somewhere safe before rewriting it, and take a site backup before editing theme files.

---

FAQ: Adding Custom CSS to WordPress

---

Conclusion

Adding custom CSS to WordPress is easy once you know which tool fits the job. For quick changes, use Additional CSS in the Site Editor or Customizer. To style individual blocks, add a custom class. For bigger projects, put your CSS in a child theme or a properly enqueued stylesheet, and block theme developers can also use theme.json.

Whichever method you choose, start by checking whether a built-in setting already does what you need, find the right selector using your browser's developer tools, and keep your CSS organized and specific. With those habits, you'll be able to shape your site's design precisely without creating a maintenance headache.