CSS Class and Id

Class and Id

Hello and welcome back.

This lesson is going to be about the class and id attributes in the previous lesson. I introduced the class and I.D…

And in this lesson, I’m going to talk more in detail about them. In each G.M. we can add the class or idea attribute to any element.

For example I can provide a class attribute to this H1 and give it any name as a class one.

And likewise I can provide an idea to any element like this div and give it any name let’s say I.D. one and after providing a class name or I.D. name to an element we can simply use those names as selectors as we saw in the previous lesson.

So if I want to select this each one having the class name of class one then I can simply type dot Class

1 and it will add DC RSS properties to each one having this class name.

So this dot here means we are left into a class name and this name is the actual class name.

Moreover, I can also repeat the same last name for other elements as well as if I add the same class name for this paragraph also then it will also have the same size as properties of Class

1 or I can provide another class name as well like for this div element I can add the class name of let’s say, Class

2 and can keep on doing that with different elements.

So while we can repeat the same class name this is not possible with the idea attribute because I.D. is a unique identifier.

This means that if I had an I.D. name to this element as well then the name cannot be I.D. one that I have already provided for this element.

It can be a d2 d3 or any other name but not the same name can be repeated in the same document.

And for referring to I.D. in CSS we can at the hash and the I.D. name and how symbol here means that it’s an I.D. and this name is the I.D. name and then we can add some properties inside.

So this is something that differentiates the idea from the class that the same I.D. names cannot be repeated but the same class name scan.

Besides, because of the unique nature of the I.D.,

We can also use them for bookmarking different parts of the page to demonstrate.

Let me add a few headings in the HTML document.

And suppose I give this heading an idea of let’s say my heading then I can provide a link to this heading anywhere in the document.

So if I add at the bottom of the page the anchor text for the link and then as the extra value,

I provide the ideal name using haystack so that when I click on this content I will be taken to this heading.

So I say it and then reload and here’s the link if I click on this link I will get to this heading that has this idea.

Let me make the window small to show you better.

I click again and here I jumped to this heading so this way we can use I.D. to bookmark different parts of the page as well so we can not only use I.D. as a selector and see SS But also as a bookmark on the web page.

Furthermore, there are two more important differences between I.D. and class, and let’s go through them one by one.

Number one we can end only one item name but multiple class names in the same element.

What this means is that if I take any element let’s say this div element.

Class and Id

Then if I already have given an idea name then I can’t give any additional idea name whereas if I had a class attribute as well.

And yes you got it right. We can provide both id and class names to the same element.

Now for this class, I can add multiple names like class one class to class three each separated by a space but can’t add any additional ideas.

Otherwise they will be treated as different classes.

This means that if you want to give a name to a class let’s say my heading then this can be treated as two different classes.

My and heading so in such a case you can either add iPhone or underscore or use camel casing.

This camel casing is quite popular with JavaScript which is another language but it’s a nice way where recapitalized the first letter of each word like this.

The same goes for an idea as well because when you select the idea with spaces then C says things that the idea name is only this first word before space.

So an ideal class name cannot have space.

Number two is related to preference then an element has both the idea and the class name but the same property.

Then the idea takes precedence over the class.

This means that if I have given property of color like red to this idea one and the property of Color

Now here in this example, I have very this idea after the class and naturally in C as if any selector that comes later the property of that selector is preferred.

Even if there was something else than the idea name then also it would have taken preference at this place.

So if I bring the idea above the class selector then also this color property of ideas will be preferred.

So this was about class an idea and knowing these differences will help you troubleshoot and some things appear to be a bit strange in the coming lessons.

I’m gonna start talking about more serious properties to modify the look and feel of the elements on the webpage.

So keep learning and see you in the next lesson.

Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *