In this video, you'll see how classes are used by HTML and CSS. A class is a way to name something. You'll see how we can use CSS to apply a style to something based on its class name.
Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.
Video Transcription
Let's see how classes are used by HTML and CSS. A class is a way to name something, and we can use CSS to apply a style to something based on its class name. For example, here in this code which you can see the result of this over here on the right, there might be paragraphs which we want to style differently than other paragraphs. Looking here, we see that this is a paragraph and this is another paragraph, so this paragraph right here is this one I want those to look different than the rest of the paragraphs. So how do I make some paragraphs different than others?
Up here we have a paragraph rule for all paragraphs, but I don't have a way right now to differentiate between different types of paragraphs. I need a way to name those, and there are a couple ways we can name things. One is using an ID. Now, an ID is very specific, it can only be used to name one item in the page, so if I use the name "author" as the ID, I can only use the ID of author just this one time. I can never use it ever again in the web page, but I can use it again once in a different web page in a different HTML file.
I'm going to be using a class instead. A class is a way to label or name something, but unlike an ID, you can use a class as many times as you want within a page. So you can create any class that you want and name it anything. I'm just making up a name for this, but a class is like a label. If you think about a class of people, you've got like middle class, upper class, that's classes of people. It's also just think of it as a label, like for example I'm a teacher, I'm a dad, I'm a son. Those are all different labels for me.
Within a class, like if let's say you're in a physical classroom, in the class there might be some people that are parents, some people that are teachers, some people that are whatever it is. So when you have these labels, you can have multiple people within that group that have that same label, like multiple people that are moms, multiple people that are dads. And that class name can apply to more than one person or more than one thing.
So the class of author can apply to multiple authors, and I can apply this class to as many paragraphs as I want. Now classes are just a name for anything. You can put a class on any tag, literally any tag at all, but you have to have a tag. So you have your paragraph, your strong, your H2, whatever it is, and this is just naming that particular tag. So you make up the name, you apply it to anything you want, and now in the page nothing's going to change because you just named it. You don't even see the name, but that is now a hook that I can use to refer to those things using CSS.
So now I have an author class, and I can come up here into my CSS styles and point a style at those classes. I can't just say "author" because that would imply that I have an author tag. When you just have a name here, it thinks that it's a tag. I don't have a tag called "author" because that would look like this, which is something you don't have. You don't have an "author" tag. I don't have that. I have a class, so for classes you have a period in front of your name. And if you think back to when you were in school, you had your first period, your second period, your third period, which was your first, second, and third classes. In each period, you had a class. First period had one class, second period had another class. So period is class.
So anything with a class of author, how do I want that to look? Maybe I just want to make that a little bit smaller, so I will go and change the font size down and make it small, as 10 pixels. It's going to be really small, kind of make it hard to read but you know it's less important—we don't care if so many people read it. So that makes it smaller. We can also make it uppercase. So I can do text transform uppercase like so, and that would make it uppercase. Now, let's say you didn't know that that was called "text transform uppercase". You're like, "Dan, how do you know that?". Well, there is an actual body of standards that decides all of this stuff. It's the W3C Group, the Web Hypertext Application Technology Working Group. That is a mouthful. They actually define what's called the "living standard" and on the site you can check out the actual specifications to see all of the things that you can do in HTML.
If you want to go to the original source, like the original dictionary of HTML, then you can in CSS. It's actually taking quite a long time to load because it's so big, but it's kind of like do you want to really read a dictionary to learn how to speak English? Probably not, so here it's all here in the page but it's really long. You could use a search feature, but Google is wonderfully amazing at doing searches. Like people to know about the what would group, but you're probably just going to Google CSS because that's what we're writing and you might not know it's uppercase. You just might think of it as all caps. Once you know how to target an element and maybe you just need to know a particular property, then you can look up CSS and the thing that you want to do.
In this case, here you know it is kind of talking about it although it doesn't give the CSS property directly there. Although you can see a little image there with it. So let's just click the first link just to see if this looks good here. So they go through and they say well that's lowercase and then this is uppercase and so it's a little hard to see here but it is actually in there because this page is formatted really bad but it the actual answer is in here. So on a paragraph we're doing it on a different element but it doesn't matter what you're doing it on - text-transform: uppercase. This example converts all lowercase strings as a piece of text to screaming upper case. That's a little opinionated there, so uppercase.
There probably will be some place that once you know what you want to do, you can look for it. Now some properties are easier to understand than others. Some properties have to be paired with other ones so not everything is quite as easy to figure out as an example like this, but Google is a wonderful friend for figuring out things or if you forget - you're like oh what was that property? Let me Google it and find it out.
So just wanted to point that out there. So we made that uppercase which actually makes it a little bit easier to read when it's so small and maybe you want to make it bold as well since it is so small. So we could change the font weight to bold, save that and hit refresh so now that's bold. And we could also change the color so let's say we change the color and I'm going to actually copy and paste the color that the designer sent us.
There we go. If you are a developer working with designers a lot of times designers will send you their specifications for size, weight and colors and that sort of stuff because they'll design something and say okay, can you code this and make it work right? So in a lot of cases, you'll be copying and pasting colors from design specs that you get from a designer. The link color is different that would be a discussion for another video because the links work differently - they actually have multiple different states so I'm not going to address that here in this video. But we have styled that paragraph and in all of those paragraphs because they all have that class.
Now one thing to note is they are still a paragraph, so now there are two styles that apply to these paragraphs. There is the paragraph style and then there is the author style. Now whenever those conflict one of those rules has to win. So for example, paragraphs say make the font size 14 but the author says no, no make it 10 and so it ended up winning out that the font size of 10 is the font size that won. If I delete this font size then the font size is the 14 pixels given from the paragraph size. In fact, if I delete that it would go back to the default 16 pixels that a normal web page is which would be even bigger. So when two styles try to target the same element, one of those rules has to win.
Which one is going to win? There's something called CSS specificity - how specific is a style? A tag style which says "all paragraph tags" is very generic. That is not specific, but a class you went out of your way to create a name to apply it to some (but not all) paragraphs - that's much more specific. So a class rule is more specific and therefore wins over a more generic tag style. The order of these styles do not matter - the fact that this is a class style means that it will win over the paragraph style. A lot of people think that order is what matters, but order is one of the last things that matter when it comes to CSS. The first and most important thing is specificity - if a rule is more specific then that attribute wins out over the earlier ones, but the two work together to build up a cascading of different things.
Now, let's say I'm still getting the same font family from paragraph because author is also a paragraph, so it's getting the line height. The only thing that these two styles conflict on is font size. Otherwise, everything is fine - there's no conflict other than size, so one of those sizes has to win and the more specific rule is going to override the earlier one. It's not like it deletes the paragraph rule and starts over from scratch - it builds on top of it.
Let's see one more class up here at the top - maybe there's some text up here like the latest news from the Onion. Maybe we want to gray that out just a little bit, make it a little bit lighter so that today's top national headline stands out more. For that, I would need to wrap this text here in something where I can apply a class. So a class can be added to any HTML tag, but it's got to be an HTML tag - I don't have an HTML tag in this case. So I need a tag that I can apply a class to. I can create a span tag - a span tag would visually not change anything right now. Like, if I just save this file and hit refresh, nothing changes - it just says span across this section of content. In other words, it groups it together so I can do something to that section of content. You can span across any piece of content that you want - if you just want to affect these two words, you can put a span tag around it, but I somehow need to group those things together to say I want to do something to this span of text. Now, that's a tag I can add a class attribute to - I can name it whatever I want, it's a heading.