Skip to main content

HTML Id and Classes

HTML Id and Classes

HTML provides multiple ways to select and style elements. Among the most commonly used selectors are IDs and Classes. This blog will explore what they are, how to use them, and the key differences between them.

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.

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

IDs serve as a way to uniquely identify specific elements on a page, making them ideal for targeting individual elements for styling or scripting purposes.

What are Classes?​

The class attribute allows you to give the same name to multiple HTML elements. This 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.

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

Classes provide a means to group and style elements that share common characteristics. This makes it efficient to apply consistent styles to multiple elements without the need for unique identifiers.

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 class="highlight">This paragraph has a yellow background.</p>
</body>
</html>
http://127.0.0.1:5500/index.html

This is a blue paragraph.

This paragraph has a yellow background.

In this example, we have targeted the second paragraph by its class name in CSS. The style tag is used to add CSS directly into HTML, enabling you to define the appearance of HTML elements on the page.

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;
}

This CSS code demonstrates how to style elements based on their IDs and classes. IDs are selected using "#" followed by the ID name, while classes are selected using "." followed by the class name.

Differences Between IDs and Classes​

  1. Uniqueness: IDs are unique and can only be assigned to one element on the page. Classes can be reused on multiple elements.

  2. JavaScript: IDs are often used for JavaScript operations because they provide a unique identifier for specific actions.

  3. Styling: Both IDs and classes can be used for styling elements, but IDs have higher specificity. This means that styles applied through IDs override styles applied through classes.

Conclusion​

Understanding the difference between IDs and Classes is crucial for effective web development. IDs are used for unique elements, while classes are used for grouping elements. They both play a significant role in styling and scripting web pages, offering flexibility and control over the presentation and behavior of HTML elements.