← Month 2 — Modern CSS & layoutWeek 128 min

Cascade, specificity, box model

Objectives

Master: CSS cascade
Master: specificity
Master: box model

Lesson

This lesson is part of the year-long Code Academy Alfred path. Goal: understand CSS cascade, specificity, box model in real web / mobile-web design conditions.

The cascade decides which rule wins: origin, specificity, order. !important is an alarm signal, not a strategy.

Box model: content, padding, border, margin. box-sizing: border-box makes widths predictable — de facto standard.

Units: rem for text/spacing tied to accessibility, px for hairline borders, %/fr for fluid layouts, dvh for mobile.

Practice immediately: rebuild the example, then change it. Memory comes from active repetition, not passive reading.

If you get stuck, use Cursor with a precise prompt (context + goal + constraints), then explain the generated diff yourself.

Practice lab

Switch to border-box and set a readable dark text color (#0b1f1c).

○ border-box○ #0b1f1c

<style>
      * { box-sizing: content-box; }
      .card { width: 200px; padding: 20px; border: 10px solid #1D4ED8; }
    </style>
    <div class="card">Largeur réelle = ?</div>

Assessment

1. box-sizing: border-box includes…

Previous Next