Skip to content
ThemesIonic — home
WordPress Tutorials

How to Add Custom CSS in WordPress

Add CSS through Global Styles or the Customizer for small changes, and use a child theme for version-controlled site code that must survive updates.

2 min read beginner

Quick answer: with a block theme, open Appearance → Editor → Styles, open the ellipsis menu in the Styles header and choose Additional CSS. With a classic theme, use Appearance → Customize → Additional CSS. For substantial version-controlled CSS, use a child theme instead of editing the parent theme.

Before writing CSS, check whether WordPress already exposes the setting under Styles or the selected block’s settings. Native controls are easier for the next editor to understand.

Method 1: Add site-wide CSS in a block theme

Block themes use the Site Editor for global templates and styles.

  1. Open Appearance → Editor.
  2. Select Styles.
  3. Open the ellipsis menu in the Styles header.
  4. Choose Additional CSS.
  5. Add the rule and save.

For example:

.wp-block-post-title {
    text-wrap: balance;
}

WordPress added site-wide custom CSS to the Styles interface in WordPress 6.2. In newer interfaces, including WordPress 6.9, the control appears in the ellipsis menu in the Styles header. The official Styles documentation tracks these UI changes.

CSS stored here is associated with the active theme. It survives that theme’s updates but is cleared from the active design when you switch themes. Copy it before a theme change.

Method 2: Add CSS for one block type

When a rule should affect every instance of one block:

  1. Open Appearance → Editor → Styles.
  2. Choose Blocks.
  3. Select the block type.
  4. Find Additional block CSS.

For a simple declaration, WordPress supplies the block selector, so enter declarations without wrapping them in a selector:

font-style: italic;

Use site-wide Additional CSS instead when you need to combine selectors, target a unique component or control relationships between elements.

Method 3: Use Additional CSS in a classic theme

For a classic theme:

  1. Open Appearance → Customize.
  2. Select Additional CSS.
  3. Add and preview the rule.
  4. Click Publish.

Example:

.site-title a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

If the Customizer is missing, confirm whether the active theme is a block theme. Block themes move site design into Appearance → Editor.

Method 4: Put project CSS in a child theme

Use a child theme when CSS is part of a maintained codebase, must be reviewed in Git, or ships with template and PHP changes.

Do not edit the parent theme’s style.css: an update can replace the file. A child theme declares its parent in its own stylesheet:

/*
Theme Name: Example Child
Template: example-parent
*/

Enqueue the stylesheet using WordPress APIs rather than hard-coding a <link> tag. A minimal child-theme functions.php can use:

<?php

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'example-child',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get( 'Version' )
    );
} );

The correct dependency order varies by parent theme, so check its documentation. Some parent themes already load the child stylesheet.

Find the correct CSS selector

Open the page, right-click the element and choose Inspect. In browser developer tools:

  1. confirm the selected HTML element;
  2. review the Styles panel for the rule currently controlling it;
  3. test a declaration temporarily;
  4. copy the smallest stable selector;
  5. add the final rule through WordPress.

Prefer a purposeful class over generated IDs or selectors tied to a fragile nesting structure.

Instead of:

#post-482 > div:nth-child(2) > div > h2 {
    color: #213547;
}

add a custom class such as service-heading in the block’s Advanced settings and use:

.service-heading {
    color: #213547;
}

Scope CSS to one page

WordPress adds page-specific classes to the <body>. Inspect the body element and combine its class with your target:

.page-id-42 .entry-title {
    display: none;
}

Hiding a title visually is not always the right solution. Confirm that the page still has one useful H1 for users and search engines, and that the theme is not rendering a duplicate title from the template.

Why the CSS does not appear

First, inspect the element. If the rule is absent from developer tools, the stylesheet or saved Additional CSS is not reaching the page. If the rule is crossed out, another selector has higher specificity or loads later.

Check in this order:

  1. save the editor change;
  2. fix syntax errors such as a missing brace;
  3. verify the selector against the rendered page;
  4. test in a private browser window;
  5. purge the WordPress page cache;
  6. purge host/server cache;
  7. purge CDN cache;
  8. check minification or critical-CSS generation;
  9. confirm that you edited the active theme or correct environment.

Do not add !important to every declaration. It can prove that specificity is involved, but it usually creates a harder override problem later. For a full cache diagnosis, see WordPress Changes Not Showing.

Keep custom CSS maintainable

  • Add a short comment describing why a non-obvious workaround exists.
  • Group rules by component rather than by date.
  • Remove obsolete experiments.
  • Test keyboard focus, reduced motion and mobile widths.
  • Do not hide functional controls only to simplify a layout.
  • Keep a copy before changing themes.

Small changes belong in Additional CSS. A growing stylesheet with layout systems, component states and release history belongs in a child theme or project asset pipeline.

Frequently asked

Open Appearance → Editor → Styles and use the ellipsis menu in the Styles header to find Additional CSS. The exact icon position can vary slightly by WordPress version.
CSS saved through the WordPress Additional CSS interface survives updates to the active theme. Direct edits to the parent theme stylesheet can be overwritten.
Check that the rule is valid and matches the element, then inspect browser, plugin, server and CDN caches. Also confirm that a more specific rule is not overriding it.
Tagged Gutenberg CSS

Related guides