Adding custom CSS to WordPress is one of the easiest ways to change the appearance of your website without modifying the underlying theme files.
CSS, which stands for Cascading Style Sheets, controls how elements of your website look. You can use CSS to change colors, fonts, spacing, buttons, backgrounds, borders, layouts, and many other design elements.
Fortunately, WordPress provides several ways to add custom CSS.
Here is how to add CSS to your WordPress site safely.
How to Add CSS to WordPress
One of the easiest methods is through the WordPress Customizer.
From your WordPress dashboard, go to:
Appearance → Customize → Additional CSS
You can then enter your custom CSS into the Additional CSS field.
For example:
.site-title {
font-size: 32px;
}
.button {
border-radius: 5px;
}Once you’re finished, click Publish to save your changes.
Your CSS should immediately begin affecting the corresponding elements on your website.
What Is Additional CSS in WordPress?
The Additional CSS feature allows you to add CSS rules without directly editing your WordPress theme’s stylesheet.
This is useful because you can make design changes while leaving the original theme files untouched.
For relatively small website customizations, Additional CSS is often one of the simplest solutions.
You can use it to customize elements such as:
- Font sizes
- Text colors
- Background colors
- Buttons
- Margins and padding
- Borders
- Navigation menus
- Headers and footers
- WooCommerce elements
- Mobile layouts
For example, you could change the background color of a button with:
.button {
background-color: #000;
}What If WordPress Doesn’t Show the Customize Option?
Some WordPress websites may not have the traditional Appearance → Customize option.
This is particularly common with newer block themes that use WordPress’s Site Editor.
If your website uses a block theme, go to:
Appearance → Editor
From there, open the site’s Styles settings.
The available customization options will depend on the theme you’re using and your version of WordPress.
Some themes provide extensive styling controls directly through the Site Editor, reducing the amount of custom CSS you need to write.
How to Add Custom CSS in Elementor
If your WordPress website uses Elementor, you may also be able to add CSS directly through Elementor.
With Elementor Pro, edit the page with Elementor and select the widget, container, or section you want to customize.
Go to:
Advanced → Custom CSS
You can then enter CSS specifically for that element.
For example:
selector {
background-color: #000;
padding: 20px;
}The selector keyword tells Elementor to apply the CSS to the element you’re currently editing.
This can be especially useful when you only want a CSS rule to affect one particular section or widget instead of the entire website.
How to Add CSS Using a WordPress Child Theme
Developers making larger website customizations may prefer adding CSS through a WordPress child theme.
A child theme allows you to customize your website while keeping those modifications separate from the parent theme.
Your custom CSS can typically be added to the child theme’s style.css file.
For example:
.product-title {
font-size: 24px;
font-weight: 700;
}Using a child theme is particularly useful when your website requires extensive CSS or other theme-level customizations.
Should You Edit Your Theme’s style.css File?
You should generally avoid directly modifying the style.css file of your parent WordPress theme.
The reason is simple: theme updates can replace the theme files.
If you’ve manually edited the parent theme’s stylesheet, those customizations could potentially disappear after updating the theme.
Instead, consider using:
Additional CSS, Elementor Custom CSS, or a child theme.
These approaches make it easier to maintain your customizations over time.
Which WordPress CSS Method Should You Use?
The best method depends on the type of customization you’re making.
| Method | Best For |
|---|---|
| Additional CSS | Quick site-wide CSS changes |
| WordPress Site Editor | Websites using block themes |
| Elementor Custom CSS | Styling specific Elementor elements |
| Child Theme | Larger or advanced theme customizations |
For most simple WordPress design changes, Additional CSS is a good place to start.
Developers making more extensive modifications may benefit from using a child theme instead.
How to Find the CSS Class of a WordPress Element
Before writing CSS, you need to know which website element you want to target.
Modern browsers such as Chrome, Firefox, Edge, and Safari include developer tools that can help.
Right-click the element you want to modify and select Inspect or Inspect Element.
The browser will display the HTML and CSS associated with that element.
You might see something like:
<h2 class="product-title">Product Name</h2>You could then target that element with:
.product-title {
font-size: 28px;
}Browser developer tools are particularly helpful when customizing WordPress themes and plugins because they allow you to identify the existing classes and CSS rules.
Why Isn’t My WordPress CSS Working?
Sometimes you may add custom CSS but see no visible change.
Common reasons include incorrect CSS selectors, browser caching, WordPress caching plugins, CDN caching, or another stylesheet overriding your rule.
First, clear your website and browser cache and reload the page.
You can also use your browser’s Inspect tool to determine whether your CSS rule is being loaded and whether another rule has greater specificity.
For troubleshooting purposes, developers sometimes use !important:
.product-title {
font-size: 28px !important;
}However, !important should generally be used selectively rather than added to every CSS rule.
Can You Add CSS to WooCommerce?
Yes. WooCommerce pages can be customized using the same CSS methods as the rest of your WordPress website.
For example, you could customize WooCommerce buttons with:
.woocommerce a.button,
.woocommerce button.button {
border-radius: 8px;
}You can also customize product titles, prices, product images, checkout fields, cart elements, and other WooCommerce components.
The exact CSS selectors depend on your WordPress theme, WooCommerce configuration, and any plugins you’re using.
Is It Safe to Add Custom CSS to WordPress?
Adding CSS is generally a relatively safe way to customize a WordPress website because CSS primarily controls presentation.
Incorrect CSS can cause visual or layout problems, but it typically doesn’t modify your website’s content or database.
Before making extensive changes, however, it’s still a good idea to have a current website backup.
Final Thoughts
Learning how to add CSS to WordPress gives you much greater control over your website’s appearance.
For quick changes, start with Appearance → Customize → Additional CSS if that option is available with your theme.
If you’re using Elementor Pro, its built-in Custom CSS feature can make it easier to target individual elements. Websites using modern block themes can use the Site Editor’s styling tools, while developers making extensive theme customizations may prefer a child theme.
Whichever method you choose, avoid directly modifying the parent theme whenever possible. Keeping your custom CSS separate from the parent theme helps ensure your design changes survive future WordPress theme updates.