Id & Classes in HTML | Sigma Web Development Course - Tutorial #9

Summary

This 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

00:00

🔑 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.

05:02

🎨 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.

10:04

📚 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.

Keywords

💡ID

An ID (Unique Identifier) in HTML is an attribute used to uniquely identify an element. It can only be assigned to one element per page, ensuring each ID is distinct. For example, in the video, the ID is compared to an Aadhar number, emphasizing its uniqueness like personal identification numbers.

💡Class

A class in HTML is an attribute that can be assigned to multiple elements to apply the same style or behavior to all of them. Unlike IDs, classes are not unique and can be shared among elements. In the video, classes are illustrated by assigning the 'red' class to both a div and a span element.

💡Unique Identifier

This term refers to a unique label that distinguishes one item from another. In HTML, an ID serves as a unique identifier for an element. The video uses the analogy of an Aadhar number to explain how each ID must be unique to each HTML element.

💡Element

An element in HTML is a component of the web page defined by a start tag, content, and an end tag. Examples include div, span, and form. The video explains elements as building blocks to which IDs and classes are applied to control their styling and behavior.

💡HTML

HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. The video focuses on explaining how IDs and classes are used within HTML to manage and style web page elements.

💡CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. The video shows how to use CSS to style elements using classes and IDs, such as setting background colors and text colors.

💡Aadhar Number

In the video, an Aadhar number is used as an analogy to explain the concept of an ID in HTML. Just as an Aadhar number uniquely identifies an individual, an ID uniquely identifies an HTML element.

💡Style

In the context of the video, style refers to the visual presentation of HTML elements, managed through CSS. The video demonstrates how applying different classes and IDs can change an element's appearance, such as its background color or text color.

💡Attribute

An attribute in HTML provides additional information about an element. IDs and classes are attributes that specify unique identifiers and shared properties, respectively. The video explains how these attributes are used to style elements uniquely or in groups.

💡Selector

In CSS, a selector is a pattern used to select the elements you want to style. The video describes how to use class selectors (denoted by a dot) and ID selectors (denoted by a hash) to apply styles to HTML elements.

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!