Id & Classes in HTML | Sigma Web Development Course - Tutorial #9
Summary
TLDRThis video script clarifies the often-confused concepts of ID and Classes in HTML. It explains that an ID is a unique identifier for a single element, akin to an individual's Aadhar number, while a class can be shared among multiple elements, like students in a class. The script uses relatable analogies and practical examples to demonstrate how to apply IDs and classes in HTML and CSS, highlighting their distinct uses and the importance of understanding their roles in web development.
Takeaways
- 🔑 ID stands for 'Unique Identifier' and is used to give a unique identity to an HTML element.
- 📚 Classes in HTML are used to assign common styles or attributes to multiple elements and can be shared among different elements.
- 👕 The analogy of 'Aadhar card' is used to explain the uniqueness of an ID, similar to how each person has a unique identification number.
- 👫 The concept of 'class' is likened to being in the same grade or group, where multiple people can share the same classification.
- 📝 The script provides a practical example of creating a folder and file for a web development project, emphasizing the organization of code.
- 💻 Demonstration of using 'ID' and 'class' in HTML involves creating elements with these attributes and explaining their purpose.
- 🎨 In CSS, 'ID' is targeted using a hashtag (#), and 'class' is targeted using a period (.), allowing for specific styling of elements.
- 🔄 The script clarifies that one element can have multiple classes but only one ID, reinforcing the uniqueness of the ID attribute.
- 🔗 IDs can also be used for navigation purposes, allowing users to jump to specific sections of a webpage using a direct link.
- 📝 The video also covers the use of IDs for creating anchor links, which can focus on a particular element when the page is loaded.
- 📚 The video script concludes with a reminder of the importance of understanding 'ID' and 'class' as fundamental concepts in web development.
Q & A
What is the primary purpose of using IDs in HTML?
-The primary purpose of using IDs in HTML is to provide a unique identifier to an element, ensuring that no other element has the same ID.
Can the same ID be used for multiple elements in a webpage?
-No, the same ID cannot be used for multiple elements. Each ID must be unique to a single element, similar to an Aadhar card number for an individual.
What does the term 'class' represent in the context of HTML?
-In HTML, a 'class' is used to define a set of properties that can be shared among multiple elements, allowing for the application of common styles or attributes.
Can multiple classes be assigned to a single HTML element?
-Yes, multiple classes can be assigned to a single HTML element, separated by spaces, allowing the element to share properties from different class definitions.
How can you apply the same class to different elements for styling purposes?
-You can apply the same class to different elements by assigning the same class name to each element's 'class' attribute, which allows them to inherit the same styles defined in the CSS.
What is the difference between an ID and a class in terms of specificity in CSS?
-In CSS, an ID has a higher specificity than a class. Selectors with IDs will take precedence over selectors with classes when there is a conflict in styling rules.
How can you use an ID in a URL to navigate directly to a specific part of a webpage?
-You can use an ID in a URL by appending a hashtag (#) followed by the ID value to the end of the URL. This will cause the browser to scroll to the element with that ID when the page is loaded.
What is the significance of the 'index.html' file mentioned in the script?
-The 'index.html' file is the main HTML file that is created to demonstrate the concepts of ID and class in the video. It serves as the starting point for the examples provided.
How does the video script use the analogy of Aadhar numbers to explain IDs?
-The script uses the analogy of Aadhar numbers, which are unique identification numbers for individuals in India, to illustrate that each ID in HTML is unique and cannot be shared among elements.
What is the role of the 'class' attribute in HTML elements as described in the video?
-The 'class' attribute in HTML is used to specify one or more class names to an element, allowing it to be styled with CSS or manipulated with JavaScript, and it can be shared among multiple elements.
How does the video script differentiate between the use of IDs and classes in HTML?
-The script differentiates by explaining that IDs are unique identifiers for elements, while classes are used to group elements and apply shared styles or attributes, which can be reused across multiple elements.
Outlines
🔑 Understanding ID and Classes in HTML
This paragraph introduces the fundamental concepts of ID and Classes in HTML, highlighting the confusion often faced by beginners. The speaker clarifies that an ID is a unique identifier for an HTML element, ensuring no two elements share the same ID, akin to a person's Aadhar card number in India. In contrast, a class can be assigned to multiple elements to apply shared styles or attributes. The analogy of a classroom with students wearing different colored t-shirts is used to illustrate how multiple elements can share the same class. The paragraph concludes with a demonstration of creating an HTML file and explaining the practical use of IDs and classes in coding.
🎨 Applying CSS with IDs and Classes
The second paragraph delves into the practical application of IDs and classes in CSS for styling web elements. It emphasizes the uniqueness of an ID, which cannot be duplicated across elements, compared to classes that can be applied to multiple elements. The speaker uses the Aadhar card analogy again to stress the singularity of an ID. The paragraph provides a step-by-step guide on writing CSS to target elements with specific IDs and classes, demonstrating how to change the background and text color using class selectors. It also touches on the use of IDs in creating direct links to specific parts of a webpage, showcasing this functionality with a Wikipedia example.
📚 Conclusion and Encouragement to Learn
The final paragraph wraps up the video with a light-hearted anecdote about naming a village, followed by a call to action for viewers. The speaker encourages viewers to access the playlist for more web development lessons, to visit the GitHub repository for source code, and to like the video. They also invite viewers to write '#sigmabatchop' in the comments section to engage with the community. The speaker thanks the audience for watching and expresses excitement for the next video, leaving the viewers with a friendly and inviting impression.
Mindmap
Keywords
💡ID
💡Class
💡Unique Identifier
💡Element
💡HTML
💡CSS
💡Aadhar Number
💡Style
💡Attribute
💡Selector
Highlights
ID and Classes are fundamental concepts in HTML that are often confused.
ID stands for Unique Identifier, meaning it should be unique to one element.
Class is used to assign the same properties to multiple elements.
An example of class usage is assigning the 'Red' class to both a div and a form.
The video includes a live demonstration on a computer screen.
The source code for the demonstration is available on GitHub.
An analogy is used comparing ID to an Aadhar card number, unique to an individual.
Classes are likened to a school class where multiple students can share the same class name.
Multiple classes can be assigned to a single element, such as 'red' and 'bg-yellow'.
ID attributes are unique and cannot be shared among elements, similar to an Aadhar number.
CSS demonstration shows how to target classes and IDs for styling.
The 'dot' notation is used for classes and the 'hash' for IDs in CSS.
IDs can also be used for navigation, creating links to specific parts of a page.
The video explains how to use IDs for direct navigation to page sections.
ID and classes are attributes of HTML elements used for styling and identification.
The video concludes with a reminder of the practical applications of ID and classes in web development.
The presenter encourages viewers to access the playlist, GitHub, and engage with the content.
Transcripts
In this video, I will tell you what are ID and Classes?
The concept of ID and Classes is one of the most confused concepts.
In fact, when I was learning HTML, I was very confused in my early days.
ID means Unique Identifier.
That is, if you give an ID to an element, you will not give that ID to the other element.
But class means that if you want to give a property to multiple elements,
then you will give it multiple classes.
For example, you can give a class named Red to a div and a form.
Similarly, you can give a class named BGRed to an article tag and a header tag.
Do like this video because we will now go to the computer screen
and we are going to see these things very closely.
Let's roll the intro. Intro
Alright guys, I am back.
If you haven't accessed the Sigma Web Development course yet,
then access the playlist.
Click here to bookmark or click here to save.
The source code is also being uploaded on GitHub.
Now I will come here in the folder and quickly make a folder of video number 9
so i will make a folder of video 9 here
i will write video 9 and after making the folder of video 9
i will right click on shift and open with code
and here you can see that it has opened in bs code
now i will write index.html here and enter with exclamation mark
and along with that i will tell you what is ID and classes
you must have an Aadhar card, if not, then you must have some ID
now don't write in the comment that I don't have an ID
whenever you go somewhere, you have to show your ID
in some of the cases to prove your identity
that I am this
now if you want to understand about ID and classes
in html, then ID is the
identity of the person
what is that? it is your identity
so here listen to a story
this is john and this is harry
these two are very good friends
they are very good friends
they just don't share their lunch
and the rest are good friends
in the matter of food he is not and he is they don't share their lunch and they are good friends
they are not good in food but they are good in everything
and here you can see john and harry have their own id
so this is my aadhar number and john's aadhar number looks like this
so this is john's aadhar number and this is my aadhar number
our aadhar number can never be same
or if we assume that
our friend is mine
Tanya and John's friend is Shruti
so their Aadhar numbers will be different
and this is Tanya's Aadhar number
now
this Aadhar number will be different for everyone
so John and Harry were friends, John's friend was Shruti
this is her Aadhar number, this is Tanya's
none of these four numbers are same
if I told you any of these Aadhar numbers
I would have said 35, 44, 5, you will understand that it is Harry's
and if I said 54, 56, 56, 7
you will understand that it is Shruti's And if I say 54,56,56,57
And if I say
34,56,85,68,63
Then you will understand that it's about Tanya.
So this identifies uniquely
Tanya, Harry, Shruti and John.
So this is their id.
No one else will get this id. so this is their ID
no one else will get this ID
and also
John and Harry spent their childhood together
they were in the same class
and that class name was
class 10th
suppose they are in 10th class
suppose
and
Shruti is in class 9th and Tanya is also in class 9th so both is in class 9th
and tanya is also in class 9th
so both are in class 9th
tanya and shruti are in class 9th
so what is shruti's class? 9th
tanya's class can also be 9th
shruti will not study alone in class
or harry will not study alone in class 10th
there are other kids in class
so class means
in one class there are
harry and john, so can class be
multiple of one person?
it can be multiple of one person
like suppose harry is in class 10
and he goes to a tuition
where he is in class 10A
suppose there are classes in that tuition
so there can be more than one class
one is class 10A
and with that suppose harry wears red t-shirt So there can be more than one class One is class 10A
And with that if Harry wears red t-shirt
So class means classifying
Now come here
Leave this john harry shruti
Delete it
Now come to index.html
And understand this.
Suppose I made a div here.
And I gave it a class as red.
And I made a span and gave it a class as red.
The classes I have given, I can give them to different elements.
But if I want to put an id.
In any element.
I can put anything in id. I id is not available to any other element
Because this is its aadhar card
If there is another div, then also I can't put
Then also I have to put something else in id
I put second div
And here I write second
And here I will write first
So this id and
Classes concept, I personally
I understood it very late
When I was learning web development in my early days
no one told me that ID uniquely identifies
an element and the class can be
multiple classes in one element and
can be multiple classes in one element only
like if I give it a red class, I can give it a bg yellow class
ok bg yellow
I can give only one class and if we give a class to a multiple element then we give it bg-yellow class I can give one class
and if we give multiple to any element then we can give space
like if i want to put multiple classes in this element
then what i will do is
i will write red here and then space and bg-yellow
so like this i can give multiple classes to same element
can i give multiple id to same element
have you ever heard of 2 Aadhar cards?
I don't know but there are no Aadhar cards
Aadhar number is same for one person
And Aadhar number can't be same for different people
One person can't have multiple Aadhar cards
Different people can't have same Aadhar cards
But the class, if I ask you what color T-shirt you wear
Or you can wear red t-shirt,
no problem, you will get it if you go on the road.
And let's say you get people who like mango, banana, or grapes,
multiple people will get it, so assume that in the banana class,
or in the grapes class, in the mango class.
So we can classify in a class and we can give different elements to one class
I hope you understood this. Now i'll write some CSS
Don't say that you are not reading CSS
What i'm writing in CSS is like alien language
Ok
Style.css
I'm trying to make a point
And here's the preview I will show you one thing
I will show you how to target the class in CSS
Dot it, dot red means red class
And hash first div means, hash means id, dot means class
Okay, if I say that the first div
Make its background color red
Okay, so by making the background color of the first div red
Its background color will be red, ok
these are selectors in CSS
and now I don't want to confuse you
and I can comment in this way in CSS
ok, but we will study all these things later
now by making dot red
I will write here background color red
and along with that in dot bg yellow
what I will do
dot bg yellow will be mine, I have to put dot
dot means class, it means class bg yellow, I will put a dot dot means class, class bg yellow
and I will make background color yellow, sorry I will make it color red
dot red means color will be red, so see its color is red and background color is yellow
so this way you can use id and classes
in css, I hope you understood this
one thing to note here
ID and classes are attributes of element
This is ID attribute and this is class attribute
So what are ID classes? They are elements
Now there is another use of ID
I will tell you what is another use of ID
If i take you to wikipedia and i write coding
So this page of Wikipedia has come, let's say I go to some other page
so you see that when you go to any page on Wikipedia
so what you can do is
you can take the link of that particular place, I will show you how it is
I go to some other page, I scroll down
and here I will inspect its ID
its ID is this, so I will copy its ID
and if I put here hashtag I'll copy the ID I'll copy the ID
And if I put hashtag and this ID
If I hit enter, it will bring me here
If I put it in incognito
It will scroll and show me the particular ID
Instead of showing me this
It scrolled and showed me
So ID works in linking, okay. Remember this too, very few people will tell you
that you can also generate links, if you write hashtag in front of any link
and write ID, then when you open that link, it will focus the same ID
as it is giving me in this case. You can see that as soon as I am hitting enter,
so maybe I have done the wrong ID here, but you got the point, you got the point.
Here 29.29 and I will hit enter, so you see I have done wrong id here. But you got the point. 29.29
I will enter it.
I have come down.
If I open the incognito tab or reload it.
I will scroll it up.
And after that I will open a new tab.
And I will do like this.
See it is scrolling me to the same page.
On the same page this id is.
I hope you have understood id and class.
Through this video. ID means
class means a person's property
like he likes red or
in which class he is. One element
can be given in multiple classes. One element
can be of red color and its background can be yellow
and the other element can be of red color
and its background can be yellow. So red class can be
given in multiple elements. Red class
can be given in fake element and
in one element you can give red class and fake element and you can also add red class on one element
and you can also add yellow class on one element
I hope you understood
So that's it for this video
I was reading captions and I laughed
I told him to name the village
I laughed 5-10 times
I told him to access
Name your village and my name
So on this note
Access the playlist Access the github,
like the video,
and write hashtag sigma batch op in the comment section.
Thank you so much guys for watching this video
and I will see you next time. Thanks for watching!
浏览更多相关视频
The HTML Tags They NEVER Taught You
Layout Part 1A - Motivation, Divs & Spans Review
Global and Custom Attributes | Frontend Bootcamp Hindi | Ep.06
#13 Types of Component Selector | Angular Components & Directives | A Complete Angular Course
CSS Selectors MasterClass | Sigma Web Development Course - Tutorial #17
HTML - Introduction - W3Schools.com
5.0 / 5 (0 votes)