HTML — Classes

What classes are

The class attribute gives elements a reusable label that CSS and JavaScript can target:

<h2 class="highlight">Members only</h2>
<p class="highlight">This notice applies to members.</p>

.highlight { background-color: yellow; }

What the browser displays

(Both elements share the yellow background — one rule styling many elements.)

That's the superpower: one definition, unlimited users. Change .highlight once and everything wearing that class updates across the whole site.

Syntax

HTML side — just the name, no prefix:

<p class="note">Remember to save.</p>

CSS side — classes get a dot prefix:

.note {
    border-left: 4px solid orange;
    padding-left: 12px;
}
.error {
    color: red;
    font-weight: bold;
}

class="note"   →   .note { ... }
class="error"  →   .error { ... }

Naming: describe purpose, not appearance

<!-- Good: describes what it IS -->
<div class="product-card">
<button class="btn-primary">
<nav class="main-nav">

<!-- Bad: describes what it LOOKS like today -->
<div class="blue-box-small">   <!-- what when the redesign makes it green? -->
<button class="red">           <!-- breaks when branding changes -->

Name by purpose; style by appearance. Appearances change constantly — purposes rarely do.

Multiple classes per element

Space-separate them; each contributes its styles independently:

<style>
    .card     { border: 1px solid #ccc; padding: 16px; }
    .featured { border-color: gold; background: #fffbe6; }
</style>

<div class="card">Regular card</div>
<div class="card featured">Featured card</div>

Element	Gets
class="card"	Border + padding
class="card featured"	Border + padding + gold highlight

This composition pattern powers entire design systems:

<button class="btn">Base</button>
<button class="btn btn-large">Large</button>
<button class="btn btn-danger btn-large">Large red</button>

Three building blocks combine into every variant you need — Bootstrap's btn btn-success btn-lg is exactly this idea.

Classes + JavaScript

Classes aren't just for CSS. JavaScript finds and manipulates elements by class:

const cards = document.querySelectorAll(".card");  // find all
cards.forEach(c => c.classList.add("active"));     // add a class

banner.classList.remove("hidden");                 // toggle visibility

Toggling classes is the standard way JS changes appearance — CSS defines how .hidden looks; JS only decides when. You'll use this constantly in the JavaScript course.

Class vs id — quick orientation

	class	id
Reusable?	Yes, unlimited elements	No — one element per page
CSS selector	.name (dot)	#name (hash)
Typical job	Styling groups	Unique targeting: JS, page anchors

<div class="alert" id="disk-alert">Disk space low.</div>

Both on one element is completely normal.

Common mistakes checklist

1. Appearance-based names (red, big-box) that rot at the first redesign
2. Forgetting the dot in CSS (.note not note) — then wondering why nothing styles
3. Reusing an id across elements — that's what classes are for
4. Spaces in multi-class values being read as one name — class="card featured" is two classes, not "card featured"

Mini Practice

Build buttons.html:

1. Define .btn base styling: padding, border-radius, no underline
2. Add variants .btn-green, .btn-red, .btn-outline
3. Render six buttons mixing base + variants in different combinations
4. Give one button two extra classes and see them all stack
5. Rename a class mid-exercise using editor search-and-replace — appreciate why semantic names make this safe

Next: id →