Class & Id attribute in CSS

Question

Hello guys,can anybody please put me through the class and Id attributes. I am having a hard time understanding these two. Thanks

Answer 1

Let's conside the following code :

1) Id :

<div id="i-am-id"></div>

To select the above div using css you'd write :

#i-am-id { /* css goes here */ }

2) Class :

<div class="i-am-class"></div>

To select the above div, you'd write :

.i-am-class { /* css goes here */ }

However, you may like to read this page :))

https://www.sololearn.com/learn/CSS/1080

Answer 2

You did it a bit wrong :))
Here is what you need to correct :

Wrong :

P.error {
color: red;
}

Correct :

.error {
color: red;
}

Try this and let me know if it worked :))

Answer 3

You may consider this easy :

1) Id :

First of all what is id? Id is 'identity' that is you have your own identity using what one can recognise you right? For example your NID card. It is unique and will not be matched with other. Similarly, in html, we give an id to a tag so that we can recognise it using it's uniqueness. We can not use the id twice in a html document. It must be unique for every.

For example :

<div id="one"></div>

As we have declared the id 'one' we should not use it with others anymore.

<header id="one"></header>

This is illegal. So in short, id is an unique identifier for a tag.

2) Class :

What is a class? Why do we use it? Well, the word class itself indicates a specific group, doesn’t it? For example all of your classmates including you in a school is a class. Therefore, we can use the same class for many tags to make it a specific group. For example :

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
........

Answer 4

When I wrote the code <p id="custom"> This is an ID attribute </p> on my html notepad
Then #custom {
Color:orange;
} on my CSS notepad. I then saved both and F5 my webpage. It worked and changed the color to orange.

BUT for the class attribute I wrote down the <p class="error"> This is a class attribute</p> on my html notepad then for the CSS notepad was
P.error {
Color: red;
}.....I saved both as well then F5 webpage and it was just 'This is a class attribute' that appeared. Is this correct? I need pointers .

Answer 5

Okay it worked. Thanks alot Rahim

Answer 6

One more thing. What is the MAIN difference between ID and class attribute. They pretty much show the same thing when you F5. Please help

Answer 7

[...continued]

Now you can use just one class to style the three divs altogether :))

Answer 8

Okay interesting. Its understood now. Thanks again🙏

Answer 9

You also said Id is a unique identifier for a tag. That is to say you cant use lets say <p id="this is an id tag"> </p>
Then I also did <h1 id= " this is an Id tag"></h1>
For the CSS I wrote #custom {color: blue;}.. then saved
When I F5 in webpage they both appeared in colour blue. But according to your statement id attribute is a unique identifier. Why did both the paragraph and heading come out as blue?

Answer 10

I was expecting this question! Yes, actually, in css it will just work fine (It's obviously a bad practice).

But when it comes to javascript, you can not select the element by an id if you used it multiple times. For example

document.getElementById('your_id');

Now if you used it multiple times, this will produce an error that is it will only select the first element with the corresponding id :))

Answer 11

I see. Bad practice like you said. I will go back to this when I reach my javascript class. Thanks alot Rahim.

Answer 12

You may find answer in :-
1) https://www.educative.io/edpresso/class-and-id-selectors-in-css

2) https://www.washington.edu/accesscomputing/webd2/student/unit3/module5/lesson1.html