In the last segment, we learned about HTML head, what html head is and the different tags we add like link, script, style, meta, base etc.
When we add these tags, what is their use, they don't show up in the body but pass the information to the browser.
All this we learned in our last session.
The topic today is class and ID.
So, in today's topic, we will not only see the difference between class and ID but also will see when the class and id is used, what is the need and for what we use class and id.
Firstly, we will see the class.
So, what is a class?
When we need to define something, style an element, or utilize a thing more than one time, in that case, we use class.
As it's written here in the definition
The HTML class attributes are used to specify a single or multiple class name for an HTML element.
We can give multiple class names to multiple attributes.
That we will see today with an example.
When we create a class we use the dot or the period sign (.) and with its help, we generate the class.
So we will take an example and understand through that what a class actually is.
So let's open our editor and select HTML
HTML ctrl space
We will take the title as class and ID
Save our program with the name class_and_id.html.
I will run the program along
Here is the class and id
This is the program that is being run with the name of class and id.
So, currently, there is nothing in our program so in this case, we will firstly create the class.
Let us take an element inside the body
Let's say I am using an H1 tag and write "Hello! How are you" inside it.
And when we run it we get hello how are you as the output.
So, in the current program, we haven't added anything new.
The head tag we gave was studied in the segment for the headings.
And we are showing the same with a heading.
So, currently without any extra style I have added H1 and added some content "hello how are you" in it.
The content is shown as it is in the browser
So that was the data insider H1.
Currently, the content is in black and I want to change it to green, blue or yellow but that I want to do through the class.
How do we do that?
As the class is used for CSS as we saw in today's PPT.
I am repeating,
Currently, we will use it throughout the class.
We saw how to add CSS in the last segment.
The first method is with the help of the style.
Here I have opened the style tag, inside this I will add the class.
As we saw in the PPT that the class always starts from a (.).
Let's say my class is. colour.
Or we can write .heading-color
So this is the way of writing the class.
How can we write the class?
So what does the dot define?
Dot defines that what we are writing is a property of a class.
I am saying again.
Whatever we start with a dot is a property of a class.
If I have added a dot before the heading colour that means the heading colour is a class.
If I create any other class .abcd, then abcd will become a class.
So, inside the heading colour let me take the colour
All this is CSS, when we do a course on CSS we will learn it in-depth like how we write css, what are the different CSS available.
So, currently, it is heading color and inside it, I'm taking colour.
We have saved it but we haven't made the class applicable anywhere and when I am reloading this page no difference is being shown.
Now, I will copy this class and add it to h1.
The way of writing the class is like this:
Type class enter the class name.
So, I wrote class and then wrote the name of the class inside the quotes ("").
Let us save and reload.
So you can see the font colour has changed and this has turned blue.
So what do I do with the help of class here?
I took an H1 tag and gave it a class "heading-colour" and I have written a property in that class.
The property I wrote in class is applied here.
Now, the class can be used with multiple elements.
So let's say the first element is h1.
So let's say I take one more element here
I take a p tag and write any content in it, so I write "I am fine thank you".
When I wrote I am fine thank you in the p tag and run it.
So here I am fine, thank you is shown.
Let me make the fonts bold
Hello, how are you and after that thank you.
But, currently, it is in black colour because we haven't given the class to the p tag.
So let's say I apply the same class here in p.
What will happen?
Save and reload
The colour of p became the same as h1 which means by providing the same class in more than one element we can give any design or style we want.
Let's say I want to make the fonts of H1 and p similar.
So I am adding a css of font size equal to 20 px.
When I reload it
You can see the fonts or H1 and P1 are the same in size but because this is h1 tag it is shown a bit bolder.
So, we saw that the fonts both became the same and the colour is also the same.
That means the changes I want to make whether it's H1 or p, the changes I will make in the details of the class will reflect in both elements H1 and p.
So, that was the class with the help of the class we can give the css we want along with that we can apply the same css on more than one element.
That was the class. The next segment is the id.
What is an Id?
When we need to uniquely identify an element that means, within the web page we want to give a unique Id to an element, so using ID we can uniquely identify any element.
But make sure the ID we gave once cannot be given again.
That means as we saw the example we used two elements the h1 and p and I give an id to h1 then the same ID cannot be given to p.
In the whole web page, the Id is only one so it will either be of H1 or p.
So let us see this with an example,
I am including an h3 tag
"This is an H3 tag"
Save and reload
So when I added the h3 tag it is showing something like this and the default colour is also black.
So in this let me add the id and to add the id we will write ID equals heading style.
This is my Id.
Copy it and will include it with a hashtag (#) in the CSS.
So this is a difference when we add a class we include it with a dot and when we include the id we include it with a hashtag.
So these are the differences for a class a period and for id a hashtag.
So, whatever style I want to give it, I will give it here.
Let us say, the font size equals 30 px and the color is green
Save and reload
As soon as I reload I can see that the font size has increased and is shown in green colour because I have given an id to h3 and I have given a css to the same Id.
But If I do the same thing with HTML, it works.
So, for that I took h3 and after it, I took the h5 heading tag.
Here I have placed the same things. by copying them the things I took in h3 same I have written here.
And I will replace the h3 with h5 and I have included the same Id as well.
But, If I do this, although it's a wrong approach to do that by giving the same IDs to two elements but still for example I gave the same Id to both.
I will save it
And when I run it
I can see the same line as the h3 tag is shown for the h5 tag, same colour and size of the font.
So better is to keep up with the practice that we can give the same class to different elements but only one Id should be given to an element.
So if I want to correct this code I will either remove h5 or I will remove the id
Save it run
And I can see the content in the h5 tag.
So do remember guys
If we are working with class and id.
We can include more than one class on one web page.
If we are working with Id.
On one web page, there should be only 1 Id.
You will get the output for sure but it is not proper coding practice.
As per the coding standards, there should be only one Id on one web page.
So that was the id.
So the two points we learned today are class and ID.
We studied what is a class and id, and saw the difference between both that there can be more than one class on a web page but Id should be one.
We identify class with a dot and id with a hashtag.
The next segment will be about HTML layouts, how do we create the layouts, what are the types of html layouts, how can we place them on the web page.
So we will learn about HTML layouts.
So today in the session we saw class and id and we performed an example. You can also take the same example and perform.
And try to run the program if it runs successfully that's well and good butIf you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.
It's an amazing website to learn HTML. The explanation is done very well. It made HTML easy for me. I had a very great experience learning here. Thank you for this course.
i feel it's great platform the way of explanation is awesome.
Great practical + Theory
Superb and amazing 😍🤩 enjoyable experience.
i have never and ever see these types of course online
salute to developers