CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Part 1 of 18 · ~2 min

Overview

CSS gets blamed for being unpredictable, but the unpredictability has a pattern to it once you notice it: the declaration you're staring at is almost never the one that's wrong. It's an ancestor two levels up with a transform on it. It's a stylesheet that got linked in after yours. It's a <span> quietly refusing to take the width you gave it. There's a short, fixed list of mechanisms behind every one of these — how a box is actually sized, who wins when two rules disagree, what gets inherited and what doesn't, how stacking and positioning interact, and whichever layout system is doing the arranging — and none of it is actually mysterious once you can name the mechanism. What makes CSS feel like it's improvising is almost always that these got learned one isolated screenshot at a time, never watched colliding together inside one real, messy component.

So this reference builds one component, start to finish: a product card. The plain kind — an image, a name, a price, an "Add to cart" button. Deliberately unglamorous, and that's exactly why it works: a card like this gets reused everywhere on a real storefront, in shapes nobody designed for on day one — a tidy three-across grid on the category page, a cramped horizontal scroller under "You might also like," a slim row inside a slide-out cart. Making one card survive all three, honestly, is most of what this reference is actually about.

Here's where it starts:

<article class="card">
  <img src="/img/trail-runner-2.jpg" alt="Trail Runner 2 running shoe, side profile" />
  <h3>Trail Runner 2</h3>
  <span class="price">$118</span>
  <button>Add to cart</button>
</article>

.card {
  width: 260px;
  padding: 16px;
  border: 1px solid #ddd;
}

Two rules, and it's already carrying a bug that won't show its face until the next chapter. By the end of this reference, that same card will hold its width no matter how much padding it earns, survive three separate stylesheets touching it without turning into an !important standoff, carry a sale ribbon and a wishlist badge that both stay exactly where they're told to, retheme itself instantly per product category, resize its own internal layout based on how much room it's actually been handed rather than how wide the browser window is, and stay usable by someone who's never touched a mouse.

Read it front to back if you can — later chapters lean on rules the earlier ones established, and the card accumulates rather than resetting each time. If you're here for one topic, the sidebar drops you in directly; every chapter opens by naming which version of the card it's picking up.