4 places to edit WordPress CSS | WP Learning Lab


Get your free 17-point WordPress pre-release PDF checklist:
4 places to edit WordPress CSS | WP Learning Lab

To edit WordPress CSS, you must first know all the places where you can find CSS. There are 4 common places. You may not have all of these locations on your website because some of them depend on the subject.

The possible CSS locations are:

1. WordPress theme or secondary theme style sheet (this is safe)
2. The theme options panel (this may or may not have)
3. A CSS editor on each page and publication (this may or may not have)
4. Online CSS applied directly to the HTML elements on the page (this will be only if it is written)

Let's review each one.

WordPress theme or secondary theme style sheet

When you are inside your WordPress panel if you click on Appearance and then on Editor, you can edit the theme or secondary theme files.

Usually, the style.css is first loaded by default. If it is not loaded, look for the style.css file in the list of files on the right side of the editor page. When you find it, click on it.

That will open the CSS file in the WordPress editor.

At this point, you can make changes to the file and click on the Update button to save the changes.

How to encode CSS really is beyond the scope of this tutorial, but you can check my CSS channel here (

The danger of editing CSS directly on the main theme style sheet is that what you create can be overwritten when the theme is updated. To solve this problem, create a secondary theme (see a tutorial on how to create a secondary WordPress theme here:

The theme options panel

Not all themes have a panel of theme options, but those that make WordPress CSS much easier to edit. You can simply add CSS to the CSS box in the theme options and click on Save Changes.

The good thing is that theme updates will not erase the CSS code you create.

A CSS editor on each page and post

Some topics, such as Avada and Divi, give you the option of inserting CSS code directly into the publications and individual pages of your website.

This is great for CSS that you want to be just one page. I would only recommend doing this if you are putting more than 100 lines of CSS on the page.

If you have less than 100 lines of CSS, it is better to put them on the main style sheet so that it stays organized.

If there are more than 100 lines of CSS code that only need to exist on one page, then your site will load a little faster in general by not loading all that CSS on each page.

CSS online

The last place on our list and the last place where you want to create the CSS code is in your HTML elements.

This is called CSS online and it can be difficult to work with it for two great reasons.

First, you cannot apply CSS to more than one element at a time. So, if you want to design all paragraphs on the page in the same way, you must apply the same CSS code over and over to each p tag.

It is difficult to manage and will result in larger page sizes than necessary.

Second, if you add CSS online to many pages, it will be difficult to remember in which CSS it was applied. Then, trying to find it and make edits will become a pain.

CSS online also has priority over CSS in the style sheet. Therefore, you may make changes to CSS in the style sheet, but nothing happens on the page. It will take a few frustrating minutes before discovering that CSS is really online on the page.

I hope this information helps you! If you have any questions, leave a comment below or send me an email to @WPLearningLab on Twitter.


For more excellent WordPress information, visit our website where we publish WordPress tutorials daily.

Connect with us:

WP Learning Lab Channel:



Google More: