HTML Classes

The div lesson left you with boxes that need a handle for style. That handle is usually the class attribute: a reusable name you put on one or many elements so CSS (and later JavaScript) can find the group. A class does not change the element’s meaning the way h2 or nav does — it labels the element for presentation and behavior hooks. Think of class names as stickers: many items can wear the same sticker, and one item can wear several.

Why shared names beat one-off labels

If every paragraph gets a brand-new unique name, your stylesheet balloons and nothing stays consistent. Shared classes (note, tip, card) let one rule style many places. You still keep semantic tags underneath — a tip can be a p class="tip", not a mysterious empty wrapper. Classes describe how you treat the content in your design system; tags describe what the content is.

Direct answer

Write class="note" on an element. Many elements may reuse note. One element may list several classes separated by spaces: class="card featured". In CSS, target a class with a leading dot: .note { … }. Do not put # inside the HTML attribute value — # belongs to CSS id selectors, covered next. Prefer short lowercase names with hyphens if you need multi-word labels (featured-tip).

Shared class on several elements

Two paragraphs can share class="note" so one stylesheet rule colors both. The HTML attribute holds the bare name; the CSS rule adds the leading dot.

Reading the shared-class sample

• Both paragraphs carry the same note label
• .note in CSS means “any element with class note”
• Color and weight apply to the whole group from one rule
• Change the text freely; the shared hook stays
• If only one paragraph changes color, check for typos in the attribute (notes vs note)
• The style block is a tiny demo — real projects often move rules to a .css file later

Multiple classes on one element

Sometimes a card needs the base card look plus a special featured accent. List both names in one attribute, separated by spaces. Order in the attribute does not create hierarchy by itself; CSS specificity and source order decide which declarations win when rules conflict.

Reading the multiple-class sample

• card and featured are two tokens in one class attribute
• .card sets padding and a neutral border
• .featured strengthens the border color for emphasis
• Both rules can apply to the same div because it owns both names
• Avoid commas or semicolons inside the HTML attribute — spaces only
• Later you may write .card.featured in CSS to require both; beginners can start with separate rules

Naming habits that scale

Good beginner names describe a role or pattern (tip, card, warning), not a one-time visual (blueTextOnLeft). Keep spelling consistent. Do not start class names with a digit. Skip spaces inside a single name — spaces always start a new class token. When a name is temporary, still make it readable so future-you knows why it exists.

Practice in your editor

1. Mark two paragraphs with class="tip".
2. Style .tip with a color or padding in a <style> block.
3. Add a second class on one paragraph (for example urgent) and style .urgent differently.
4. Confirm both tips share the base look and only one shows the extra style.
5. Intentionally mistype a class name once, watch the style fail, then fix it.
6. Rewrite one tip as class="tip tip" (duplicate token) and note that duplicates add nothing useful — clean it back to one tip.
7. Write one sentence listing the HTML attribute form and the CSS selector form for your tip.
8. Optional: move the same classes onto a div.card from the previous lesson.

Easy mistakes

• Putting # inside the HTML class attribute (that # is for CSS id selectors)
• Using commas or slashes instead of spaces between class names
• Inventing a brand-new unique class for every element when sharing would work
• Writing .note in the HTML attribute instead of note
• Mixing wildly inconsistent casing (Tip vs tip) across the page
• Choosing names so long they read like sentences

Summary

• class labels elements for CSS and scripts without changing HTML meaning
• Many elements can share one class; one element can list many classes
• HTML uses bare names; CSS class selectors use a leading dot
• Separate multiple names with spaces only
• Prefer short, reusable, lowercase names
• Next: the id attribute for unique hooks on a single element