HTML ID and Classes

HTML offers multiple ways to select and style elements. Two of the most commonly used selectors are IDs and Classes. This blog explores what they are, how to use them, and their differences.

What is an ID

An ID is a unique identifier assigned to an HTML element. It is used to uniquely identify an element on a web page. IDs are often used to style or manipulate specific elements using CSS or JavaScript.

<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 className="myClass">This is a div with a class.</div>
<p className="myClass">This is a paragraph with the same class.</p>

The Style Tag

The style tag in HTML is used to include embedded CSS (Cascading Style Sheets) within an HTML document. It is commonly placed within the <head> section of the HTML file, although it can technically be used in the <body> as well. The style tag allows you to define the look and feel of various HTML elements on the page, including their colors, sizes, margins, and other visual styles.
Here's a simple example:

index.html

<!doctype html>
<html>
  <head>
    <style>
      /* CSS rules go here */
      p {
        color: blue;
        font-size: 18px;
      }
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is a blue paragraph.</p>
    <p className="highlight">This paragraph has a yellow background.</p>
  </body>
</html>

In this example, we have targeted the second paragraph by its class name in CSS. The style tag is used to add CSS right into HTML. We will learn about CSS and selectors later in the CSS tutorial

Using IDs and Classes in CSS

In CSS, elements with IDs are selected using a hash(#) symbol before the ID, and elements with classes are selected using a dot(.) before the class name.

style.css

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

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

Differences Between IDs and Classes

Uniqueness: IDs must be unique within a page, while classes can be used multiple times.
Specificity: IDs have higher specificity than classes, meaning they override class styles.
Usage: IDs are used to uniquely identify elements, while classes are used to group elements together.
Styling: IDs are often used for unique styling, while classes are used for shared styles.
JavaScript: IDs are commonly used to target elements in JavaScript, while classes are used for styling.

Conclusion

IDs are unique identifiers for elements, while classes are used to group elements together.
IDs are unique and can only be used once per page, while classes can be used multiple times.
IDs have higher specificity than classes, meaning they override class styles.
IDs are often used for unique styling or JavaScript targeting, while classes are used for shared styles.

CoderrShyam