Table of Contents
02. HTML + CSS + Behavior — The Three Layers of an Interface
How meaning, appearance,
and interaction work together as one system
—Part of CSS Primer for the AI Era — Structure
Every interface is built from three layers:
- HTML — meaning and structure
- CSS — appearance and visual style
- Behavior — interaction, state, and flow
These layers are not separate technologies.
They are perspectives —
three ways of describing the same component.
A quiet mental model:
HTML is → what it is.
CSS is → how it looks.
Behavior is → how it acts.
Nowadays, understanding these layers is not about 'writing code'.
It is about understanding how to communicate with AI
in a way that preserves clarity, intent, and structure.
1. HTML — Meaning and Structure
HTML expresses:
- what something is
- how content is organized
- how elements relate to each other
- what belongs inside what
- the semantic purpose of each part
Examples:
- a
<button>is an action - a
<nav>is a navigation region - a
<header>introduces a section - a
<ul>is a list of related items - a
<form>collects information
HTML is the skeleton of the interface.
It gives CSS something meaningful to style
and gives behavior something meaningful to act upon.
A quiet principle:
If the HTML is unclear,
everything built on top of it
becomes fragile.
2. CSS — Appearance and Visual Style
CSS expresses:
- color
- typography
- spacing
- rhythm
- edges
- shadows
- motion
- density
CSS does not change meaning.
It changes perception.
CSS answers questions like:
- How should this feel?
- How should the eye move?
- How much space should this have?
- What is the visual hierarchy?
- What is the emotional tone?
CSS is the skin of the interface —
it's the layer that turns structure into experience.
A quiet truth:
CSS can enhance meaning,
but it cannot create it.
3. Behavior — Interaction, State, and Flow
Behavior expresses:
- what happens when something is clicked
- how menus open and close
- how forms validate
- how modals appear
- how components respond to state
- how data flows through the interface
Behavior is not limited to JavaScript.
It includes:
- native browser behavior
- CSS transitions
- server‑side logic
- template engines
- frameworks
- plugins
- AI‑generated interactions
Behavior is the mind of the interface —
the layer that makes components feel alive.
A quiet reminder:
We don’t need to write JavaScript.
We need to understand 'what behavior does'.
This lets us ask AI for the right thing.
4. The Layers Work Together
These layers are not independent.
They depend on each other.
HTML gives structure to CSS.
- CSS cannot style meaning that does not exist.
CSS gives clarity to behavior.
- Behavior feels confusing if the visual cues are unclear.
Behavior gives purpose to structure.
- A button without behavior is just a styled box.
A component is complete only when all three layers align.
A quiet model:
Meaning → Appearance → Interaction
in that order.
5. Why This Matters in the AI Era
AI does not “see” the whole system.
It only sees what we show it.
This means humans must:
- describe the component
- show the relevant HTML
- show the relevant CSS
- describe the intended behavior
- explain the relationships
- provide the context
- guide AI through the layers
AI can generate code for any layer —
but only humans can ensure the layers work together.
A quiet truth:
AI can write code.
Humans provide intent.
6. What This Page Enables
Understanding the three layers helps us:
- describe components clearly
- guide AI through existing code
- avoid brittle solutions
- reason about structure
- request changes safely
- maintain clarity across the system
- understand what belongs where
- avoid mixing concerns
- collaborate with AI effectively
This is not about syntax.
It is about thinking in layers.
'Structure' is the foundation.
'Visual Style' is the expression.
'Behavior' is the life.
- Suggested Next Reading: Blocks, Elements, and Modifiers — A Mental Model for Components
Tony de Araujo —New York | Lisbon