4 Places To Edit WordPress CSS | WP Learning Lab

4 Places To Edit WordPress CSS | WP Learning Lab

To edit WordPress CSS you first need to know all the places you can find CSS. There are 4 common places. You may not have all these locations on your website because some of them are theme-dependent.

The possible CSS locations are:

1. The WordPress theme or child theme stylesheet (this one you have for sure)
2. The theme options panel (this one you may or may not have)
3. A CSS editor on each page and post (this one you may or may not have)
4. Inline CSS applied directly to HTML elements on the page (this one you will have only if you’re written it)

Let’s go through each one.

The WordPress theme or child theme stylesheet

When inside your WordPress dashboard if you click on Appearance then Editor you will be able to edit theme or child theme files.

Usually the style.css is loaded first by default. If it’s not loaded find 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 WordPress editor.

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

How to actually code CSS is beyond the scope of this tutorial, but you can check out my CSS channel over here (

The danger in editing CSS directly in the stylesheet of the main theme is that what you create may be over written when the theme updates. You get around this problem by creating a child theme (see a tutorial on how to create a WordPress child theme here:

The theme options panel

Not every theme has a theme options panel, but the ones that do make WordPress CSS so much easier to edit. You can simply add CSS to the CSS box in the theme options and click save changes.

The upside is that theme updates won’t erase the CSS code you create.

A CSS editor on each page and post

Some themes, like Avada and Divi, give you the option of insert CSS code right into the individual posts and pages of your website.

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

If it’s less than 100 lines of CSS you’re better to put into the main stylesheet so you stay organized.

If it’s more than 100 lines of CSS code that only need to exist on one page then your site will load a little bit faster overall by not loading all that CSS into every page.

Inline CSS

The last place in our list and the last place you’d want to create CSS code is right in your HTML elements.

This is called inline CSS and can be difficult to work with for two big reasons.

First, you can’t apply the CSS to more than one element at a time. So if you want to style all the paragraphs on the page in the same way you have to apply the same CSS code over and over again to each p tag.

This is a pain to administer and will result in larger than needed page sizes.

Second, if you add inline CSS to lots of pages it will be come difficult to remember what CSS you applied where. Then trying to find it an make edits will become a pain.

Inline CSS also takes precedent over CSS in the stylesheet. So you might be make changes to CSS in the stylesheet, but nothing is happening on the page. You’ll go through a frustrating few minutes before you figure out the CSS is actually inline on the page.




Connect with us:

WP Learning Lab Channel:



Google Plus:


Fuente – Source

4 Places To Edit WordPress CSS | WP Learning Lab

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Enjoy it 😉


Publicado en Soluciones (Problems solved), Temas (Themes), Tutoriales (Tutorials), Wordpress y etiquetado .

Deja un comentario
