Best Web Hosting

4 Places To Edit WordPress CSS | WP Learning Lab - Best Webhosting

Thanks! Share it with your friends!

URL

You disliked this video. Thanks for the feedback!

Sorry, only registred users can create playlists.
ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY
4 Places To Edit WordPress CSS | WP Learning Lab

Watch Wordpress WPLearningLab Video: 4 Places To Edit WordPress CSS | WP Learning Lab.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
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 (https://www.youtube.com/channel/UCeFLITjl2v9vtIkftw9UMsw)

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: https://www.youtube.com/watch?v=Z8n1h-85SMQ).

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.

I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.

--------------

If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.

https://wplearninglab.com/

Connect with us:

WP Learning Lab Channel: http://www.youtube.com/subscription_center?add_user=wplearninglab

Facebook: https://www.facebook.com/wplearninglab

Twitter: https://twitter.com/WPLearningLab

Google Plus: http://google.com/+Wplearninglab

Pinterest: http://www.pinterest.com/wplearninglab/

Published:
Category: Wordpress WPLearningLab
82 Views

Related Videos

RECOMMENDED WEB HOSTING

FASTCOMET

Fastcomet

HOSTGATOR

HOSTGATOR

BLUEHOST

BLUEHOST

SITEGROUND

SITEGROUND

A2 HOSTING

A2 HOSTING

HOSTINGER

HOSTINGER

DREAMHOST

DREAMHOST

ACCU WEBHOSTING

ACCU WEBHOSTING

MILESWEB

MILESWEB

HOSTPAPA

HOSTPAPA
RSS