Practice connecting selector types to visible targets, then inspect the box model layers in DevTools.
What this covers
- Element selectors target all elements of a given type
- Class selectors target reusable groups
- ID selectors target one unique element and carry higher specificity
- The box model: content, padding, border, and margin as distinct layers
Open the browser DevTools, hover the .box element in the preview, and look at the Box Model panel to see each layer.
<main class="stack">
<h1>Selectors + Box Model</h1>
<p class="hint">Inspect this in DevTools to show content, padding, border, and margin.</p>
<p class="hint">CSS variables are covered in lesson 09.</p>
<p class="callout">Your goal: connect each selector type to a visible target, then inspect box model layers in DevTools.</p>
<section class="card stack">
<h2>Selector Types</h2>
<ul class="explain-list">
<li><strong>Element selector:</strong> targets all elements of one type (example: <code>h1</code>).</li>
<li><strong>Class selector:</strong> targets reusable groups (example: <code>.box</code>).</li>
<li><strong>ID selector:</strong> targets one unique element (example: <code>#special-note</code>).</li>
</ul>
<p>Element selector example: <code>h1 { margin-top: 0; }</code></p>
<p>Class selector example: <code>.box { border: 4px solid ... }</code></p>
<p id="special-note">
ID selector example: <code>#special-note { color: ... }</code>
<span class="meta">ID selectors are more specific than classes and elements.</span>
</p>
</section>
<section class="card stack">
<h2>Box Model Example</h2>
<div class="box">
<p>
This box has width, margin, padding, and border.
<span class="meta">width: 260px; margin: 1rem 0; padding: 1rem; border: 4px solid;</span>
</p>
</div>
</section>
</main>:root {
--bg: #f8fafc;
--card: #ffffff;
--ink: #111827;
--subtle: #4b5563;
--line: #d1d5db;
--accent: #0f766e;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Inter", system-ui, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1rem 3rem;
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 1rem;
}
.stack > * + * {
margin-top: 0.75rem;
}
.hint {
color: var(--subtle);
font-size: 0.95rem;
}
.callout {
border-left: 3px solid var(--accent);
background: #f0fdfa;
padding: 0.6rem 0.75rem;
border-radius: 6px;
color: #134e4a;
font-size: 0.92rem;
}
.explain-list {
margin: 0;
padding-left: 1.2rem;
}
.explain-list li + li {
margin-top: 0.35rem;
}
.meta {
display: block;
margin-top: 0.3rem;
font-size: 0.72rem;
color: #475569;
}
/* Selector examples */
h1 {
margin-top: 0;
}
.box {
width: 260px;
margin: 1rem 0;
padding: 1rem;
border: 4px solid #0f766e;
background: #ecfeff;
}
.box p {
margin: 0;
}
#special-note {
color: #7f1d1d;
font-weight: 700;
}