We got this video for you so that you don’t need to spend your time in the search.
Take your PDF pre-launch checklist in 17 WordPress points: https://vid.io/xqRL
4 places to edit CSS WordPress | WP Learning Lab
To edit CSS WordPress, you must first know all the places you can find CSS. There are 4 common places. You can not have all these places on your website because some of them are dependent on the theme.
The possible CSS locations are:
1. The WordPress theme or the child theme style sheet (the one you have for sure)
2. The theme options panel (the one you can or can not have)
3. A CSS editor on every page and post (the one you can or can not have)
4. CSS Inline applied directly to the HTML elements on the page (this one you will only have if you have written it)
Let's go through each one of them.
The WordPress theme or the child theme style sheet
When you are in your WordPress dashboard if you click Appearance then Editor, you will be able to edit the theme or the child theme files.
Usually, style.css is loaded first 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.
This will open the CSS file in the WordPress editor.
At this point, you can make changes to the file and click the Update button to save your changes.
How to actually code CSS is beyond the scope of this tutorial, but you can check my CSS string here (https://www.youtube.com/channel/UCeFLITjl2v9vtIkftw9UMsw)
The danger in CSS editing directly in the main theme's style sheet is that what you create can be written when the theme is updated. You work 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 all themes have a theme options panel, but those that make the 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 advantage is that theme updates do not erase the CSS code that you create.
A CSS editor on every page and post
Some themes, like Avada and Divi, give you the ability to insert CSS code directly into the posts and pages of your website.
It's great for CSS that you want to be just a page. I only recommend doing this if you put more than 100 lines of CSS in the page.
If there are fewer than 100 lines of CSS, it is best to put them in the main style sheet to stay organized.
If more than 100 lines of CSS code should only exist on one page, your site will load a little faster by not loading all this CSS in each page.
CSS online
The last place in our list and the last place where you would like to create the CSS code is just in your HTML elements.
This is called CSS Online and can be difficult to work with two big reasons.
First of all, you can not apply CSS to more than one item at a time. So, if you want to stylize all the paragraphs on the page in the same way, you have to apply the same CSS code again and again to each p tag.
This is a pain to administer and will result in larger page sizes than necessary.
Second, if you add online CSS to many pages, it will be difficult for you to remember what you have applied CSS. Then trying to find a change will bring pain.
Inline CSS also takes precedence over CSS in the stylesheet. So you can make changes to CSS in the style sheet, but nothing happens on the page. You will go through a frustrating few minutes before understanding that the CSS is actually online on the page.
I hope this information helps you! If you have questions leave a comment below or ping me @WPLearningLab on Twitter.
————–
If you want more excellent WordPress information check out our website where we publish WordPress tutorials every day.
https://wplearninglab.com/
Connect with us:
WP Learning Lab Channel: https://www.youtube.com/subscription_center?add_user=wplearninglab
Facebook: https://www.facebook.com/wplearninglab
Twitter: https://twitter.com/WPLearningLab
Google Plus: https://google.com/+Wplearninglab
Pinterest: https://www.pinterest.com/wplearninglab/.
This content was first published here.
We inserted this video based on certain parameters as on date of insertion. Few of them are below.
Video Views: 10660
Video Rating: 4.76
