FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 IDs and Classes

[SOUND] In today's lesson, we're going to be taking a look at IDs and classes. And these are simply ways that we can assign labels to specific elements so that we can then target them within our style sheets. Let's look at an example. As you can see here, I have a blank page with an unordered list with just a bit of gibberish here. Our goal is, we want to make this list item have a color of red. So if you want, you can pause and see if you can figure out how you would do it. Now, in a previous lesson, I showed you how to link to an external style sheet, and this is very important. It's a best practice. Do this in your projects. However, there's also another way that we can do it, and this referred to as inline CSS. And this can be helpful if you have a very small project, or let's say you're working on a very tiny demo and you want to send it off. Sometimes, it doesn't make sense to have extra files when it's so small. In this case, within the head, we're gonna learn a new element, and this is called style. Now, we can add CSS properties within here the same way we would as if it was a style sheet. Just note within the head of your document, wrap everything within a style tag. Now, to give you an example, if we set the body, and we set the background color of the body element, meaning the wrapping body element is going to have a background of red. Let's try that out. And as you would expect, the CSS is being applied correctly. Good. So now, let's back to our assignment. We need to make this third list item right here red. How would you do that? Well, let's try a couple examples first. We can search for all list items, and we're gonna make the color red. If I refresh, as we would expect, every single list item is being applied, but in our case, we need a way to target this one exclusively. Now, I'm gonna show you three different ways that we can do this, easy to hardest. So the first option is to use an identifier. So, I will come down to the element that I wish to target, and I'm going to add an attribute called id, id for identification or identifier. And now I'm gonna give it a name of something that describes what this element is. Remember with semantics, we don't want to be specific and we don't want to say third li. That is a terrible id because watch what happens as soon as we move it maybe down here. Now this id makes no sense because it's the fourth one, right? So, always describe it rather than be specific. In this case, maybe here we would like to apply emphasis here, so this describes it. It's an emphasized section. Well now, I can reference any id within my CSS by doing pound symbol and then the name of the id. So in this case, I will copy this and paste it in, and then within curly braces, I add my styling per usual. Now we're saying, look on the page for an element that has an id of emphasis. Let's try it out now. And as you would expect, only the third element is red because that's all we targeted. Let's see what would happen if we add another id here of emphasis as well. If I refresh, it is going to work, but I don't want you to do this. This is a bad practice. We use ids to target specific elements. They are not intended to group elements together. And while a browser will allow you to get away with it, it's a very bad practice in the web design community and you shouldn't do it. Instead, we use what's known as classes. They are quite similar to ids, but the main difference being we use an id to target one element, we use classes to style a group of elements. So for example, what about all buttons that's on your website? There will be numerous ones. If you want them to all receive your button styling, it would make sense to apply a class of button to any applicable elements. That way, we use a class to style groups of elements. Here, I'm gonna select id, and I'm gonna change it to class. Now, to target a class, we don't use the pound sign. That's for ids. Instead, we use a period to reference a class. And this time, we'll make the color green. If I refresh, now you can see we're doing it the proper way. When you want to group styling, you use a class, and you create that by using a period at the beginning. And that translates in human speak to find the elements that have a class attribute that is equal to emphasis and style them like so. If we come back, I told you I would show you three ways, but we've only gone over two. An important distinction to make is that you don't want to litter your HTML with ids everywhere, so you don't wanna apply an id here and then an id to every single list item and every element. Even though it might seem like that would help cuz then you can target anything you want to, it's a bad practice, especially when there are multiple ways to target elements without using identifiers. Some of these are part of CSS3, which is the next standard for Cascading Style Sheets, and the downside is that some of these aren't available in all browsers, and this is something you're going to find. Just because it works in the latest version of Chrome doesn't mean it will work in maybe Internet Explorer 7. And this is something that's going to make you tear your hair off once you get a little bit further into web design. But let's try it. This time, no id. We're still going to target my, and this is the way that I would personally do it. I'm gonna type li:nth-child. Now, within parentheses here, we can specify which list item we need to target. In this case, we want to target the third one, so I will type 3. And this time, I will make the color orange. Refresh the page. And now, without using a specific identifier, we were still able to target the third list item. Let's see what happens when we duplicate this unordered list a few times. One more time, and now I want you to note it's targeting the third list item for each occurrence. So, note that we're not saying find the very third list item and that's it. We're looking for a list item and then we're finding the nth child of its parent. So, look for a list item, get its parent, and then look for the third child. One, two, three. It got that one. The next one, exact same thing. So don't think that you're targeting only one. You could be targeting a group. Now, you might be thinking, how would we target just this one if we wanted to use this format and we don't wanna style any of these other unordered lists. Well, again, you have a couple options. One, you could apply the identifier, and we'll just give it an ID of sect for the time being. And we could do it like so. Refresh and now we're targeting it. Or you could use some more advanced CSS selectors. But that's the fun thing about CSS, is there's multiple ways to solve any problem. In this case, there's another way. We could do ul first-of-type, and if I refresh, you can see we are successfully targeting that first one, again, without using a selector. Now, if this is getting confusing, don't worry. There are probably plenty of designers who have never used first-of type, but if we were to go through this, we're saying get all unordered lists, then filter them down. We only want the first-of-type, meaning the first of the type unordered list. So we find the very first one, then we add a space, and this is where we can further select down. And now we're saying within this unordered list, look for an li, but the third child. So, one, two, three. And we target and then we style it orange. Okay, so in this lesson, you've learned a little bit about pseudo-classes. And more importantly, you've learned how to use IDs and classes to target elements on the page.

Back to the top