-1

I am new in web developing and I am trying to design a website for learning html and css. But I noticed that when I set any id to an element and then write the css for that id, then it is applied on that element, and when I set class and do the same with that class, then also css is applied on that element.

So I wonder is there any difference in ID and CLASS or not ?

And if no, then why these both are developed.

Thank you

Love
  • 19
  • 2

3 Answers3

1

ID and CLASS, both can be used for same purpose but its not a good practice for web designing.

ID is used to uniquely identify any element.

But class is used to identify a group of same type of elements.

Hope it is clear now.

Best of luck

Mahesh Suthar
  • 146
  • 1
  • 12
  • 1
    Is it all about good practice ? – Love Apr 17 '17 at 21:41
  • Sometimes it happens that we need to apply some css on an element seperately but some css like all the siblings of that element, then if we will use only one of them either id or class, then it will be applied to all. – Mahesh Suthar Apr 17 '17 at 21:43
  • 1
    Ok, sounds meaningful. Now I've got a picture of what is the use of both exactly. But what if we identify a group by id and unique element by class ? – Love Apr 17 '17 at 21:45
  • We can do that, but not only we are working on web designing, there are millions of people doing that. Suppose if you have designed a website with this approach and then someone else needs to modify that website, then he will have to put some extra efforts to understand your approach. For geting rid of it there is a standard approach decided for using id and class and that is being used worldwide. So everyone can understand other's code. Got it or not – Mahesh Suthar Apr 17 '17 at 21:49
  • Now I got it. Thank you so much for clearing my doubt as it was stuck in my mind. – Love Apr 17 '17 at 21:51
1

Use id in cases when you have a unique element / object / section in your design that you will not reuse.

Use class when you will reuse the same element / object / section in your design. Using class allows you to reuse the same CSS styles, or select multiple elements at the same time in JavaScript.

Sometimes you want to have both id and class. Example. You might want to have the same CSS style for all buttons, so you create a class (eg. button). However, there is one particular button that in your HTML document that you want to be somewhat unique (maybe it should do something no other button does), then you add an id to it (eg. specialButton).

guitarino
  • 348
  • 1
  • 7
0

ID = Uniquely identify a single element

Class = Identify a group of elements

Take the following block of text as an example. Note that in this case, the existence of the class is redundant because all <p> tags are of the same class, but you should get the general idea.

<p id="p1" class="p">blah blah blah</p>
<p id="p2" class="p">blah blah blah</p>
<p id="p2" class="p">blah blah blah</p>
nmg49
  • 1,356
  • 1
  • 11
  • 28
  • but we can assign p in all ids and p1, p2 and p3 in class. What is the actual difference – Love Apr 17 '17 at 21:41
  • 1
    Yes, HTML lets you do that, but that's not how it's meant to be used. Realistically, if you do assign the

    tags in this way, your code will most likely be fine. However, if you used a CSS selector based on ID, it is only guaranteed to select the first occurrence (although again, it will most likely work fine). In contrast, if you use a class to select multiple elements, it is gaureneed to work.

     – nmg49 Apr 17 '17 at 21:44
  • ok, but I am not that familiar with javascript so can't say anything rather than thanks – Love Apr 17 '17 at 21:50
  • This is not Javascript, this is CSS. You need to have at least a general understanding of CSS in order to properly understand the answer to this question. – nmg49 Apr 18 '17 at 14:36