8: Introduction to Classes and IDs in HTML | Learn HTML and CSS | HTML Tutorial

today we're going to learn about classes and ID's inside HTML and CSS so a couple episodes ago we talked about how to style our HTML inside our index page and in this episode we're going to talk about something called classes and ID's which are essentially a way for us to target a specific HTML elements inside our pages in order to give them a certain styling now to give you guys an example about what exactly is different between using classes and ID's versus just going inside our style sheet like we did in the previous episodes and just target the h2 or the paragraph tag here now when we do it this way just by writing h2 or paragraph then we style every single h2 tag or every single paragraph tag inside our website meaning that right now every single paragraph inside the website would essentially be green so it makes sense that we should only do it this way if we want every single paragraph to have a certain styling or every single h2 tag to have a certain styling but what if I want to just target one specific elements inside my website what I can do is I can actually go back inside my index page here and I can add a class or an ID to one of these elements here and there is a difference between using classes and ID's but let's just go ahead and stay with classes for now and then afterwards I'll tell you guys about IDs so inside my h2 tag here I'm going to say we have an attribute called class which is equal to double quotes and inside the double quotes who need to give it some kind of name so this name is going to be some kind of indicator that we can then target in order to style this specific h2 tag so what I could call it could be index - h2 just to give it some kind of name and then I can then save it go inside my stylesheet and instead of saying h2 I can then say punctuation index - H - now the punctuation here means that we're targeting a class which is somewhere inside our website and the class name is index - H - now when you use classes you can write index space h2 because what we're doing here is that we're creating two different names so we're saying we have a class called index and we have a class called h2 and yes you can in fact add multiple classes inside one element like we just did here so if I want to have one class that takes care of maybe the text styling in one class and take care of the positioning then I could do it that way if I wanted to and by using classes this way we can then ensure that only this h2 Tech has this specific styling now of course if I have an h2 tag later on that I need to give this X same styling as this 82 tag I could in fact create a second age to write something inside of it and then say we have a class equal to double quotes that then has the class index - h2 so right now these two have the same styling from our style sheet now another way we use classes which you guys should probably know about is if I were to actually delete the second h2 and create some kind of container so let's say I have a div tag which is a container that we can then put stuff inside of inside the website and inside this div I have a class attribute called index - there well let's say I had some kind of introduction inside this div box of it actually call this one index - intro and then inside the div tags let's say I have a paragraph tag that has some kind of text inside of it could be some kind of welcoming text now if I want to target the paragraph tag inside this div but I don't want to add classes to every single element inside my website what I could do is since my container here has a class as index - intro and go inside my style sheet go down to the bottom here say if you have a class called index - intro space and then inside this element that has indexed as intro we have a paragraph curly brackets and then we can give this one a color set to red like so if I go back inside my website refresh you guys can see we now have a paragraph that is red so just to show you guys we can actually target elements inside that has a class inside of it without having to give this specific paragraph a class in order to target this specific paragraph the basic thing we're doing here is that we're saying that every single paragraph inside this specific container should have this styling here so now we talked a bit about classes inside HTML and CSS but we also have something called IDs which are slightly different in classes but can be used in very much the same way so when it comes to IDs that's actually going to create one here after my h2 tag I have a class then after a class I'm going to create an attribute called ID which is going to be equal to double quotes and then inside that D we can go and give it some kind of name I could give it the same name as the class name here or could give it something different it's up to you then go inside my stylesheet and underneath my class styling here I can actually go and say hashtag index - h2 and the hash tag is the way we refer to an ID inside CSS just like whatever classes using punctuation so when we do this inside CSS using IDs we can also go ahead and style elements using IDs so it could actually say color should be green in this case I could actually go and delete my class up here go inside my website and as you guys can see now the top title here is going to turn green now another thing that's important about classes like these is that when we talked about classes I could in fact use the same class copy and use of multiple times inside my page here inside my website now when it comes to a DS I can only have one ID inside one HTML element mean the right now as you guys can see we have an ID inside my h2 tag that is named index test h2 if we were to add a second ID code maybe index - title I can't do this because we should only have one ID inside one HTML elements now the same thing goes for having one specific ID name inside one page so if we were to copy this the ID and paste it inside my paragraph tag here we cannot have the same ID name inside different elements so if we were to use an ID and stop a paragraph tag I need to change the name into maybe indexed as P because now they're not the same names now if you were to actually do this inside a website and excellence at your browser it might not give you an error message but since X wise you shouldn't do this inside your website so usually you should stick with classes when you want to style elements inside your website so at this point you might be asking me well why do we use IDs when classes can do the same thing as IDs but more well when it comes to IDs it also has a couple of things that can do that classes can't do for example if I were to go ahead and create a section down here by creating a div which has content inside of it related to a very specific thing such as courses if I have lessons inside my website then if I want to link to this specific section inside the website you know we'll click on a link and then it just takes you down the page and set up to a new page then we use IDs node to do this because if we were to actually go ahead and create an ID call this one index - courses and I know we haven't talked about links yet but if we were to create a link up here further of the documents and then say we want to link to an ID just like we did inside CSS called index - courses then when I click this they never were to save it go inside my website refresh if I were to click on the link up here would actually take me down the page to where the courses section start so this is one thing to ID stuffs really well when it comes to linking to certain sections inside a website now a second thing to use IDs for which you can use classes for is if you want to learn JavaScript in the future then a lot of the functionality that goes into the JavaScript programming language does require that they use IDs inside different HTML elements so we're not going to get too much into this functionality because it's JavaScript and this is a HTML CSS course now if you want to learn about this of course you can go ahead and my JavaScript series or my ta curry series which does use ID signal to accomplish these things but for now I'm not going to get too much into it so this is what we use IDs and classes for inside HTML CSS I hope you guys enjoyed and I'll see you guys next time

Channel: Dani Krossing

Views: 255,996

Keywords: introduction to class and id in html, introduction to classes and ids in html, HTML Classes, html class, what is a class in html, html class tutorial, what is an id in html, class and id explained, what is a class and id in css, html id, html class and id, difference between id and class in html, html, css, Class and ID Selectors, html id tutorial, difference between class and id, introduction to class and id, what is the difference between a div id and a div class in html

Id: wXUhTZpF_HQ

Length: 9min 9sec (549 seconds)

Published: Wed Aug 30 2017