This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Class Attributes" Lesson
[00:00:00]
>> Brian Holt: So classes are a special type of attribute, anything can have a class on it. There are some things, there are many things you'll not use classes for, but any tag can have a class. So, what classes are for, they in and of themselves don't do anything. So if you give something a class, it's not necessarily going to do anything by itself.
[00:00:25] But it's basically like you sticking, like, a post-it note on that and saying, like, this is this kinda theme, right? So, I can have ten different kind of divs on my page and you're making like, this is a blog post div. And this one is a navigation div.
[00:00:40] And it's like, you're labelling each one of them at different kind of div. Right, because there is not that many tags so you could use a different kind of tag for each one. So you need to kind of be able to invent your own sort of labeling system.
[00:00:53] That's really what this is, is you're just labeling things here. In summary, the way that CSS works is that you make rules for things, right? So you're saying if this is a div, it's colored green. However, if you have a a large website, like something like Gmail, you have literally thousands of divs.
[00:01:14] So you can't just say all divs are colored green, because you don't want everything colored green on Gmail. That doesn't make any sense. So, what you do is you basically say, this is a blog post div, and I want all blog post divs colored green. So you're saying like, affect only these kinds of divs.
[00:01:33] So, if you go back to our house analogy, you don't wanna say every two by four that I have goes on the south wall, because then you don't have any two by fours for the other three walls, right? So what you'll do is you'll mark some of the two by fours.
[00:01:47] Like, these are south wall two by fours, and only those ones go on the south wall, and then these ones can go in other places, right? So that's what classes are for. They allow you to label things so that different things can affect them, both from CSS and from JavaScript.
[00:02:04]
>> Brian Holt: What you name them ends up being important. Not because, it was actually div there, it's not important for screen readers, that's one thing that I wanted to point out. Is that the classes are not used by anything else other than you. So, if you give them a bad name, the only person that you're kind of like screwing over is yourself.
[00:02:26] [LAUGH] And your future coworkers and such. So, make sure you name them good things, and I'll give you some suggestions here in just a second about what to name them.
>> Brian Holt: So you can see here, I kinda gave you an example of what this might look like, giving things good names.
[00:02:44] So that's what this class equals business looks like. So this is a header div. This is a header-title. These are blog posts. This is a post. This is a post, right. Notice that I have multiple posts, right. It makes sense if you're going through a blog, they have multiple posts on there, right.
[00:03:03] So, you would call each one of them a post, so that you can style them the same way. You can make JavaScript affect them in the same way. And you can see that's what this looks like right here. So my blog will look like this. And I used CSS to make these look like this.
[00:03:20] So that's why they look, we'll talk about how to do that in the next section or two sections. So, yeah, the reason why I called this a post and this a post is because I wanted them both to have these grey outlines. And if I didn't call them the same thing, if I called this something else,
[00:03:42]
>> Brian Holt: Notice it lost its border, right? But as soon as they're both called post, then they both have that gray border, because I made CSS rules that affect post.
>> Brian Holt: Any questions about classes? Does that make sense?
>> Brian Holt: Cool.
>> Brian Holt: So, yeah, I have multiple posts on the same page, and that's why classes are really useful, is because they are very reusable.
[00:04:25] So, if I make a post here, even if I go to another part of my website, I can still use that post class that I created.