HTML Class Attribute

Introduction

In this chapter, you will learn about the HTML class attribute, which is used to define a class for an HTML element.

What is the class Attribute?

The class attribute specifies one or more class names for an HTML element. Class names can be used in CSS to apply styles to elements and in JavaScript to manipulate elements.

Syntax

<element class="class-name">Content goes here.</element>

Adding Multiple Classes

You can assign multiple classes to an element by separating the class names with a space.

Example

<element class="class1 class2 class3">Content goes here.</element>

Styling with CSS

You can use the class attribute to apply CSS styles to specific groups of elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Attribute Example</title>
    <style>
        .red-text {
            color: red;
        }
        .bold-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="red-text">This text is red.</p>
    <p class="bold-text">This text is bold.</p>
    <p class="red-text bold-text">This text is red and bold.</p>
</body>
</html>

Selecting Elements with JavaScript

The class attribute can also be used to select and manipulate elements with JavaScript.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Attribute Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
    <script>
        function highlightText() {
            var elements = document.getElementsByClassName('highlight');
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.color = 'blue';
            }
        }
    </script>
</head>
<body>
    <p class="highlight">This text will be highlighted.</p>
    <p>This text will not be highlighted.</p>
    <p class="highlight">This text will also be highlighted.</p>
    <button onclick="highlightText()">Highlight Text</button>
</body>
</html>

Real-World Use Case: Creating a Card Layout

A common use case for the class attribute is creating a card layout where each card shares common styles but contains different content.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Layout Example</title>
    <style>
        .card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 10px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        .card h2 {
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Card Title 1</h2>
        <p>This is some text inside a card.</p>
    </div>
    <div class="card">
        <h2>Card Title 2</h2>
        <p>This is some more text inside another card.</p>
    </div>
    <div class="card">
        <h2>Card Title 3</h2>
        <p>This is yet another piece of text inside a card.</p>
    </div>
</body>
</html>

Conclusion

The HTML class attribute is used for grouping elements for styling with CSS and for selection with JavaScript. By using the class attribute, you can apply consistent styles and behaviors across multiple elements, making your web pages more organized and easier to manage. Understanding how to use the class attribute effectively is essential for modern web development.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top