HTML & CSS for Absolute Beginners: IDs and Classes

Key Takeaways

[Music] sometimes we need to change something but we only want to change one of them and we've been using our paragraph selectors throughout this course so we'll keep on going with that and we say color is red just we can I like using red because it stands out and it's pretty obvious that it's changed uh and we can see all of my paragraphs have changed over to red but what if I don't want all of them to be red I only want one of them to be red and to be able to do that we can't use our regular element selectors because an element selector will select every instance of that element on the page in instead we have to use something called a class or there's also IDs which we're going to be talking about as well we're going to start with classes and for a class it's an attribute the same way our source or our href are so if we come back over here we had links where we're using an href uh we also had the images that have an SRC the difference with these ones that are specific like an SRC we need to have one on our image are all are as well as our alt uh as well whereas a link has to have an HF on it a paragraph heading a section a main all of these elements don't require an attribute for them to work but we can add optional ones to them and classes are one of those optional ones we can use and you can also use these on images and links and other things as well and so to highlight this let's go into here what is bouldering and I'm going to put a class on the first paragraph here so the first paragraph is this one and just like any other attribute we put a space after the element and then we write in the word class and we equals to and we need our quotation marks right there and then we can come in with the name that we want and in this case unlike where we had to link to something like with our SRC or hre with the class you're going to create your own name so I'm going to come in with I'm just going to call it accent because I want this paragraph to stand out it's going to be an accent you know it's going brighter and stand out from everything else so I'm going to save this right here and go back to my Styles and instead of having all of my paragraphs red I only want my class of accent to be red and so I want select my class of accent and to be able to select classes instead of writing the element name we can't just put in accent like this because that would look for an element of accent which doesn't exist so instead of writing just like this at the very beginning of it I'm going to put a dot or a period or whatever you want to call it but we put the dot right there at the beginning we're saying it's a class of accent so if I save this and I go back and refresh we can see that now only my first paragraph is red and all the other ones have stayed black and a nice thing that we can do with classes is they're not unique we can reuse them as many times as we want so if I have an accent class like that I can take that one and I can go and bring it onto another paragraph class is equal to accent and if I refresh over here it's going to work and we can see this one and this one are both getting that red color on there and it's not unique to paragraphs either I could use this on my link or I could use it on a heading and that same class is going to work no matter where I'm using it and apply the color that I've set to that element now there's another type of special selector that we have which is an ID selector so here on my uh so let's go down to this y bouldering sections were somewhere different and I'm going to go on the first paragraph here and instead of a class it's an ID is equal to and in this case let's give it an ID of first paragraph because sort of what it is right it's the first paragraph of this section uh and then we can go over to my style here and to select the first paragraph of that section my that ID that I've created instead of doing it with a DOT because a DOT is for your class I would use a hashtag and the hashtag or the pound symbol is to select IDs so then I would do first paragraph and let's say color is green and the font size is bigger too font size is I don't know 1.5 R to make it larger than the other one and now we can see that that is being applied to this one right here and I've made a mistake in that and I didn't realize it until now either ah I added an extra paragraph here and I don't know why I did that I must have just seen a line break there we go that looks a little bit better cool I saw an awkward thing earlier on and I didn't click in that I created two paragraphs there uh with the color change it became very evident so there we go I have uh that paragraph coming in that is different and it's my first paragraph so of course this raises the question when should I use an ID or a class or which one should I use in what situation and there's a couple of very big differ between classes and IDs one of which we'll talk about in an upcoming lesson but the important thing to know for now is while classes are reusable we have that red being reused wherever we want it IDs aren't meant to be reused ID is something that's unique to that element so you're only supposed to use an ID once on a page now you might have a website with 30 pages in it you can reuse that ID across all 30 pages but on each individual page you can only use that ID one time and the way I like to remember this is that I think of it the analogy I usually give is a classroom or at a school right you have a school and there's all the people inside so the people you want to just say like everybody in the school those would be the element selectors you did your your people it's just it's everybody that's there and then with in those people you have different roles you have the administration you have the teachers you have the janitorial staff and other staff members and things like that the secretarial staff so those would be like the classes because the teachers is a subset of the people so it's like your element selector is everybody and then we're saying that this group of people within that so it's all that this class of people if you want to call it a class uh is your teachers or is your students and these other things we're sort of separating them and they have their own unique styling or things about them and then you have the ID would be the individual person right every single individual there is someone who's different and nobody shares the same ID between each other they're not they're not the same person right so each we have all the individual as well so the same thing with classes and IDs there is the class is reusable we can sort of generalize and make groups of things that share these same properties whereas an ID is something that's unique in only once per page and as far as how to know which one to use I would just say use either an element selector if you need to just select all your I don't know sections or you need to select all your H2S or something like that the element selector is probably the better one and then if you do need to overwrite some styling or do something specific somewhere then I would use a class selector and the reason for that is you might only want to change one of your paragraphs to be an accent paragraph but then later on you need a second one or a third one or a fourth one and then if it was an ID you have to change it from an ID to a class and change your styling in your CSS and all of that and it's not worth it uh there's other drawbacks to using IDs as well which again we'll talk about in a future lesson but just that concept that class selectors you can have a class and only use it once on a page if you want to but you're able to use it more times it just makes it a little bit more versatile and useful in the long run and so in general in front-end development these days it's considered best practice to either have element selectors and class selectors and to generally avoid ID selectors