🔍 What is the class Attribute in HTML?

The class attribute in HTML is used to assign one or more class names to an element. These class names can then be targeted by CSS or JavaScript to apply styles or behaviors.

🧱 Syntax

You use the class attribute within an HTML tag, like so:

<div class="box">Content here</div>

🎨 Styling Classes with CSS

In CSS, you can style elements by referencing their class with a . (dot) prefix:

.box {
  padding: 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

You can apply that class to any element:

<div class="box">
  I am styled with the 'box' class!
</div>

🧾 Multiple Classes

You can assign multiple classes by separating them with spaces. This is useful for combining styles:

<div class="card shadow">Multiple classes</div>

📐 Example: Reusable Card

<style>
  .card {
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
  }

  .highlight {
    border: 2px solid orange;
  }
</style>

<div class="card highlight">
  This is a highlighted card.
</div>

💡 JavaScript & Classes

JavaScript can use class names to select or modify elements dynamically.

const boxes = document.querySelectorAll('.box');
boxes.forEach(el => el.style.backgroundColor = 'lightblue');

📌 Best Practices

🔗 Further Learning