Classes and identifiers in a HTML document

In all HTML elements used for the creation of websites we can add attributes, among which the most common are the classes and identifiers. These are used to interact with the elements, both to modify their design and to create changes in them. There are two types of attributes intended for this, "class" and "id".

Classes and identifiers. | https://css-tricks.com/

id: It allows to identify a single section or block, in a standard way there should not be two or more elements with the same identifier. When you want to modify an element (only CSS) with this attribute, it is necessary to prepend the number sign (#) to its name.

class: It is similar to id, but with the great advantage that it can be used in two or more elements. When you want to modify an element (only CSS) with this attribute, it is necessary to prepend a dot (.) to its name.

Both attributes, like any other, require a value, in the case of these, their value is the name that we decide to place on the element that we want to modify.

The "class" attribute.
To understand its use, we can imagine a website where we want to modify the appearance of certain <span> elements and for that we need to use the "class" attribute.

In the following example we have 3 different lines of text, two <span> elements are defined with the same value in the attribute (class), thanks to this we can also modify the appearance of both elements.

Code:

<style>
.name {
color: red;
}
</style>
<span> Content 1 </span><br/>
<span class="name"> Content 2 </span><br/>
<span class="name"> Content 3 </span>

Result:

Content 1
Content 2
Content 3

As you can see in the previous example, only the elements that had the attribute "class" were modified and the remaining element had no change. However, this does not mean that any element that has the same attribute will be modified in the same way, at least if we do not want it, it would not have to be that way. This is achieved by defining in the CSS styles to which specific elements we want to apply the change by by placing before the dot or the number sign, the name of the element, for example: span.name and div.name, the above will allow us to use the Same name for the attribute but with different CSS styles for each one. Below you can see an example.

Code:

<style>
span.name {
color: red;
}
div.name {
border: solid 1px blue;
}
</style>
<div class="name">
<span> Content 1 </span><br/>
<span class="name"> Content 2 </span><br/>
<span class="name"> Content 3 </span>
</div>

Result:

Content 1
Content 2
Content 3

The "id" attribute.
In the case of the "id" attribute everything happens exactly the same that the attribute "class", however this can only be used in an element of the same type, you can see an example below.

Code:

<style>
#name {
color: red;
}
</style>
<span> Content 1 </span><br/>
<span id="name"> Content 2 </span>

Result:

Content 1
Content 2

To be used in elements of different types, CSS styles are also applied as we showed above for the class attribute, you can see an example below.

Code:

<style>
span#name {
color: red;
}
div#name {
border: solid 1px blue;
}
</style>
<div id="name">
<span> Content 1 </span><br/>
<span id="name"> Content 2 </span>
</div>

Result:

Content 1
Content 2