IDs & Classes | CSS | Tutorial 11

hey welcome to draft atomy my name is Mike in this tutorial I want to talk to you about using it classes and ID's in CSS the classes and ID's allow us to define identifiers and to define groups of the CSS styling that should be applied to specific HTML elements on our website now this is one of those topics that I think a lot of new people to CSS struggle with and particularly they struggle with what's the difference between a class and an ID as you'll see throughout this video functionally they're basically doing the same thing classes and ID's allow us to define like predefined chunks of CSS styling and then we can take those chunks and use them on our HTML elements in this tutorial I'm gonna show you guys exactly what the differences are between the two when you should use a class and when you should use an ID and then I'm also just gonna show you how to use them in HTML so over here I just have my HTML file and this is my index.html file imagine that I wanted to style this header one right one way I could do that would be to use inline styling I could say style is equal to whatever I could give it like a color but imagine that I didn't want to use inline style and there's a lot of reasons you might not want to use inline styling you know maybe you just want to keep all of your code inside of your CSS files maybe you think that CSS is a little bit messy inside of HTML there's a lot of reasons why you might just want to take this CSS and put it somewhere else well imagine that I wanted to use the CSS somewhere else but I only wanted to style this CSS tutorial header so let's say I wanted to make this blue well one way I could do that is by coming over here to my style dot CSS file and I can define a CSS attribute so I could say h1 and then inside of this h1 I could just give it like a color so we can make it blue and now when i refresh my page over here you'll notice that the header turns blue mission accomplished right we did everything we wanted to do here's the problem I also have this other HTML file page to HTML and this is also using that same stylesheet so my goal was to cover or to color this header blue but what actually ended up happening was page twos header also got color blue and that's because when I define h1 inside of this style sheet it's gonna style every single h1 that this style sheets being applied to so the h1 is in both of these pages so the question is how can I only style this one h1 attribute without using inline styling and this is where something like an ID can come in handy so I can give this h1 and identifier so I can say ID is equal to and then inside of these quotation marks I can give this an ID so I could say like Mike's h1 now here's the thing about IDs I can give any element I want an ID but you can only give it one ID so this is the ID that I'm giving to this HTML element and this is the only ID that it can have now what I can do is I can use this ID and I can refer to this element inside of my style dot CSS file using that ID so over here instead of saying H 1 we can say hash tag and then we can say Mike's h1 and so what we're doing is we're referring to the name of the ID of that element so when I use this hashtag it basically tells CSS like hey we're defining the code for a particular HTML ID and it this is the name and then here's all the code that we want inside of it so now when i refresh my index of HTML page it's still getting colored blue but if I come over here to page two it's not going to be colored blue anymore because h2 isn't using this ID now if I wanted to also color this header over here on page two I could give this that same ID so I could come down here to this header and I can say ID is equal to Mike's h1 and actually we need quotation marks here and now when i refresh this page this will be colored blue as well so you can take these IDs and you can give them to you know multiple HT elements but each HTML element can only have one idea associated to it so I couldn't like define another ID in here like this can only have one ID and that ID is gonna be used to refer to this particular element in addition to defining IDs I can also define something called a class and classes are gonna come in handy because you can give an HTML element as many classes as you want so remember these elements can only have one ID so if I was defining some styling up here that HTML element can only use the code that's in here but I can use a class and it'll basically do the same thing but HTML elements are able to use multiple classes so let's say that I wanted to create a really fancy border inside of my CSS right so I want to make a fancy border I can make a CSS class and the way that you create a CSS class is by typing a dot and then you want to type in the name of the class that you want to create so we'll call this fancy border and then I want to do these open and close curly brackets and so in here I can define all of the code for my fancy border so I could say border and we'll make it 3 pixels dashed and red so now this border is contained inside of this fancy border class now let's say I wanted to also define another class maybe this time we'll make a class that will color the text blue so I could say blue text and this class will basically just make the color blue or you know what yeah so make it blue so I have these two classes and I can actually now include these classes inside of my different HTML elements so I can come over here to this index.html file and I can come over here to this main and in here I can specify a particular class that I want to give to this so I can say class is equal to and then you want to type out the name of the class so I could give this that fancy border that I just created and now when i refresh the page you'll see that this paragraph down here is going to be using that fancy red border right so I defined all of the code for that border over here in this CSS class and then in here I included this CSS class inside of my HTML tag what's cool about classes like it is I can add multiple classes into the same element so if I want to add another class for example that blue text class I can just put a space and then put in this blue text class and now this text should be colored blue which it is so now we have applied the stylings from two classes so we got that border and then we also got this blue text from both of those classes so this is like the first big difference between IDs and classes is that you can only have one ID on an HTML element but you can have as many classes as you want and so classes are a lot more powerful than IDs in the sense that you can use more than one on a particular element but other than that though it seems like classes and ID's are basically the same right I mean we're essentially doing the same thing we're defining a particular name right a named value and we're giving it some CSS attributes and by the way I could put as many like CSS attributes in here as I wanted I could give it like a background color you know you could put like you know hundreds of different CSS attributes inside your IDs and classes I'm just giving you some simple examples just so it's easy for you to wrap your head around it but you know like I said I mean functionally you know classes and ID's are essentially doing the same thing I mean the only real difference is that we can include more than one class in our HTML element whereas we can only have one ID so what's the difference well here's really the difference is that IDs are meant to be used to identify specific elements in our HTML page so an ID is really meant as an identifier and actually we're not going to get into this too much in this CSS course but IDs have special attributes with the browser so if you're using a language like JavaScript you can use IDs to access and to identify certain elements your HTML and these IDs can also be used by the browser to do different things but as far as CSS is concerned it doesn't really care you know if you're using an ID or if you're using a class so a good rule of thumb is use IDs to identify particular elements and I think a good rule of thumb personally that I use is I only use an ID only for like one element or maybe like two or three elements but I'm not gonna be putting the same ID on like a bunch of different elements that's what classes are for I can define a class and I can put that class on you know hundreds of different HTML elements if I want that's really the main use of classes IDs have used more for the purposes of identification so you don't have to follow those rules you know you can just go off and do whatever you want you can you know put an ID on 100 different HTML elements CSS doesn't care it really does not care it is it'll still work it'll still style everything but just remember that if you're planning to use CSS and any sort of an environment with other programmers generally they're gonna be using IDs for the purpose of identification and they're gonna use classes for the purpose of storing like little blocks of styling code so keep that in mind and I hope you learned a little bit today about classes and ID's hey thanks for watching if you enjoyed the video please leave a like and subscribe to drop acad to be the first to know when we release new content also we're always looking to improve so if you have any constructive criticism or questions or anything leave a comment below finally if you're enjoying traffic Academy and you want to help us grow head over to draft Adam e-comm forward slash contribute and invest in our future

Channel: Mike Dane

Views: 29,809

Keywords: CSS, HTML, Web Development, Programming

Id: 4C_-y9dIc54

Length: 10min 24sec (624 seconds)

Published: Tue Oct 10 2017