HTML Classes & Id’s

29 March 2025 | Category: HTML

In HTML, classes and IDs are attributes used to identify and style elements. They allow us to target specific elements for CSS styling, JavaScript manipulation, and more.

1. What is a Class in HTML?

The class attribute is used to group multiple elements under the same name.
You can apply the same class to multiple elements.
Commonly used for applying CSS styles to a group of elements.

Syntax:

<tag class="className">Content</tag>

Example:

<style>
  .highlight {
    background-color: yellow;
    color: red;
  }
</style>

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">This paragraph is also highlighted.</p>
<p>This paragraph does not use the class.</p>

2. What is an ID in HTML?

The id attribute uniquely identifies a single element.
IDs must be unique within a document.
Useful for targeting specific elements with CSS or JavaScript.

Syntax:

<tag id="uniqueID">Content</tag>

Example:

<style>
  #header {
    background-color: blue;
    color: white;
  }
</style>

<h1 id="header">This is the Header</h1>
<p>This paragraph is not affected.</p>

3. Differences Between Classes and IDs

Feature	Class	ID
Uniqueness	Can be reused on multiple elements.	Must be unique within the document.
Selector in CSS	`.className`	`#idName`
Purpose	Used for grouping elements.	Used to identify a specific element.
Priority	Lower specificity.	Higher specificity.

4. Combining Classes and IDs

You can use both class and id attributes on the same element.

Example:

<style>
  .content {
    font-size: 16px;
    color: green;
  }
  #intro {
    font-weight: bold;
  }
</style>

<p id="intro" class="content">This is a styled paragraph.</p>

The class styles apply to multiple elements.
The id styles apply specifically to this element.

5. Targeting Classes and IDs in CSS

Use a dot (.) to target a class.
Use a hash (#) to target an ID.

Example:

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
  #uniqueBox {
    background-color: orange;
  }
</style>

<div class="box"></div>
<div id="uniqueBox" class="box"></div>

6. Targeting Classes and IDs in JavaScript

You can access and manipulate classes and IDs with JavaScript.

Example with ID:

<div id="myDiv">Click me!</div>

<script>
  const div = document.getElementById("myDiv");
  div.addEventListener("click", function () {
    div.style.backgroundColor = "yellow";
  });
</script>

Example with Class:

<div class="myClass">Click me!</div>
<div class="myClass">Click me too!</div>

<script>
  const elements = document.querySelectorAll(".myClass");
  elements.forEach((el) => {
    el.addEventListener("click", () => {
      el.style.color = "red";
    });
  });
</script>

7. Multiple Classes on an Element

An element can have multiple classes by separating them with spaces.

Example:

<style>
  .text-bold {
    font-weight: bold;
  }
  .text-red {
    color: red;
  }
</style>

<p class="text-bold text-red">This text is bold and red.</p>

8. Common Mistakes

Using the Same ID Multiple Times
- IDs must be unique. Reusing an ID can break functionality.
<div id="duplicateID">Item 1</div> <div id="duplicateID">Item 2</div> 
Overusing IDs
- Use classes for styling groups of elements. Reserve IDs for unique purposes like JavaScript manipulation.
Forgetting to Combine Classes and IDs
- You can combine classes and IDs to add versatility in styling.

9. Practical Example: Styling a Web Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Classes and IDs Example</title>
  <style>
    /* Class styling */
    .button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .blue {
      background-color: blue;
      color: white;
    }
    .green {
      background-color: green;
      color: white;
    }

    /* ID styling */
    #mainHeading {
      font-size: 24px;
      text-align: center;
      color: navy;
    }
  </style>
</head>
<body>
  <h1 id="mainHeading">Welcome to Classes and IDs</h1>
  <button class="button blue">Blue Button</button>
  <button class="button green">Green Button</button>
</body>
</html>

10. Conclusion

Use classes for styling groups of elements and reuse styles.
Use IDs for unique, specific elements and when interacting with JavaScript.
Avoid overusing IDs and prefer classes for styling when possible.