Class and Id
Class and Id attributes are useful attributes that can be used for any element in a web page. They are useful because they can be used for the selection of particular elements. Once selected these elements can be styled or modified using CSS or JavaScript respectively. Almost all websites use these attributes.
Class
The class attribute is used to specify that the particular element belongs to a class of elements. Once we provide some elements with the same class value, we can style all these elements together using CSS. We can also modify these elements using JavaScript.
<p class="red">This paragraph is red.</p>
You can provide the following CSS inside a style element
.red{
color: red;
}
Only the paragraph elements with the class value of red are modified. The other paragraphs remain the same.
It is possible to have the same class attribute value for different elements like paragraphs, links, etc., You can also restrict the elements to a particular type like paragraphs in both CSS and JavaScript.
Id
The id attribute is used in a similar manner to the class attribute. The difference is that id attribute is used to target one unique element with the id. The class attribute targets multiple elements with the same class name. We can target elements using the id attribute in CSS and JavaScript.
<p id="blue">This paragraph is blue.</p>
You can provide the following CSS inside a style element
#blue{
color: blue;
}
Only the element with the id is modified. All the other elements remain the same.
The id attribute is also used for creating internal page links as seen in a earlier lesson.