Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
As a theme developer, I help people customize their theme with CSS every day.
I’ve even published entire libraries of CSS snippets for my themes.
While writing your own CSS from scratch might be a challenge, adding pre-written snippets should be simple.
In this tutorial, you’ll learn the simplest and best approach to add custom CSS to your site so that you can change the styles in your WordPress theme.
How to add custom CSS
In the past, I recommended the Simple Custom CSS plugin, but you no longer need a plugin to add CSS to your site.
Instead, you can use the built-in Additional CSS section in the Customizer. To access this feature, start by clicking the Customize menu item found under Appearance.
Next, open the Additional CSS section, which should be located near the bottom of the Customizer panel.
Inside, you can simply paste the CSS you need to add to your site.
What’s great about the Additional CSS feature is that you get a live preview of how it will affect your site. The preview updates instantly and visitors won’t see your changes until you click the Publish button at the top.
Why you should never edit style.css
Many WordPress users are tempted to edit the theme’s stylesheet directly via the Theme Editor menu.
Never do this.
The biggest problem with making changes in this way is that all your hard work will be lost when you update the theme. For example, if you’re using Mission News version 1.38 and tomorrow 1.39 comes out, the update process copies all the new files over the old files. The theme certainly won’t include the same customizations you’ve made, and so they’ll be permanently lost (unless you have a recent backup).
This can be avoided by using the Additional CSS section in the Customizer, which is unaffected by theme updates.
The only challenge of the Additional CSS feature is that sometimes, getting your CSS to take effect can be a little tougher.
Tips to make your custom CSS work
Without getting into the weeds, CSS uses a specificity system to decide which style rules override each other.
One way to guarantee your styles override the theme’s styles is to use an !important tag.
Take this CSS snippet for instance:
.site-title {
font-size: 28px;
}
In all of our themes, that code would make the site title 28px. If you don’t see any changes after implementing this code, try adding the !important tag, like this:
.site-title {
font-size: 28px !important;
}
With that update, the code is essentially guaranteed to take effect as long as it’s targeting the right selector. Just try to reserve this for special occasions, as using it dozens of times in your code can make it harder to override styles in the future.
What if it only shows in the live preview?
One common issue users face when using this feature is that their code will work while using the Live Customizer, but once they view the site normally, the changes don’t show up.
This is almost always due to caching, and I cover the solution in full detail here:
How to Fix WordPress Changes Not Showing Up
It should only take a minute or two to sort things out.
Easily customize with CSS
Even if you have no clue how to write your own CSS, the Additional CSS feature makes it easy to paste code into your site.
If you want to learn more about customizing WordPress themes with CSS, I would recommend my guide on finding CSS selectors next.
And if you enjoyed learning something new about WordPress today, you might like my free email course:
Take the 7-day WordPress Mastery course
It starts with a couple of lessons on web design and then moves onto performance optimization and website monetization. If you’re keen to learn more about WordPress, I’m sure you’ll enjoy it.
Thanks for reading this guide on how to add custom CSS to WordPress, and please consider using the buttons below to share it with your followers.
