HTML Class Attribute

The class attribute is used to group elements so you can style them with CSS or select them with JavaScript. You can give multiple elements the same class.

1. Basic Usage

Use the class attribute in HTML:

<p class="red-box">This paragraph is red.</p>
<p class="green-box">This paragraph is green.</p>

2. Multiple Elements with Same Class

You can apply the same class to multiple elements:

<p class="red-box">Red box 1</p>
<p class="red-box">Red box 2</p>

3. Multiple Classes on One Element

You can assign more than one class by separating them with a space:

<p class="red-box green-box">Red & Green</p>

4. Styling Classes in CSS

Use .classname in CSS to style:

.red-box { background-color: red; color: white; padding: 10px; }
.green-box { background-color: green; color: white; padding: 10px; }

Next Lesson → HTML ID Attribute

Previous Lesson → HTML <span> Element