Do you want to know how to change your font colors, background colors, or layout on your WordPress website? Check out this video to better understand how to do that easily with CSS.
https://www.youtube.com/watch?v=rHtIMcUGQjg
Plugin for Custom CSS Box – https://wordpress.org/plugins/simple-custom-css/
Video Transcript
Hello, Everyone. Welcome to another WordPress Wednesday. Today I want to walk you through “What is CSS?” So many of y’all are total beginners that watch my channel and sometimes you hear about CSS and you’re not really sure what it does or how it actually affects your website.
So, here it is: CSS actually means “cascading style sheet.” What that means is that it is one file on your website, typically one main file on your website, that allows you to set the formatting and the layout or the look, if you will, of your website, right? It basically depicts whether or not your links on your website (let me slide this around for a second and shrink myself down here), it is going to say whether or not your links are blue like this or what type of font and what size font you’re going to be using on your website. It is going to set that your H1’s are, you know, this size font which is maybe a 24-size font and that this size font here would just be a 12. It is going to do all that.
It is also going to say how much padding or space is in between each paragraph. It basically affects every bit of your website. So, it is going to say up here that this blue color is going to be blue. So, the colors, the fonts, and kind of padding or the layout is what it effects on your website. The reason why it is so important is because if you ever wanted to change all these blue links to be—maybe you would want to change them out to be red—you could just go into one file and make that change in one particular line and every single page on your whole website (where) this one file will cascade through your whole website and make that ripple effect take place instantaneously versus old school days (when) we used to have to code every single page by itself, right? So, if we wanted to change this blue colored link to be red, we would literally have to go into every single page on our website and make that change. You can spend your LIFETIME making these changes. So, a cascading style sheet is super, super, super important to have; and whenever you are using WordPress, you naturally have one.
Alright, so, you go to your dashboard area; you go to your Appearance area, and you are going to see an Editor button. The very first screen that you see here (I am going to shrink myself a little bit more even), you see this right here, it should say “style.css.” That is your style sheet, and it is typically a very long sheet and you can see all this fun stuff in here that affects the look and the feel. You see right here there is an H1; so, whenever you set your header tag on your page, it’s telling it what size font to be. And, as you go down through here, you can see that the author has coded basically every element on the website and given it some sort of element to affect it, whether it’s “display” or “inline,” whether it has a margin around it. You can see as we scroll down through here some other options. This tells you what padding is going to be around it and the line height of it. As you scroll through here, literally every single styling is effected here. Here is your “Post styling” and what those look like. There is a color code of what color the links are going to be.
So, all this fun stuff in here is how the author in your theme has set the look and the feel to be. If you ever want to make changes to those things, this is one area that you could come to make those changes. However, you also want to remember that whenever you go to update your theme that this particular file will more than likely get overwritten back to its original “default” styling. So, if you ever wanted to have some sort of customization happening here, what are you going to need?
Total beginners might not know this yet, but if you have ever taken any of my classes or watched any of my other videos, you know you need what’s called “a custom CSS box,” right? A lot of authors these days are putting that inside your theme’s options area or your customized area. You might have a box that looks something like this called “Custom CSS.” So, if you ever wanted to overwrite a certain styling that your author has done naturally—a font color, a padding, maybe you want to hide a whole section of your website and you can’t figure how to turn it off—there is a way to do that in your style sheet by doing “display none.” That’s a really cool little style sheet capability, and you can just do that by coming in here to your style sheet area and adding that in. In this particular box, if you have a “custom CSS” box, will never be overwritten if you ever have to do an update for your theme, which is really, really great. This is kind of a great way to cheat without having to build a child theme. So, this is a wonderful thing. If your author has not allowed you to have a custom CSS box, there is a plugin for that that you can just easily, quickly just plug in and all of a sudden you’ve got a box now that you can tinker in and add all your different coding there.
So, this month, coming up in February, I want you to follow us on YouTube.com because every single Wednesday, I am going to be dealing with style sheet stuff. I am going to be showing you some really great beginner style sheet codes that you come in here and understand exactly what you are reading, alright? Every single one of these things are different things that you can affect your website with, and I am going to show you how to do that.
I already have beginner tips right here. I am going to give you the link inside the description box below; so, we already have something that you can easily and quickly read through to see how to change your font color, sizes, remove a border around images, change a background color—all sorts of fun things here that you can read and see how to do. So, I am going to give you that link. But, coming up in this month of February and for the next four videos, I am going to be giving you CSS tips.
I hope that helps. Be sure to subscribe to our channel. I’ll put the link right here so that you can catch a video every single Wednesday. Have a great day, y’all! Bye, bye!
