HTML selector types: Tags vs Classes

Hi my name is Dan and in this video we are going to look at the difference between tags and classes. Now we have looked at classes quite a bit through this class and we kinda saw them when we were down here, we applied a class to this image here. And it was a full stop at the beginning and then it said image responsive. We also did it for down here, we made it centered. We applied something called center, a full stop and then a center hyphen clock. Now that is considered a class.

Now a ta, a tag is something that’s predefined in html and that is things like the p, can you see here? There’s the p tag already made. Now tags are premade in html. A p tag is a p tag, you can’t have a q tag and get it do the same thing. P tag is a bit of paragraph text and h1 is what is considered a heading 1, an a tag is what we use for doing hyperlinks. So they’re predefined by html. Whereas our classes, we get to name and create ourselves. We get to call them, say for what we did for the banding in the back here. We called it band hyphen hero. And for that we got to give it a name and decide what it looks like. So p tags quite generic and classes are quite specific. Now the reason we need both is say I've got two bits of p tags but I want them to be different.

I want this text to be very different from the p tag in this one. If I style the p tag, great, but they would be exactly the same. So what we style some kind of generic styling to the p tag, it might just be the font and the colour. 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 lets go through and do that, lets start at the top here and let’s look at this thing, which says lets make things awesome. And what we are going to do is change it from a p tag to a heading 1. So it’s going to be the main heading on the page. Now you can do it a few different ways, down here you can see it’s a paragraph tag; I could switch this to a heading 1. You will notice that it changes, I might have to have a refresh, I do. But it becomes big and bold, that’s the default for h1s. We can go and style it, that’s fine. Or I can click it up here, there’s one here which says h1 or p tag, it doesn’t really matter which way you go about it.

Or say you prefer to do it in code, you can see down the bottom here, if I click in here, there’s my h1, it kind of highlights it down here in code view, it does normally. If it stops doing that, it does it for me, its stopped working, sometimes Dreamweaver needs a file, save all and then a close and a reopen. Actually it didn’t need to reopen in this case, so there it is there. I click on my h1 and it grabs it in the code there. So if you prefer to work in code view, you can change it remember in these two options or go into the code view here and change the beginning. Say I want this to be an h2 now, its now an h2, except I need to do the closing as well. So you got to make sure you do that beginning and the end. If I want this back to a p tag, watch this. Delete hat, you are a p tag, make sure you leave the forward slash there, put in the p tag and its back to being a p tag.

So either way you want to do it, I'm going to put him back to h1, this is how you change the tags. So what I want to do now is I want to style this tag. Lets make sure we are all where we are. And lets go into our css designer view. Lets put our style in our main.css, and here is its selector. It might default to it, its defining too much by default. You can delete everything here you just want the h1. Or you can use your up and down arrows on your keyboard. Press it up a few times, it get back just to style h1. I don’t want to style all the rest of the stuff, just him. So, I'm going to turn show set off, so it gives me all the things I want to do to it. And what I'm going to do now is I'm going to go through and I'm going to pick a, lets leave the, go to the type, lets pick a colour. And the colour for this one is going to be the same as, what are the boxes down here, that guy here. I'm going to steal it from the list of colours that we've got, there’s our h1. I'm going to copy it, make sure you get the hash as well. That’s going to Dreamweaver, h1, the colour, I'm going to replace it down here, you could pick any colour you like. And you can you see that? I've styled the h1, and that’s going to style all the h1s on every page. Generally you only need one h1 per page. And now I'm going to go through and change the size. So it says font size medium, I'm going to change it to pixels and instead of zero pixels I'm going to make this one lets say 20, actually let’s make it a lot bigger, 30, great.

So that’s how you go and style a tag. Now lets do the same thing for the p tag and have a look. So the p tag down here I want to style, so I've clicked inside here, kind of sometimes clicking this kind of helps it know when we click new selector, it 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 going to go through to my font and I'm going to change the colour to white. So I've styled all p tags, it looks like I've styled just this one but look down here, anything that is also a p tag, can you see he is white now as well? All these guys down here are white, remember there were words in here, print; they’re white so they’re really hard to see. So by changing the tag, you change all instances of that p tag.

Now you can see why classes are going to be quite useful. Say that I want just a little bit of this text to be a different colour, so what I'm going to do is lets say I want this, so lets just say this p tag at the top here, I want all 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 design in Photoshop. You can see its actually a bigger font and even bigger down here. So what I'm going to do is I'm going to create a class. So if I change the p it’s going to change them all, so lets create a class. Its in the main.css, lets click on selectors, I'm going to make one member, remember full stop goes in front, that makes it a class and I'm going to call this one first paragraph. Actually I like putting text at the front of it, just to make it easier to find, I might call it text and call this one paragraph, lets call this one first para. And what I want it to do is I want it to change the size.

So lets grab the font, lets grab the font size, lets pick a pixel and lets go to 16. Now nothing changes over here right, even though I had it selected, what we need to do with a class is, once we've created it, is go over here, can you see my p tag? You can add a class and hopefully if you put a 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 gone and applied this one. And all he does, that little class, is change the font size. But you could get it to do all sorts of things you want to do separate from the rest of the p tags. Can you see? This guys still the original size, same with the guys down the bottom here. So you can leave the p tags alone, just do some broad kind of style changes and then do some real specific ones using classes.