WordPress has evolved through the years, and today it’s a pretty flexible and easy to customize platform through its block editor, Gutenberg. Still, there will be times when you need a little more reach than the Gutenberg editor provides.
This is where custom CSS comes in handy. CSS styling allows you to edit the colors, spacing, fonts, layouts, and basically every other visual element of your WordPress website, allowing you to make it look exactly how you want.
In this article, we’ll walk you through the essentials of customizing your WordPress website with CSS.
Why Customize Your Website With CSS?
Adding custom CSS is just one of the methods you can use to fine-tune your site’s appearance. Other methods include using a well-featured premium WordPress theme, or installing a page builder.
While these two methods are a bit easier to use for beginners, and require no coding knowledge, using custom CSS is more advantageous in two main ways:
Zero Cost
Premium themes and WordPress page builders can be handy, but they come at a cost—in dollars and cents. Armed with the knowledge of how to write custom CSS, on the other hand, you can achieve the same effects without incurring any extra expenses.
Minimal Bloat
Page builders and well-featured themes are designed to give users more flexibility and a wide array of options for customizing their websites. Because of this, they tend to add bloat to websites, potentially slowing them down.
When writing custom CSS, on the other hand, you will only add the necessary features, generally resulting in lighter websites and faster loading speeds.
3 Easy Methods to Customize Your WordPress Website With CSS
Hopefully, you already know how to write CSS. Once you’re familiar with the basics, you can use any one of the following methods to add custom CSS to your WordPress website:
Method 1: Use the WordPress Customizer
With WordPress 4.7 or any version after it, you can add custom CSS directly from the admin area. This is the most straightforward method, and because there is a live preview available, you can see any changes you make in real-time.
It is also the most highly recommended one, since all the changes you’ll be making are saved within WordPress itself. This means that even if you change or update your theme, you won’t lose your custom CSS.
Here are the steps to take:
Step 1: Navigate to Appearance > Customize.
This will open the WordPress theme customizer, which shows you a live preview of your site on the right, along with some customization options on the left. Scroll down to the bottom of the left panel, and you’ll find an Additional CSS tab.
Step 2: Click on the Additional CSS Tab.
This will open up a small box in the left pane where you can add your custom CSS. You can type in as many lines of CSS code as you like. The great thing about this editor is that it validates your code, alerting you if there are any errors.
Step 3: Publish your changes.
Any valid CSS rule you add will show up in the live preview area on the right. To apply the changes to your site, click the Publish button at the top of the left pane once you are satisfied. If you don’t want the changes to take effect immediately, you can also schedule publishing at a later time or save your work as a draft.
It is important to note that any changes you make using the customizer are tied to your current theme. If you ever switch to another theme, the changes will be lost unless you copy your custom CSS and add it to the new theme. It is good practice to save all the custom CSS you add to a theme on a notepad. That way, you can simply copy the code and paste it in the “Additional CSS” section for a different theme.
If that sounds like too much work, and you prefer a solution that allows you to apply your custom CSS to any WordPress theme you use, the next method is for you.
Method 2. Use a Plugin
Custom CSS plugins store your custom CSS separate from your theme, allowing your changes to be applied regardless of which theme you use. These plugins also come with extra features like auto-completion that can make adding CSS easier.
The only drawback is that they are third-party software, which means that they can potentially slow down your site. Most of these plugins are lightweight, however, so they generally have little impact on your site’s performance. Here are some of the best custom CSS plugins you can use:
Simple Custom CSS is one of the most popular custom CSS plugins. It is lightweight, easy to use, and offers great features. Setting it up is easy. All you need to do is install and activate the plugin. Then, navigate to the Appearance section on the left pane of your dashboard.
You’ll see a new option called Custom CSS. Clicking on it will open an editor where you can add your custom CSS. Click the Update Custom CSS button to save your changes. To view the changes, just refresh your website.
If you want even more features, the Simple Custom CSS and JS plugin is a great option. In addition to adding CSS, it allows you to add JavaScript entries.
If you don’t want to write a single line of code, the CSS Hero plugin is perfect for you. This plugin offers a visual CSS editor with drop-down menus and input fields that let you edit almost any CSS style on your site without you having to write any code.
Method 3. Edit the Raw Code
The two methods we described above allow you to add custom CSS to your site without the need to touch any of your theme files. But, in some cases, you might want to edit your theme’s CSS or directly add custom CSS to your theme’s code.
To do this, you’ll need to access your website’s stylesheet. An easy way to access this stylesheet is through the Theme Editor on your WordPress dashboard.
Before we go further, though, there are a few safeguards you need to put in place. First, back up your website. While editing your theme files, it is easy to make mistakes that can potentially crash your site.
A backup ensures that you have a functional website to go back to. Next, create a child theme. If you make direct edits to your parent theme, the changes will be lost whenever the theme is updated.
Once these safeguards are in place, log in to your WordPress backend. Go to Appearance > Theme Editor. When you click on the theme editor option, you’ll see a popup box warning you against making direct changes to your theme files. If you follow the above steps, you’re good to go.
Click I understand to proceed.
After you click, you should see your site’s stylesheet by default. If not, simply look on the right pane and click on style.css under the Stylesheet option.
From here, you can make direct changes to your theme files. Just don’t forget to click Save and Update once you’re done.
Take Control of Your Site’s Appearance With Custom CSS
Learning how to write custom CSS on WordPress might take some time for beginners, but it will give you true control over the appearance of your website. And that’s at zero cost, and with minimal impact on your site’s performance.
If you’d rather not do any manual designing, however, there are other ways to get the job done, such as by using one of the top page builders for WordPress.