Last Updated on May 7, 2023 by asifa
In this short paper piece, we’re going to learn about classes and ID inside HTML and CSS. Our main point discussed in this whole debate will be on an element by class name and ID’s which are essentially a way for us to target specific HTML elements inside our pages in order to give them a certain styling.
Table of Contents
What are the basic contradictions between Element by class name & ID?
Now to make you understand I am trying to give you an example of exactly is difference between using element by class name and element by class ID. What you have to do is just go inside your style sheet and just target the h2. 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.
What if I want to just target one specific element inside my website?
What I can do is I can actually go back inside my index page and I can add a class or an ID to one of the elements 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 afterward I’ll tell you guys about IDs.
Element by class name
so inside your h2 tag, you 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 you can save it go inside my style sheet and instead of saying h2 you can 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
In fact in the case of the element by class name you can add multiple classes inside one element so if you want to have one class that takes care of may be 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
Element by class Id
When it comes to an element by class ID after completion of your h2 tag you have a class then after a class you must create an attribute called ID which is going to be equal to double quotes and then inside that id you can go and give it some kind of name you could give it the same name as the class name or could give it something different it’s up to you then go inside my style sheet and underneath my class styling. You can actually go and say hashtag index- h2 and the hashtag 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.
Now when it comes to a DS you can only have one ID inside one HTML element unlike class by name. I hope you will get maximum knowledge out of this short paper piece.
Read More: Secrets To Growing a Small Business
Apart from that, if you are interested to know about An Evolving World: Understanding Modern ID Scanners then visit our Technology category.