HTML Id & Classes

 

IDs and Classes in HTML

What is an ID?

• An ID is an attribute, a unique identifier assigned to only one HTML element within a page.
• It is often used for unique styling and JavaScript manipulations.

<div id="myUniqueID">This is a div with an ID.</div>

What are Classes?

• The class attribute lets you give the same name to multiple HTML elements. 
• That way, you can easily change their look or behavior all at once. 
• Classes are not unique and can be assigned to multiple elements. 
• They are generally used for applying the same styles or behaviors to a group of elements.

<div class="myClass">This is a div with a class.</div>
<p class="myClass">This is a paragraph with the same class.</p>

Using IDs and Classes in CSS

• Elements with IDs are selected using a hash (#) symbol before the ID.

• Elements with classes are selected using a dot (.) before the class name.

/* CSS for ID */
#myUniqueID {
  background-color: pink;
}

/* CSS for Class */
.myClass {
  font-size: 18px;
}