CSS Classes in HTML

CSS classes are used to group elements and apply styling to them at the same time.

Defining a Class

<div class="container">Content</div>
<p class="text bold">Paragraph</p>
<div class="card primary">Card</div>

CSS Class

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.text {
    color: #333;
}

.bold {
    font-weight: bold;
}

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.primary {
    border-left: 4px solid #1e40af;
}

Multiple Classes

<div class="card primary large">Large Card</div>
<div class="card secondary small">Small Card</div>

Case Study: Campus UI Components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus UI Components</title>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-primary {
            border-left: 4px solid #1e40af;
        }

        .card-success {
            border-left: 4px solid #059669;
        }

        .card-warning {
            border-left: 4px solid #f59e0b;
        }

        .card-danger {
            border-left: 4px solid #dc2626;
        }

        .text-primary {
            color: #1e40af;
        }

        .text-success {
            color: #059669;
        }

        .text-warning {
            color: #f59e0b;
        }

        .text-danger {
            color: #dc2626;
        }

        .bg-primary {
            background: #1e40af;
            color: white;
        }

        .bg-success {
            background: #059669;
            color: white;
        }

        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-primary {
            background: #1e40af;
            color: white;
        }

        .btn-success {
            background: #059669;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Campus UI Components</h1>

        <div class="card card-primary">
            <h2 class="text-primary">Academic Information</h2>
            <p>The even semester course schedule is now available.</p>
        </div>

        <div class="card card-success">
            <h2 class="text-success">Registration Successful</h2>
            <p>You have been registered as a new student.</p>
        </div>

        <div class="card card-warning">
            <h2 class="text-warning">Warning</h2>
            <p>Tuition must be paid before the 15th.</p>
        </div>

        <div class="card card-danger">
            <h2 class="text-danger">Error</h2>
            <p>An error occurred while processing the data.</p>
        </div>

        <button class="btn btn-primary">Save</button>
        <button class="btn btn-success">Submit</button>
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to create utility classes.

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

Best Practices

1. Naming convention: Use BEM or utility-first
2. Single responsibility: One class for one function
3. Reusable classes: Create classes that can be reused
4. Utility classes: For quick styling
5. Component classes: For UI components

Summary

CSS classes group elements for styling. Use a consistent naming convention and create reusable classes.