This is where we write about the mental models:

• normal flow
• block vs inline
• the cascade
• specificity
• inheritance
• semantics as the ground beneath CSS

This chapter answers the question:

“What is CSS doing before I touch anything?”

It gives us the physics of the system.

Once we understand the physics,
we can introduce the tools that extend normal flow:

• flexbox for alignment
• grid for structure
• positioning for exceptions
• flow vs out‑of‑flow
• container queries
• responsive patterns

This chapter answers:

“How do I guide the browser’s layout decisions?”

It builds directly on Foundations.

Now that we know how the browser arranges elements,
we learn how to target them:

• basic selectors
• attribute selectors
• state selectors
• pseudo‑elements
• combinators
• what selectors cannot do

This chapter answers:

“How do I point to the thing I want to style?”

It’s the bridge between structure and styling.

This chapter is about the HTML–CSS relationship:

• semantic HTML
• meaningful structure
• nesting and hierarchy
• component boundaries
• naming patterns
• when to use classes
• when to adjust markup instead of forcing CSS

This answers:

“How do I shape the document so CSS can do its job?”

It’s the architectural chapter — the one that teaches restraint.

Only now do we talk about the surface:

• color
• typography
• spacing
• borders
• shadows
• transitions
• motion with intention
• theming
• accessibility in visual design

This chapter answers:

“How do we express the look and feel with clarity and care?”

It’s where the craft becomes visible.

This chapter is the quiet glossary:

• key terms
• mental models
• naming conventions
• conceptual anchors
• AI‑steering phrases

short definitions that reinforce understanding

It answers:

“What language do we use to talk about CSS clearly?”

This is the chapter that makes the Primer evergreen.

Why This Arc Works

It mirrors how humans learn:

• Understand the system’s physics (Foundations)
• Guide the layout (Layout)
• Find the things you want to style (Selectors)
• Shape the document so CSS can succeed (Structure)
• Express the visual layer (Visual Style)
• Name the concepts (Vocabulary)

It also mirrors how AI should be guided:

• start with meaning
• then structure
• then layout
• then styling
• always with clear vocabulary

This is why your Primer feels evergreen —
it teaches the thinking, not the trends.