How to edit CSS in WordPress: 3 easy ways

Just to be on the same page…

What is CSS?

CSS is responsible for the visual design of your website.

CSS helps us select HTML elements and style them.

Simply put, it gives you control over the following aspects of your website:

1. Typography
2. Colors
3. Layout
4. Image Appearance
5. Animations

Here is how a sample CSS code looks like:

.footer-copyright{
  display:none;
}

For more clarity, read this article.

Now that we are on the same page…

The Foundations: Here are your options to edit CSS in WordPress

Editing CSS or customizing CSS could mean two things:

1. Adding new CSS to your website
2. Or editing the existing CSS code by removing and overriding some CSS rules

Adding or Editing CSS in WordPress is more of a theme-related task.

To add new CSS to your WordPress website, there are four ways:

1. If your theme supports the “Additional CSS” panel from the Customizer screen, you can add CSS directly to it.
2. Themes like Divi or plugins like Elementor provide CSS editors in many places.
3. Plugins – A plugin like Simple Custom CSS lets you add CSS to your website as well.
4. A bit of technical option – If you’re using a child theme or custom theme, you can add CSS directly to their style.css file and other helper CSS files. If you’re using a third-party theme like GeneratePress without a child theme, don’t edit their CSS files at all (more explanation on this later).

Anyway, To edit the existing CSS code:

You could only edit the CSS code of a custom theme or a child theme.

1. If you’re using a third-party theme like GeneratePress without a child theme, unfortunately, you can’t edit its CSS code. If you do so, you’ll lose your code when you update the theme (more on this later). You must use one of the above-mentioned techniques for adding new CSS code.
2. If you want to edit the CSS code of a plugin, unfortunately, that is not possible either because you’ll lose your code if you update the plugin. So, you either have to add code to the child theme or use one of the above-mentioned techniques for adding CSS code.

These are your options.

We will learn each of the above methods in a detailed way from here on wards.

Based on your specific need, use the table of contents below and start adding or editing your CSS code.

Using Additional CSS panel: The easiest and safest way to add or edit CSS in WordPress

Most of the WordPress themes in the market support something called “Customize” screen.

And the “Customize” has an option called “Additional CSS” and we can use it to add or edit CSS to our website.

We can achieve this in four easy steps:

Step 1: Log into the WordPress Admin Dashboard

Step 2: From the admin menu on the left, click on “Appearance” and then click on “Customize”.

3) Next, inside the “Customize” screen, find the “Additional CSS” panel.

It is usually located at the bottom left-hand corner of the “Custom CSS” screen. But some themes hide it under different panels.

4) Anyway, click on “Additional CSS” option to go inside it.

Once you’re inside, you’ll find a CSS code editor where you can type or paste your code.

Finally, do the CSS modifications and click on the “Publish” button to save your changes.

That’s all.

This method works with any theme that supports the Customizer screen.

Important considerations when you’re moving between themes or updating themes

If you’re using a third-party theme like Avada or GeneratePress, you can safely update the theme without losing the CSS code added to the “Additional CSS” panel.

Only file-based CSS changes made inside the third-party theme are lost when you update it. Not the CSS inside the “Additional CSS” panel.

Having said that, you will lose this additional CSS when you switch between parent and child themes or a different theme altogether.

For example, let’s just say you are using GeneratePress theme and added some CSS code to its “Additional CSS” panel.

But later, you have decided to create a child theme for the GeneratePress by understanding the value of best practices or to modify one of its PHP files.

In this case, the original GeneraPress theme becomes the parent theme and the child theme you created depends on the parent theme.

Now be careful in this scenario.

If you have added some additional CSS code to the parent GeneratePress theme and are switching to a child theme, you need to copy the CSS code from the parent theme’s “Additional CSS” panel and paste it inside the child theme’s “Additional CSS” panel.

WordPress doesn’t do this automatically for you.

This “Additional CSS” panel for the child theme is different from that of the parent theme. The child theme doesn’t use the Additional CSS of its parent theme.

The same rule applies if you’re switching back to a parent theme from a child theme.

“Got it! But bro, I use Divi, and I couldn’t find the Additional CSS option!”

Divi is a page-builder-based theme, and it doesn’t support the Customizer screen and the “Additional CSS” option.

Divi comes with its own CSS panel inside the “Theme Options” page of Divi settings.

Not just Divi, most page-based themes do not support the Customizer screen. They come with their own Additional CSS option.

For further instructions, look at the table of contents of this article and jump to your favorite page builder.

“Hey! My theme doesn’t support the Customizer screen, and it is not Divi. What should I do?”

Oh yeah, there are many themes like that, too 😛

If that is the case, we have to edit the necessary CSS files directly or use a plugin like Simple Custom CSS to get the job done.

But don’t worry.

If you know what you’re doing, editing the CSS files is the most reliable way to add the CSS code.

Here is how…

Editing the CSS of the style.css file or other CSS files inside the active theme

An active theme is nothing but the current theme of the website.

Every WordPress website has an active theme that is responsible for the design of your website.

Simply put, the active theme takes care of the look and feel of your website.

For more clarity, read this article.

And, there are three types of themes:

1. Third-party themes – Be it a free theme downloaded from wordpress.org or be it a premium theme downloaded from a marketplace like Themefortest.net, it comes under a third-party theme.
2. Child theme for a third-party theme to preserve coding changes that you make for your website
3. Custom theme – A tailor-made theme that is coded specifically for you by a web developer

Edit the CSS code inside the style.css file of a third-party theme

Unfortunately, we can’t directly add CSS code to a third-party theme because you will lose your CSS code when you update the theme.

For example, in the video below, I demonstrated how adding custom CSS code to a third-party theme is not a good idea:

Third-party themes like GeneratePress or Avada are the kind of themes that receive regular updates from their developers.

And those updates could be about:

1. New designs
2. Security updates
3. Code upgrades

So, it is important that we update the third-party themes regularly.

But whenever you update a third-party theme, all the CSS changes and other code changes you made inside the theme are lost because a theme update replaces the entire old theme folder with the new version.

And this is where a Child theme comes in.

What is a child theme?

A Child theme let’s you extend and customize the parent third-party theme.

It helps you override certain parts of the parent theme without affecting the parent theme.

And the best part is, you can preserve all the changes you make inside the child theme.

Simply put, even if you perform updates on the Parent theme by downloading the new version, those updates will not impact the code you out inside child theme.

How to add CSS code to the child theme

First, we need to create a child theme and you can learn how to do it by reading this article from WPBeginner website.

You can also search for a blank child theme on the internet.

Just type “Theme name child theme”.

For example, if the theme name is “Neve”, search for “Neve Child theme” and most probably, you’ll find the pre-coded child theme on the theme developer’s website it self.

In my case, I found it on the Neve theme’s documentation website.

Anyway, I have now downloaded the child theme from the above resource, uploaded it my website where the parent Neve theme is active.

Finally, I have activated the theme:

Once the child theme is active, there are two ways add or edit its CSS code:

1. By accessing the style.css file of the child theme via FTP
2. By accessing the “Theme file editor” screen

By accessing the style.css file of the child theme via FTP

The most reliable and secured way of editing the CSS files is by using something called FTP Client.

If you have no clue about what FTP means, read this article and comeback here after doing following:

1. Log into your web hosting account
2. Create an FTP account
3. Log into your FTP account via FileZilla software
4. Go inside the “public_html” directory to find your WordPress files

Next, we need to find the child theme’s directory.

Theme files are located inside the “wp-content” directory.

Double click on the “wp-content” directory to go inside it.

Next, go inside the “themes” directory.

Then, go inside your child theme’s directory:

Next, find the CSS file you want to edit. Usually, it will be the style.css file.

To edit style.css file, right-click on it and then select on “View/Edit”:

This will open up the CSS file inside the Text editor installed on your computer.

I have a Code Editor called Sublime Text installed on my computer, so the CSS file got opened using it:

Once the CSS file is open, add new CSS code or edit the existing code and save the changes.

Important: If you’re editing the style.css file of your child theme, please do not change or remove the CSS comment at the top of the style.css file. If you modify it, WordPress might not recognize the child theme at all and your website could break.

That’s all.

That’s how you edit the CSS in WordPress using FTP.

Edit the CSS code inside the style.css file of a custom theme

If you have a custom theme, you don’t have to create a child theme at all because custom themes do not get updates like third-party themes.

So, you can directly edit the CSS files of a custom theme by using the same FTP process mentioned above.

“Hey! I don’t have access to the FTP credentials. What do I do? :(“

It’s okay. There a couple of other methods.

Editing the CSS code using the “Theme file editor” screen

I don’t recommend this approach for security reasons.

But if you don’t have access to the “Additional CSS” panel or FTP credentials, the “Theme file editor” screen is one of the better options when compared to using a plugin for the job.

Anyway, you can access the “Theme File Editor” screen by going to:

WordPress Admin Dashboard → Appearance → Theme File Editor

Once the Editor is open, it selects the style.css by default.

1. If not, click on the style.css file or any other CSS file to open it.
2. Add or Edit CSS
3. Save the changes by clicking on the “Update File” button.

That’s all.

“Brooooooo!”

Hahaha. What?

“For some reason, I can’t find the Theme File Editor at all. Am I missing something?”

As I said before, there are security concerns around using the “Theme File Editor”.

So, some plugins or developers will disable the File Editor altogether.

That’s why you’re not finding it.

“Then how should I edit my CSS?”

Don’t worry.

We have our final resort 😛

Adding or Editing CSS via plugins

Go to WordPress Admin Dashboard → Plugins → Add New

Next, search for “Simple Custom CSS Plugin”, install it, and activate it.

Once the plugin is activated, it adds a new screen called “Custom CSS” and you can access it by going to:

WordPress Admin Dashboard → Appearance → Custom CSS

1. First, click on “Custom CSS”.
2. Next, add the CSS code inside the editor (located in the middle)
3. Finally, click on the “Update Custom CSS” button to save the changes.

It works similar to the “Additional CSS” panel inside the “Customize” screen.

The reason why I am teaching this last because adding CSS code via plugins could slow down your website and has the same security risks of adding CSS code via the “Theme File Editor”.

Lastly, let’s take a look at how to edit CSS custom inside the Divi theme.

Adding or Editing CSS for the Divi theme

Divi theme doesn’t support the “Customizer” screen. So, you can’t access the “Additional CSS” panel either.

So, your options for editing CSS are:

1. Creating a child theme for Divi and editing its CSS file using FTP client or Theme File Editor.
2. or by using the “Custom CSS” option from the theme options

How to use “Custom CSS” to edit CSS in Divi

Make sure you’re logged into WordPress Admin Dashboard.

1. From the admin menu on the left, Find “Divi” menu item and then click on “Theme Options”
2. Next, make sure you’re on the “General” tab and scroll down to the bottom of page to find the “Custom CSS” option. Once you find it, edit the CSS code.
3. Finally, click on the “Save changes” button.

That’s all.

I will see you in the next article.