Cascading Style Sheets (CSS)

1. Specificity & The Cascade

When multiple CSS styles target the same HTML element, the browser runs a bidding scoring sheet to decide which style wins.

• Analogy: A points-based bidding auction.

                  CSS Specificity Score Sheet
  ┌────────────────────────────────────────────────────────┐
  │ Selection Type          │ Points   │ Selector Example  │
  ├─────────────────────────┼──────────┼───────────────────┤
  │ Inline Styles           │ 1000     │ style="..."       │
  │ ID Selectors            │ 100      │ #header           │
  │ Classes / Attributes    │ 10       │ .btn, [type=""]   │
  │ Elements / Pseudo-elems │ 1        │ div, p, ::before  │
  │ Universal Selector      │ 0        │ *                 │
  └────────────────────────────────────────────────────────┘

The selector with the highest score wins the auction and styles the element.

• If two selectors have the exact same score, the last bidder (the style declared lower down in the stylesheet) wins the auction.
• The !important rule is an immediate override card. It overrides standard specificity points, but should be used sparingly because it makes debugging cascade overrides difficult.

/* Specificity: 0-1-0-1 (101 points) */
#menu a { color: blue; }

/* Specificity: 0-0-2-1 (21 points) */
.nav-item.active a { color: red; }

/* In this battle, #menu a wins, and the links are colored blue! */

2. The Box Model & Margin Collapsing

Every HTML element is rendered as a rectangular box.

• Analogy: A packaged shipping box.
  • Content: The fragile item inside.
  • Padding: Bubble wrap inside the box protecting the item.
  • Border: The rigid cardboard walls of the box.
  • Margin: The empty buffer zone around the outside of the box so it doesn't bump into other boxes.

       ┌─────────────────────────────────────────────┐
       │                   MARGIN                    │
       │  ┌───────────────────────────────────────┐  │
       │  │                BORDER                 │  │
       │  │  ┌─────────────────────────────────┐  │  │
       │  │  │             PADDING             │  │  │
       │  │  │  ┌───────────────────────────┐  │  │  │
       │  │  │  │          CONTENT          │  │  │  │
       │  │  │  │                           │  │  │  │
       │  │  │  └───────────────────────────┘  │  │  │
       │  │  └─────────────────────────────────┘  │  │
       │  └───────────────────────────────────────┘  │
       └─────────────────────────────────────────────┘

Box-Sizing: content-box vs. border-box

• box-sizing: content-box (Default): You buy a box for a 10-inch item. But after adding 2 inches of padding and 1 inch of border, the total box dimensions expand to 13 inches! Actual Width = Width + Padding + Border
• box-sizing: border-box (Standard): You specify the box must be exactly 10 inches. The post office shrinks the bubble wrap inside so the outer dimensions are strictly 10 inches. Actual Width = Configured Width (Padding and Border are inside)

Margin Collapsing: Personal Space Gaps

When two block boxes sit stacked on top of each other, their vertical margins do not add up.

• Analogy: Two people standing next to each other. One wants 3 feet of personal space (margin-bottom), and the other wants 4 feet (margin-top). Instead of standing 7 feet apart, they stand 4 feet apart (the larger margin swallows the smaller one).

3. Layouts: Flexbox vs. Grid

• Flexbox (1-Dimensional): Analogy: A flexible clothesline. You hang shirts side-by-side. You can stretch the line, compress it, or wrap it, but it flows along a single main axis string.
• Grid (2-Dimensional): Analogy: A cabinet designer's blueprint drawing. You define rows and columns first, and then slide drawers into precise X-Y coordinate slots.

/* Flexbox setup */
.navbar {
  display: flex;
  justify-content: space-between; /* Space items out */
  align-items: center;            /* Center vertically */
}

/* Grid setup */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

4. GPU Compositing & Animation Performance

• Reflow & Paint (Slow): If you animate properties like width, height, left, or top, the browser must recalculate the dimensions of that box and all surrounding elements, and then repaint the pixels on every frame. Analogy: Redrawing every page of a flip-book animation by hand.
• Compositing (Fast): If you animate using transform: translate3d() or opacity, the browser puts that element on its own separate clear plastic sheet (GPU Layer). It leaves the background sheet untouched and simply slides the plastic sheet around.
  • Analogy: Moving transparency sheets on an overhead projector. Extremely fast and yields smooth 60fps/120fps animations.

5. Conceptual Quizzes

6. Practice Problems