-2

Recently, I've started learning HTML. In some tutorials the tutor uses id and in the others the tutor uses class. What is the difference between them?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
G4m3r3k
  • 17
  • 8
    Does this answer your question? [What's the difference between an id and a class?](https://stackoverflow.com/questions/544010/whats-the-difference-between-an-id-and-a-class) – DBS May 11 '20 at 09:46
  • 2
    Possible duplicate: *[What's the difference between an id and a class?](https://stackoverflow.com/questions/544010)* – Peter Mortensen Dec 14 '20 at 12:45

3 Answers3

1

ID can be used to identify one element, whereas a class can be used to identify more than one.

Let's say we have 3 "p" elements:

<p class = "para"> This is a paragraph </p>

<p class = "para"> This is a second paragraph </p>

<p id = "unique_para"> This is another paragraph </p>

You can use "para" class for more than 1 element. But you can't use "unique_para" for any other element, because it's now unique for that element.

Funkystuff
  • 35
  • 5
1

ID’s are one of Kind “Unique”:

Only one ID can be set for each Element. ID should only be used ones within a page. You should used ID when you have a single element on the page that you want to manipulate.

What will happens if you used ID’s on more than one element? Your codes won’t pass the validation test which is important for web developers.

Example:

<div id=”main-header”>text</div>

Classes aren’t unique:

The same classes can be set for multiple elements. More than one Class can be used for the same element. You should use Class when you want to manipulate multiple elements in the same page or site. Class will help you to save time by manipulate all the elements in one time.

Example:

<div class=”column”>text</div>

Conclusion

All one of kind or on repeated elements should have elements, and all the elements that you want you reuse them on your page/pages should have class.

Uday
  • 464
  • 3
  • 11
1

ID’s are unique --- An ID is a unique identifier of the HTML element to which a particular style must be applied. It is used only when a single HTML element on the web page must have a specific style. The # symbol and the id of the HTML element name are used to select the desired element.

How to add an ID to our HTML element: <div id= “id”>

How to use them in our CSS: To add style to an element with an id, we preface the id with a # symbol in our CSS.

Syntax: #blue { color: #015cf8; font-size: bold; }

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>George Nelson Quotes</title>
    <style>
        #blue {
            color: #015cf8;
            font-weight: bold;
        }
    </style>
</head>

<body style="text-align:center">
    <h2>George Nelson Quotes</h2>
    <p>No design can exist in isolation. It is always related, sometimes in very complex ways,
        to an entire constellation of influencing situations and attitudes.</p>
    <p>You don't think your way to creative work. You work your way to creative thinking.</p>
    <p id="blue">Design is a response to social change.</p>
    <p>Good design, like good painting, cooking, architecture or whatever you like,
        is a manifestation of the capacity of the human spirit to transcend its limitations.</p>
    <p>Unless ideas are massaged into reality they evaporate.</p>
</body>

</html>

In this above example, we assigned blue as id selector for the third paragraph (id=“blue”), and declared its style using color property — #blue {color: #015cf8;} in the section. It means that the HTML element having id selector blue will be displayed in #015cf8 (run code snippet for result).

Classes are not unique --- A class selector is used when the same style must be applied to multiple HTML elements on the same web page. The . symbol, along with the class name, is used to select the desired class.

How to add a class to our HTML element: <div class=“class”>

HTML element can have multiple classes: <div class=“class another-class”>

How to use them in our CSS: To add style to all elements that are part of a particular class, we preface the class name with a period . in our CSS.

Syntax: .blue { color: #015cf8; font-size: bold; }

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>George Nelson Quotes</title>
    <style>
        .blue {
            color: #015cf8;
            font-weight: bold;
        }
    </style>
</head>

<body style="text-align:center">
    <h2 class="blue">George Nelson Quotes</h2>
    <p>No design can exist in isolation. It is always related, sometimes in very complex ways,
        to an entire constellation of influencing situations and attitudes.</p>
    <p>You don't think your way to creative work. You work your way to creative thinking.</p>
    <p class="blue">Design is a response to social change.</p>
    <p>Good design, like good painting, cooking, architecture or whatever you like,
        is a manifestation of the capacity of the human spirit to transcend its limitations.</p>
    <p>Unless ideas are massaged into reality they evaporate.</p>
</body>

</html>

In this above example, we assigned blue as class selector for the header and the third paragraph (class=“blue”), and declared its style using color property — .blue {color: #015cf8;} in the section. It means that the HTML elements having class selector blue will be displayed in #015cf8 (run code snippet for result).

Conclusion: The difference between an ID and a class is that the first one is unique, and the second one is not. This means that each element can have only one ID, and each page can have only one element with that ID. When using the same ID on multiple elements, the code won’t pass validation. But as the classes are not unique, the same class can be used on multiple elements, and vice versa, we can use several classes on the same element.

Mandeep Kaur
  • 69
  • 3