CSS Fundamentals

CSS (Cascading Style Sheets) controls how HTML looks: colors, spacing, layout, fonts. The word cascading means rules combine and conflict resolution follows specific priorities.

Selectors

Selectors target elements to style them:

h1 {
  color: #00ff41;
}

.card {
  background: #111;
}

#hero {
  padding: 2rem;
}

• h1 — element selector
• .card — class selector
• #hero — id selector

The cascade

When rules conflict, specificity and source order decide the winner. A rule with a higher specificity wins; ties go to the one declared last.

The box model

Every element is a box made of four layers:

┌──────────────────────────┐
│        margin            │
│  ┌────────────────────┐  │
│  │      border        │  │
│  │  ┌──────────────┐  │  │
│  │  │   padding    │  │  │
│  │  │  ┌────────┐  │  │  │
│  │  │  │content │  │  │  │
│  │  │  └────────┘  │  │  │
│  │  └──────────────┘  │  │
│  └────────────────────┘  │
└──────────────────────────┘

From the inside out: content → padding → border → margin.