What is a CSS Class how do we color a background with it

Hi there, this video is all about a Class Selector. It's going to allow us to do this, where we style the yellow box differently from the pink box. We'll do the same thing with this P-tag. We'll make one P-tag different from the other one. That is the job of a CSS Class Selector. Let's jump in now, and learn how to make it work. 

So here's our CSS. This thing here is called a Type Selector. So it's selecting all the Div types. The problem is, it's quite generic, because every Type that happens to be a Div, do this stuff to it. And that's why we have a Class Selector. So what we want to do is, let's bin all of this. Put my 'Return's back in, I 'Tab' in. So instead of deciding all Divs on every page are the same thing, let's create what's called a Class Selector. 

So all it means is, I get to be unique, I get to say, "I'm going to create a class", to know it's a class, and not like that Type Selector we just did. You put a full stop in front of it in your CSS. Okay, that says, "I'm a Class." What kind of Class? I'm going to give it a name. You can call it anything you like. This one I'll call 'Box 1'. Then like the rest of the CSS we've been doing, it's the same. So Curly braces, Return, and then we style it. So that little full stop at the beginning means I'm a Class. 

What are we going to do to that Class? We're going to say it's a background color. Background color of yellow. Semicolon. We're going to have a width and height. Width, 600 px, by a height of 400 px. So we've got Box 1. Now there's no way of kind of connecting these two yet. So it says, "Hey, Box 1, be yellow", but down here it's like, "Well, I don't know what you're applying it to." So what you do is you leave the Div, and what you do is, afterwards, put a space and type in the word 'class'. You can see, VS code really wants to help out. If you're typing it out make sure you put in the equals and the quotation marks. 

So we have a Div Class. And what we want to do is apply Box 1. So now that is attached. The differences are, just to make sure that, when you're styling it up here in your CSS, you have to use the full stop to say, "I'm a class." Down here you have to be a bit more long-winded. So you say, 'class =', and you don't put that dot in there, it won't work. So Class, long version, short version. Now hopefully if we save, and we go test in a browser, we reset, and the first box now knows it's yellow, and it knows that it's 600 x 400. This box down here has no idea what it needs to be, so let's tell it. It's the same as before, let's make a second Class, you ready?

So 'Dot Box 2'. Put in curly braces, and we'll tell it to steal this, because we're lazy. But we want this one to not be yellow, we want it to be that pink color. Oh, that's not the color. Has to be pink. Save it. It's the wrong size and weight, size and height. 400 x 250. I just made up these sizes, you can type anything you like. 400 x 250. Save it, and now, it's not going to work. Why is it not going to work? Let's check. 'Refresh' just to confirm it's not working. It's because we haven't applied it to it. 

So we've styled it, now we need to apply it down here. So after the word Div, type in 'Class'. You can see there, the way I work, I'm going to work a little bit more shorthand as we work through. You can start writing in all the syntax if you like, but you'll notice that I hit 'space', hit 'C'. That's all I've done, and I'm going to hit Return on my keyboard, or the Enter key. And it fills in all that lovely syntax. I type in 'Box 2', hit 'Save’, and now, hopefully, 'Refresh'. Hey there, we've got a first box, and a second box, and it vaguely resembles this. Cool, huh. 

So we learnt what a Type Selector was. You don't need to remember that name, but a Class Selector for CSS is something we're going to do a zillion of in this class. And it's a way of individually targeting this. So instead of Box 1, this might be Header, this might be Navigation, and this might be Main Content. And we get to style them, color them, and size them. Let's go a little bit further and add a little bit of styling to it, and look at a Class Selector, but in a different kind of context. 

So back in VS code here I've got two P-tags, and they look exactly the same in the browser. Let's say I want to make this one a different color, and a different size. So instead of styling the P-tag like we did earlier, remember we made all the H1s, but problem is that, every H1 on every page, whereas this one, I just want this little unique guy in the first box to do something. So up here, underneath Box 1, my Box 2, I'm going to put in another class. Remember, it has a full stop. And I'm going to call this one 'Highlight'. Highlight, Highlight Text. You have to put a space in, then you have to put in your curly braces. Curly braces, next to your P key. Then we're going to say, I'd like you to be a color. And the Background Color, for the background color. It does Regular Rule Color if you want to style text. And let's say I want to make this--

What are the crazy colors down here? I'm going to make this dimgray. They spell it both ways, look at that; cool. All right, let's put in our semicolon. Let's make the font size, so 'Font Size'. Just something really big so we can kind of just easily see it. So I've saved it, now we need to apply it, and it's the same thing. I can say, you, there's a P-tag, but also a class of, dot, not dot, with a text, ‘Highlight-text’. Let's save it, let's check it. Refresh. Hey, it is bigger, and it's the gray. 

So you style the Type Selectors to do kind of big general broad strokes. Then you do little specific things using Classes. You apply them to individual little bits and pieces. You can use it twice, there's no reason why we can't say, you my friend, also have a Class of Highlight Text. And it will apply to both of them, hopefully. It didn't, and you're like, can you see why? I have no idea why. Because, now I pretend like I put that on there on purpose but that is always my problem. You might not be as grammatically challenged as I am, but I find it very hard to type the stuff in. So, like when I'm not doing tutorials, and trying to impress you with my typing speed, I copy and paste everything; 'Copy', and 'Paste', it's painfully slow, but it gets around my problem of typing the wrong word in, and then trying to fix it, not working out what it was, it's just because of typos. 

Let's delete this, and I'll show you some other tricks for kind of just making sure-- yeah, you can keep up, or fix any errors. So the easiest way is to compare against the file that I'm making. So say, it looks like you've done the same thing, but it's not actually working for some reason. Is, in your Exercise Files that you've downloaded, you will find in that folder, there's something called the Completed Files. And in here, I've zipped up, that was the fifth video that I made, this is the sixth video, so if you're watching this video, it's probably, what am I up to? I think video 10. You will find I haven't finished this video yet, so you'll find a folder in here called 010. I know, there'd be no 010, maybe 10, and you can open that up. And open up--

Let's just do one. I double clicked it, opened it up, and there's the stuff we're working on. You can just open this in VS code. So go to 'File', 'Open', and compare yours versus mine. And I'll do that throughout the course. That's one of the ways you can check your code. The other things to note, or I guess, to check, and these are the things that I find my students run into, when I'm teaching live classes. Is people forget the full stop to identify a Class, or they start adding the class dot, 'class.' down here, which you're not meant to. One that always catches people out, is they'll accidentally delete one of these, with the curly braces. And because that one opens, and then doesn't close, kind of freaks out a bit. 

You can see it's changed the highlighting color a little bit, but it's just kind of missing, so, often you can go through, click on this, find your-- click on that first bracket, and you can see, it's highlighted the closing one. If I click on this one, it won't click on it because it doesn't know where the ending is. So it won't highlight its buddy; let's put his buddy back in. There he is. Now if you click on them, they kind of just connect to each other, there we go. 

The other things are, people forgetting to put colons in, and semicolons in. Just basic syntax problems. Basic spelling mistakes, like I do all the time. We'll do a bit more error checking later on. We'll install some plugins for VS code to help us with that syntax errors, but for the moment, those are the basic ones, and that will be it for this video. Let's get on to the next one.