Lesson 6 · about 15 minutes

📦 Every Brick is a Box

Today you learn the biggest secret in CSS: every single thing on a page is secretly a box. Once you see the boxes, you can never unsee them — and you can start designing like a pro.

🎬 Watch first (90 seconds)

The secret X-ray vision

Your headline? A box. Your paragraphs? Boxes. Your whole list? A box. The browser draws EVERYTHING as invisible rectangles stacked on the page. CSS lets you control the layers of each box.

Think of a framed photo hanging on a wall:

• Content = the photo itself (your words or picture).
• Padding = the white mat around the photo, INSIDE the frame. Breathing room.
• Border = the frame. A line you can actually see.
• Margin = the empty wall space between this frame and the next frame. It keeps boxes from bumping into each other.

.card {
  background-color: lightyellow;  /* paint inside the box */
  padding: 20px;                  /* the mat (inside space) */
  border: 3px solid purple;       /* the frame */
  border-radius: 12px;            /* round the corners! */
  margin: 30px;                   /* wall space (outside) */
}

Why is class such a big deal? Because p { ... } paints EVERY paragraph the same. But real pages need one special paragraph, one special box. Classes let you point at just SOME bricks. Almost every line of website code you'll ever read (including code an AI writes for you!) is full of class="..." — after today, you can read it.

One more trick: give a box a background-color while you work. It makes the invisible box VISIBLE, so you can watch the padding and margin do their thing.

🛠️ Build it (the fun part)

1. Open your practice/myshop.html file in VS Code.
2. Find your feature list (the <ul> with all its <li> lines). Wrap the WHOLE list in a <div> brick with a class name:

   <div class="card">
     <ul>
       <li>Ties itself in 2 seconds</li>
       <li>Glows in the dark</li>
     </ul>
   </div>

   A <div> is a plain empty box — it does nothing until CSS gives it a job.
3. Now, inside your <style> section, add a rule for your new class (the dot before card is the magic — it means "the bricks I named card"):

   .card {
     background-color: lightyellow;
     padding: 20px;
     border-radius: 12px;
     margin: 30px;
   }

4. Save (⌘S) and refresh the browser (⌘R). Boom — your list is floating in a soft rounded card! 🎉
5. Play with it: change padding: 20px to padding: 5px and refresh. See the mat shrink? Now try adding a frame: border: 3px solid purple;

🕹️ Try it right here — the lesson checks your code!

Type in the dark box, watch the preview update live, then press Check my code ✔ to see if you nailed the task.

🔨 Now break it!

Back in practice/myshop.html — break it, predict, refresh. Guess what will happen BEFORE you look!

1. In .card, set margin: 50px; — refresh. Now set margin: 0; — refresh again. Watch your card push away from everything, then snap right up against it. That's the wall space!
2. Set border-radius: 50%; on the card. Whoa. What shape is that trying to be? (Try it on a small square-ish box and you get a perfect circle!)
3. Set padding: 0; and look closely — the words now touch the very edge of the colored box. No mat, no breathing room. Put the padding back; doesn't it feel nicer?

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?