HTML Classes

The class attribute in HTML is used to define a class name for an HTML element. This class name can then be used to apply CSS styles to multiple elements at once, or to select elements in JavaScript for manipulation.

1. Basic Usage of the class Attribute

To use the class attribute, add it to an HTML element with the desired class name. Multiple elements can share the same class name.

<div class="highlight">
    <p>This paragraph is highlighted with a yellow background.</p>
</div>
<div class="highlight">
    <p>This paragraph is also highlighted with a yellow background.</p>
</div>

2. Applying Multiple Classes

You can apply multiple classes to a single element by separating the class names with spaces.

<div class="highlight center-text bold-text">
    <p>This paragraph is highlighted, centered, and bold.</p>
</div>

3. Styling with CSS

You can define styles for class names in CSS and apply those styles to any element with the corresponding class name.

<style>
    .blue-text {
        color: blue;
    }
    .large-text {
        font-size: 1.5em;
    }
</style>

<p class="blue-text">This text is blue.</p>
<p class="large-text">This text is large.</p>
<p class="blue-text large-text">This text is blue and large.</p>

4. Using Classes with JavaScript

You can also use JavaScript to add, remove, or toggle classes on elements, allowing for dynamic styling and interactions.

<button onclick="document.getElementById('myDiv').classList.toggle('highlight');">Toggle Highlight</button>
<div id="myDiv">
    <p>This div can be highlighted using JavaScript.</p>
</div>

Conclusion

The class attribute is a powerful tool in HTML that allows you to apply styles to multiple elements efficiently. By using class names, you can create consistent and reusable styles across your web pages.