01 · Orientation

Welcome! This interactive CSS textbook covers from the cascade to advanced layout and animation. Every topic comes with runnable, editable examples.

02 · CSS Anatomy

selector { property: value; /* declaration */ }

.card { padding: 1rem; border: 1px solid #333; }

Use separate files (styles.css) or inline <style>. Avoid inline style="…" except for quick prototypes.

03 · Cascade & Specificity

• Origin: user-agent < user < author; Importance: normal vs !important
• Specificity: inline (1000) > id (100) > class/attr/pseudo-class (10) > tag/pseudo-element (1)
• Later wins if specificity ties (within same layer)

/* Competing rules */
#title { color: red; }
.title { color: blue; }
h1 { color: green; }
/* Result: red, due to higher specificity */

04 · Selectors (Core & Advanced)

/* Type, class, id */
h1 {} .card {} #main {}
/* Attribute & state */
input[type="email"]:valid {}
/* Combinators */
nav ul li a {} /* descendant */
article > h2 {} /* child */
h2 + p {} /* adjacent sibling */
h2 ~ p {} /* general sibling */

/* Pseudo-classes */
a:hover, a:focus {}
:root { --brand: #3b82f6 }
:nth-child(odd){}
:is(h1,h2,h3){margin:0}
/* Pseudo-elements */
button::before{content:"★"}
/* :has() for parent selection (modern browsers) */
.card:has(img){outline:2px solid var(--brand)}

05 · Units & Sizing

• Absolute: px; Relative: em, rem, %; Viewport: vw, vh, svh, dvh
• Modern: clamp(min, preferred, max) for fluid sizing

h1{font-size:clamp(1.5rem, 2vw + 1rem, 3rem)}

06 · Color, Backgrounds & Borders

/* Color spaces */
:root{ --ink:#111; --accent:hsl(200 90% 55%); }
.card{ color:var(--ink); background:linear-gradient(180deg, #00000022, transparent) }

.box{ background: url(bg.svg) no-repeat center/cover, #0f172a;
      border: 2px dashed #10b981; border-radius: 16px; }

07 · Typography & Web Fonts

@font-face{ font-family:"InterVar"; src:url(Inter-var.woff2) format("woff2"); font-display:swap; }
body{ font-family: InterVar, system-ui, sans-serif; line-height:1.6; }
.lead{ font: 600 1.125rem/1.5 InterVar; letter-spacing:.2px }

Use font-display: swap, and system stacks if you don't need a brand font.

08 · Box Model

*{ box-sizing: border-box }
.card{ padding:16px; border:1px solid #333; margin:12px; }

Understand content, padding, border, margin and how they affect layout.

09 · Display & Visibility

• display: block, inline, inline-block, flow-root
• Modern: display: contents;, display: grid;, display: flex;
• Visibility: visibility:hidden vs display:none

10 · Positioning & Stacking

• position: static | relative | absolute | fixed | sticky
• z-index works within stacking contexts

.badge{ position:absolute; inset:8px 8px auto auto; z-index:10 }

11 · Flexbox

.row{ display:flex; gap:12px; align-items:center; }
.row > .item{ flex: 1 1 200px; }

.center{ display:flex; justify-content:center; align-items:center; min-height:200px }

12 · CSS Grid

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px }

.layout{ display:grid; grid-template: "h h" auto "s m" 1fr "f f" auto / 240px 1fr; }
header{ grid-area:h } aside{ grid-area:s } main{ grid-area:m } footer{ grid-area:f }

13 · Media & Container Queries

@media (max-width: 700px){ .sidebar{ display:none } }
@container card (min-width: 500px){ .card{ grid-template-columns: 1fr 1fr } }

Use container queries for component‑driven layouts. Requires a containment context (e.g., container-type: inline-size; on the parent).

14 · Custom Properties (CSS Variables)

:root{ --space:16px; --brand:#3b82f6 }
.card{ padding:var(--space); border-color:var(--brand) }
.dark{ --brand:#10b981 }

15 · CSS Functions: calc(), min(), max(), clamp()

.title{ font-size: clamp(1.2rem, 2vw + .5rem, 2.5rem) }
.box{ height: calc(100vh - 120px) }

16 · Transforms, Transitions, Animations

.btn{ transition: transform .2s ease, box-shadow .2s }
.btn:hover{ transform: translateY(-2px); box-shadow:0 10px 20px #0003 }
@keyframes pulse{ from{transform:scale(1)} 50%{transform:scale(1.05)} to{transform:scale(1)} }
.badge{ animation: pulse 2s infinite }

17 · Images, Object-Fit, Filters

img.cover{ width:100%; height:240px; object-fit:cover; border-radius:12px }
.photo{ filter: grayscale(100%) contrast(1.1) }

18 · Pseudo‑classes & Pseudo‑elements

input:focus-visible{ outline: 2px solid var(--brand) }
.list li::marker{ color: var(--brand) }
::selection{ background: #3b82f666 }

19 · Logical Properties & Writing Modes

.card{ padding-block: 1rem; margin-inline: auto; }
.rtl{ direction: rtl; }

20 · Cascade Layers & Feature Queries

@layer reset, base, components, utilities;
@layer reset{ *,*::before,*::after{ box-sizing:border-box } }
@layer components{ .btn{ padding:.6rem 1rem; border-radius:10px } }
@supports (anchor-name: --a){ /* progressive enhancement */ }

21 · Print Styles

@media print{ nav, .no-print{ display:none !important } body{ color:#000 } }

22 · Accessibility & Prefers Media

@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important } }
@media (prefers-color-scheme: dark){ :root{ color-scheme: dark } }

23 · Performance Tips

• Minimize repaints/reflows; avoid heavy box-shadows on huge lists
• Use content-visibility:auto for long pages; will-change sparingly
• Prefer CSS over JS for animations

.section{ content-visibility: auto; contain-intrinsic-size: 1px 500px }

24 · Live Code Runner

25 · Quick Quiz

26 · Cheatsheets

27 · Roadmap & Resources

1. CSS Foundations (this page)
2. Components library (buttons, cards, nav, modal)
3. Responsive design system (type scale, spacing, color tokens)
4. Performance & accessibility audits

Bookmarks: MDN CSS, web.dev/learn, Smashing Magazine.