Addressing Your Elements Lesson 5 of 7

The Problem: How Does CSS Know What to Style?

• Without a way to address specific elements, CSS can only make sweeping rules: “all paragraphs look like this”
• You want some paragraphs large, some small — one heading red, another blue
• Classes and IDs are the addressing system that lets you say: these specific elements get these specific styles

class — Group Membership

• A class is a label you give to elements that share something in common
• Multiple elements can share the same class
• One element can have multiple classes (space-separated)

<article class="post-card">
  <h3 class="post-title">The Rise of Brutalist Web Design</h3>
  <p class="post-excerpt">An aesthetic movement that rejects decoration...</p>
</article>

<article class="post-card">
  <h3 class="post-title">Typography Rules for Developers</h3>
  <p class="post-excerpt">The five rules designers wish coders knew...</p>
</article>

One CSS rule styles both cards:

.post-card {
  border: 1px solid #ccc;
  padding: 1.5rem;
  border-radius: 6px;
}

Multiple classes on one element — separate them with spaces:

<!-- This card is both a "post-card" and "featured" -->
<article class="post-card featured">
  <h3 class="post-title">Editor's Pick</h3>
</article>

.featured {
  border-color: #b7142e;
  background: #fff5f6;
}

id — Unique Identity

• An ID belongs to exactly one element on the page — think of it as a proper name, not a category
• Use IDs for major landmarks and navigation anchors

<header id="site-header">
  <nav id="main-nav">
    <a href="/">Home</a>
    <a href="/work">Work</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main id="page-content">
  ...
</main>

<footer id="site-footer">
  ...
</footer>

IDs serve two purposes:

• CSS targeting — #site-header { ... } selects that one element
• Anchor links — <a href="#contact"> jumps to the element with id="contact"

Choosing Between Class and ID

Use class when…	Use id when…
Multiple elements share a visual pattern	There’s only ever one of this element per page
You’re defining a reusable component	You need a page anchor (href="#section-name")
You want to combine styles (card + featured + dark)	You need a guaranteed unique selector

• Default rule: use class for almost everything
• Use id sparingly — mainly for navigation anchors and major page landmarks

The <div> Container

• When no semantic element fits, use <div> to group elements for layout or styling
• <div> has no visual appearance and no semantic meaning — it’s a blank container
• It gets its meaning from its class or ID

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

Without classes, these divs are invisible and identical. With classes, they become a named, styleable system.