Hi, my name is Dan and in this video we're gonna look at  the difference between tags and classes. Now we've looked at classes quite a bit through this, um,  through this class and um, we kind  of saw them when we were down here. Um, we applied a class to this image here  and it was a full stop at the beginning  and then it said image responsive. And we also did it from down here. We made these centered, okay. And we applied something called center, uh, full stop.

Then a center Hyen block. So that is considered a class. Now a tag. A tag is something that's predefined in HTML  and that is things like the P okay? You can see here, this is the P tag already made. Now tags are pre-made in H TM L, okay?

Ptag is a PT tag. You can't have a Q tag and get it to do the same thing. PT tag is a bit of paragraph text,  and H one is what's considered a heading one. Uh, an A tag is what we use for doing hyperlinks, okay? So they're predefined by HTL, whereas our classes, we get  to name and create ourselves. We get to call them, say we did  for these banding in the back here, okay?

We called it, uh, band hyphen hero,  and that we got to call, give it a name,  and we got to decide what it looks like. So, uh, PT tags quite generic and classes quite specific. Now, the reason we need both is that, say  that I've got two bits of PT tags  that I want 'em to be different. I want this text to be very different from the P tag. And this one, if I style the P tag, great, okay,  but that'd be exactly the same. So what we do is we style kind  of some generic styling to the P tag.

It might be just the font and the color,  and then we get to add classes to the individual pieces  of text to kind of tweak it or change it a little bit. So let's go through and do that. Let's start at the top here  and let's look at this thing  that says, let's make things awesome. And what we're gonna do is change it from a  p tag to a heading one. Okay? So it's gonna be the main heading on the page.

Now you can do it a few different ways. Uh, down here you can see it's a paragraph tag. Um, I could switch this to a hitting one  and you'll notice that it changes. Okay? It might have to refresh, I do  and becomes big bold, okay? That's the default for H ones.

We can go install it, that's fine. Um, or I can click it up here. There's one here. It says H one or PT tag. It doesn't really matter which way you go about it. Also, you prefer to do it in code.

You can see down the bottom here, um, where we go. If I click in here, here's my H one, I click on it, it kind  of highlights it down here in code view. It does normally, if it stops doing that, okay,  it's done it for me, it stopped working. Sometimes Dreamweaver needs a bit of a file. Save all and then it close and a reopen. Okay?

Actually didn't need to reopen in this case. Um, so there it is, there. I click on my H one  and it grabs it in the code there. So if you prefer to work in code view,  you could change it member in these two options  or just go into the code view here and change the beginning. Okay? So I want this to be an H two now,  it's now an H two accept.

I need to close do the closing as well. So you gotta make sure you do the beginning and the end. If I want to do this back to a  PT tag, watch this, delete that. You are a P tag. Make sure you leave the forward slash there  and put it in a PT tag and it's back to being a PT tag. Okay?

So either way you wanna do it,  I'm gonna put 'em back to H one. This is how you change the tags. Okay? So what I wanna do now is I wanna style this tag. So let's go and do that. I'm gonna hit file save all just  to make sure we're all where we are.

And let's go into our CSS design view. Let's put our style in our main css. And here it says selector. It might default to it. It's, it's defining too much. By default.

You can delete everything here. You just want the H one. Or you can use up and down arrows on your  keyboard up a few times. Gets back just to style the H one. I don't wanna style all the rest of the stuff, just him. So, uh, I'm gonna turn show set off.

Um, so it gives me all the things I wanna do to it. And what I'm gonna do now is I'm gonna go through  and I'm going to pick, uh, let's leave the,  let's go the type, okay, let's pick a color. Okay? And the color for this one is gonna be the same as um,  one of the boxes down here. Um, That guy there,  and I'm gonna steal it from that  list of colors that we've got. There is our H one.

Gonna copy it. Make sure you get the hash as well. And let's go into Dreamweaver. H one, the color. I'm gonna replace it down here. You can pick any color you like  and you can see that I've styled the H one  and that's gonna style all the H ones on every page.

Generally you only need one H one per page. Okay? And now I'm gonna go through and change the size. So it says font size, medium. I'm gonna change it to pixels. And instead of zero pixels, I'm gonna make this one.

Let's say 20. Okay, actually let's make it a lot bigger. 30. Great. Awesome. So that's how you go and style a tag.

Now let's do the same thing for the P tag and have a look. Um, so the P tag down here, I wanna style. So I've clicked inside here, kind  of sometimes clicking this kind  of helps it know when we click new selector  kind of guesses the right one. If it doesn't say it guesses the total wrong one. You can just type in P and click enter. It doesn't really matter what you've got selected over here,  just type it in, hit enter.

And I'm gonna go through to my font  and I'm gonna change the color to white. Okay, so I've styled all P,  it looks like I've styled just this one. But look down here anything that is also a PT tag. You see, here's white now as well. All these guys down here are white, okay? Remember there was words in here, uh, print, they're whites.

They're very hard to see. So by changing the tag,  you change all instances of that P tag. And now you can see why classes are gonna be quite useful. 'cause say that I want just a little bit  of this text to be a different color. So what I'm gonna do is, let's say I want this, um,  So let's just say this P tag at the top here. I want all the generic P okay,  or the generic P tags to be that size.

That's fine the way it is,  but I want this top one to be a little bit bigger  to match my, uh, design in Photoshop. Okay? You can see it's actually, uh, bigger font  and even bigger down here. So what I'm gonna do is I'm gonna create a class, okay? Because if I change the P, it's gonna change them all. So let's create a class.

It's in the main CSS. Let's click on a selectors. I'm gonna make one member full stop goes in  front that makes it a class. And I'm gonna call this one, uh, first paragraph first. Actually, I like putting text at the front of it just  to make it easier to find. Actually I might, yeah, call a text  and call this one, uh, paragraph.

Now let's call this one first P, okay? And what I wanted to do is I wanted to change the size. So let's grab the font, let's grab the font size,  let's pick a pixel and let's go into 16. Now nothing changes over here, right? Even though I had it selected. What we need to do  with the class is once we've created, it's go over here  and you see my PT tag, you can add a class  and hopefully if you put full stop in  and you start putting in text and a hyphen,  and then you put in F for first  and can you see it's gonna apply this one  and all he does that little um,  class is change the font size,  but you can get it to do all sorts of things you want to do  separate from the rest of the P tags.

And can you see this guy's still the original size? Same with the guys down the bottom here. So you can leave the PT tags alone just  to do some broad kind of style changes  and then real specific ones using classes. Alright? And hopefully  that explains a little bit about tags versus classes. Tags are predefined,  already written things like the P tag or the H one.

And then classes are used to modify those tags. So you do some basic adjustments to the tags  and then little extra bits using the classes.