Recommended Free Tools
To add custom CSS to WordPress, use the Site Editor for a block theme, a block’s CSS settings for a targeted change, the Customizer if your theme supports it, or a child theme for code maintained with a theme. The right option depends on your theme, the CSS scope, and whether the code should remain when you switch themes.
Choose a method before adding CSS
For ordinary visual adjustments, begin with the active theme’s built-in style controls. WordPress recommends checking Styles before adding custom CSS. Choose the Site Editor or Customizer for site-owner changes; use a child theme or registered stylesheet when a developer is maintaining CSS as part of a theme.
As an Amazon Associate I earn from qualifying purchases.
- Block theme: use the Site Editor’s Styles controls for site-wide or block-type CSS.
- One block instance: assign it a CSS class and write a selector in a site CSS location, or use the block’s Additional CSS field if available.
- Classic theme with Customizer support: use Appearance > Customize > Additional CSS.
- Theme-owned customization: add CSS through a child theme rather than editing the parent theme directly.
The dashboard options vary with the active theme and WordPress version, so a missing menu does not necessarily mean CSS cannot be added.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →1. Add site-wide CSS in the Site Editor
If your active theme is a block theme, you can enter CSS through the Site Editor. This is suitable for styles that should apply across the site and are managed by the site editor rather than packaged with a theme.
#1 Best Overall
- In the WordPress dashboard, open Appearance > Editor.
- Open Styles.
- Find Additional CSS. In WordPress 6.9, the control is in the ellipsis menu in the Styles-page header.
- Enter your CSS, then save the changes.
CSS saved in this interface is not overwritten by a theme update, but it is cleared if you switch themes. For small adjustments, first check whether the theme’s built-in Styles controls can achieve the same result.
2. Target a block or a block type
Use this method when a change should affect one block instance or every block of a particular type. These are different scopes, and the editor exposes more than one way to handle them.
Style one block instance with a CSS class
- Select the block in the editor.
- In the block settings sidebar, open Advanced and enter a class name in the CSS class field, without the leading period.
- Add a selector for that class in a site CSS location, such as the Site Editor’s Additional CSS when available. For example, if the class is
notice-box, the selector begins.notice-box.
A class lets you write a full selector elsewhere and reuse it on blocks that have the same class.
Use Additional CSS for a block
Some blocks provide an Additional CSS field in their settings. In the basic documented case, enter declarations such as color: red; rather than a selector or curly braces. The field is limited to users with the edit_css capability.
Style a block type site-wide
The Site Editor’s Styles interface can also provide Additional CSS for a block type. This targets that type across the site, rather than just the selected instance. The basic field expects declarations, not a selector. Controls and labels can vary by WordPress version and theme.
3. Use the Customizer when your theme supports it
For themes that expose the Customizer, the Additional CSS panel provides a place to enter CSS, preview the result, and publish it without editing theme files. The CSS is associated with the active theme, not stored as a theme-independent customization.
Rank #4
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
- In the dashboard, go to Appearance > Customize.
- Open Additional CSS.
- Enter the CSS and review the preview.
- Select Publish to apply the changes.
The Customizer is theme-dependent and may be hidden when a block theme is active. WordPress Developer Resources notes that adding CSS through the Appearance Customize screen has been available since WordPress 4.7; whether that route is visible today still depends on the active theme.
4. Put theme-level CSS in a child theme
Use a child theme when CSS is part of a maintained theme customization. A child theme keeps changes separate from the parent theme’s files, which may be overwritten by a parent-theme update. Avoid placing persistent custom CSS directly in the parent theme.
Child-theme stylesheet setup differs between classic and block themes: a stylesheet is often needed for classic themes, while it may be optional for block themes. Theme developers should load styles through the appropriate WordPress mechanisms rather than relying on direct parent-theme edits. If you do not maintain theme code, one of the editor interfaces is generally the simpler route.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.For theme developers: use the right styling mechanism
When building or maintaining a block theme, use theme.json for standard styles represented by its supported settings. WordPress recommends this approach because it works with WordPress defaults, plugins, and user customizations. For a small amount of custom CSS, theme.json can also include CSS.
For larger or block-specific CSS, a separate block stylesheet is often a better fit. WordPress documents wp_enqueue_block_style() for registering block stylesheets. Editor-only styling follows a related but distinct path: themes can declare add_theme_support('editor-styles') and use add_editor_style(); editor-specific assets can also use enqueue_block_editor_assets.
Quick Recap
Common mistakes to avoid
- Looking for the same menu on every site: the Site Editor and Customizer options depend on the theme, and the Additional CSS location can move between WordPress versions.
- Putting a selector in a declarations-only field: a block’s Additional CSS field commonly expects declarations such as
color: red;. Use a CSS class and write the selector in a site CSS location when you need selector syntax. - Editing the parent theme for a lasting change: parent-theme updates can overwrite direct edits. Keep theme customizations in a child theme.
- Assuming CSS follows you to a different theme: Site Editor CSS is cleared on a theme switch, and Customizer CSS is associated with its theme.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
