HTML Class Attribute: Syntax, Uses, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Class Attribute Showcase</title>
    <style>
        /* Base class */
        .btn { padding: 10px 18px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; transition: 0.2s; }
        /* Modifier classes */
        .btn-success { background-color: #16a34a; color: white; }
        .btn-danger { background-color: #dc2626; color: white; }
        .btn-large { padding: 14px 28px; font-size: 1.1rem; }
        .card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; max-width: 400px; }
        .highlight { border-left: 4px solid #2563eb; background: #eff6ff; }
    </style>
</head>
<body>
    <h2>Reusing HTML Classes</h2>

    <!-- Multiple classes applied to buttons -->
    <button type="button" class="btn btn-success btn-large">Confirm Order</button>
    <button type="button" class="btn btn-danger">Cancel</button>

    <!-- Combining utility classes on cards -->
    <div class="card highlight" id="promoCard">
        <h3>Special Membership Promotion</h3>
        <p>Save 30% when registering with an annual plan.</p>
    </div>

    <script>
        // Interacting with classes via JavaScript
        const card = document.getElementById('promoCard');
        card.classList.add('shadow-lg');
    </script>
</body>
</html>