If you’ve ever wanted to play around with CSS and learn what a div class is and how to write one – here’s a quick video to walk you through it.
Full Video Transcript provided by Mally LaPete
Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton here at WebTegrity in San Antonio, Texas.
This WordPress Wednesday we’re going to be talking about Div classes. I understand that sometimes CSS can be a little bit intimidating, especially to those that don’t exactly understand how to write nerd code. So, if you’re trying to go in and make some changes to your WordPress website, and you’re kind of turned around on it, and you really don’t either understand what a div class is, or maybe you understand it but want to figure out how to write your own, play around with some of your own styling … I’m going to teach you how to do that. Really super simple. I’m going to walk you through step-by-step so that you’re not overwhelmed. All right!
Before we get started I need to give a shout out really quickly to our three awesome sponsors that cover our classes here in San Antonio, and even online. So be sure to check us out at WebTegrity.com to learn more about our classes. We love WP Engine. They’re incredible hosting. I just had a client call me today and say that she switched over to them and it blew her mind at how amazing their support is, as well as their staging environment, and backups, and restoration for any errors that might happen on your website. Phenomenal. And you’ll also have incredible speed.
Then there’s also WP Elevation. If you’re a freelancer using WordPress, you need to check out their tracks. Incredible direction on how to grow your brand and grow your business. Then there’s WP 101. If you love WordPress tutorials like you’re watching right now, get ready to have your mind blown. Go check them out because they take video tutorials for WordPress to the next level. Here we go! Are you ready to learn some nerd code.
I’m gonna shrink down so you all can kind of check this stuff out. Let’s see. So, I’m actually over in an environment that you can go to right now. I’ll put the link in the description box below in case you can’t check this out. This is where you go. Watch this. It’s just codepen.io I’m going to click enter. It’s going to ask me, “Are you sure you want to leave?” It comes here. What I want you to do is just click New Pen. Up here at the top, click New Pen. They’ve got a couple of different layouts. Let’s see if I can show you this. I can’t show you. At the very bottom of the screen they’ve got a few icons down here in the bottom corner of the screen, right down here. Okay.
You can choose your layout. This is the layout I like. We don’t need Javascript right now so we’re just going to stay here in HTML and CSS for the time being. I’m going to teach you what a Div Class is. All right. You know how whenever you start your WordPress website a lot of times it just says, “Hello world.” And this is my text happening right over here. HTML. All HTML is is text intermingled with a little bit of nerd code which is the actual HTML that gives it structure. That’s all it is. I want you to think of a div class — if you understand what I’m saying right now — it’s this
Whatever content you want inside that container, you can assign different styles to, different font sizes, different color background. You can do whatever you want to inside of that container. This is like a shipping container: we’re going to put everything inside of that box. Then, on the outside of that box, we’re going to say whatever label we want to address. That’s how we know how to affect it inside the CSS. Are you following me? Watch this. Don’t say, “No” yet. You’re following me. Here we go.
I’m going to give this a class which is the label for it. That’s all it is. You open quote and close it. We want to jump ahead right now and at the end of this Hello world we want to close our box, or close our div tag. This basically says we’re going to open the box here, we’re going to put Hello world inside of it, and we’re going to close the box after it. This is our div class. In order to make changes to the content sitting inside of here, we’ve got to give it a unique name, which is our class. Name. And then that’s how we address it inside or our CSS. I’m just going to call this right here “header title” That’s what we’re going to call this. Nothing should change here. Nothing should change yet.
We need to go address things to hello world. We need to go give it some styles. We’re going to go into our CSS which applies style. We’re going to put a period (that stands for class) and we have to do it verbatim so header-title is how we open this, and then it closes. Inside the header title, I’m going to say that I want this hello world to be right dead center in the middle of my screen. We’re just going to say text-align: center. Look at that. Look at this slide over right here. It slide over right there. And what if I wanted to say I want my font size to be ginormous. Let’s say font-size: and I’m going to say 44 pixels. Nice and big. Whoa! Look at that bounce out. That’s pretty incredible. Let’s see if we can go even crazier.
Let’s say background-color. We’re going to give it some background color. You have to put a hashtag there. #eaeaea. And you can play around with all the different color codes. Look at that nice little grey that came in there. And let’s give it some padding around it. Let’s say padding: and lets give it some 40 pixel padding. So it’s nice and big. Do you see how everything inside of this div class is being affected.
What if I put something down below this div class? “this is a sentence” Look at this. This appears outside of my box that I built because it’s outside of this div class. Do you see what I’m doing here? Outside of the div class sits my box, “this is a sentence” If I wanted “this is a sentence” — this little area right here — to do something else, to look different, I could assign a different box, or a different divider — div class. That’s all you’re doing with div classes. How does that apply to WordPress? I’m going to switch over to WebTegrity’s website.
I want you to see that everything inside of our website is coded in a different div class. This orange tag up here at the very top, this is all sitting in its own div class to tell it to have an orange background. Then it switches over to the menu and it says have a blue background. The way you find those things out if you’re trying to troubleshoot, or figure out what your author may have called that div class so that you can overwrite it (we’re thinking ahead) …
I actually browse with Firefox. I’ve trained with you guys before on some other videos. I use their add-on, their free add-on called Firebug. I can come in here. It’s basically an inspect element. That’s all it is. I’m going to go up here to this top line and I’m going to see that this div class — look right here if you can — this div class is called “top header container.” I’m going to move out of the way here. So I want you to see that this says “top header container” in my style sheet.
This is our HTML; this is our style sheet (our CSS file) and look at this. This little area right over here is our orange. If we wanted to change that to our grey that we were just playing around with, we could say #eaeaea. And look at that. This top line up here just changed from orange to grey. That’s how you go in and use the idea of div classes inside of your website. How cool is this, you guys? I have another video about the basics of CSS. I will put the link in …
Actually, I’m going to put the link just right here for you so you can click on that and, again, get another perspective of what CSS is, how it affects your website, but this was more trying to understand specifically what a div class does and is. I’m going to give you one more link that you’re going to be able to play around with. It is over on W3 schools. You can go over to W3 schools. I’ll give you a link in the description box below that you can click on.
I want you to come here and I want you to click on this green box right here that says “Try it Yourself.” Because when you do, it’s going to open up a screen very similar to what we were just playing with over on CodePen. I want you to see that the div classes that are assigned here are unique in some ways. You’ve probably seen this one before. The
means paragraph. That’s actually, in a sense, a div class. It’s just one of those that always exists so it doesn’t have to have the word div in front of it. The word <body> is another one. This says the entire <body> of our website. It has an open and a close, just like the paragraph has an open paragraph here <p> and a close paragraph </p>.
In a sense, these are kind of like div classes. You’ve probably seen them also with the <H3> or <H1> header tags. We’re putting it kind of in bookends, or in the open box, then we close the box. Same concept completely with using a div class here. You can play around with some of these things and see the results immediately right over here. How cool is this, you guys? I hope you’re nerding out with me and that you’re understanding a little bit more about div classes and CSS inside of your WordPress website. If you do make changes to any of your stylesheets, you can always go to your custom CSS box inside of your WordPress website and drop in all of your changes here and that completely overrides whatever your author did. And it’s safe whenever you’re doing updates. You don’t need a child theme if you’re using some sort of a custom CSS box to do edits.
I hope you’re having a great day. Be sure to subscribe to our YouTube channel over here in the corner. Click that little play button that says Subscribe to our channel so that you’re checking us out every single WordPress Wednesday here on YouTube. We’re giving you all sorts of great goodies for WordPress.
Hope you’re having a great one. Catch you next week. Bye bye, y’all.
