Per realizzare un efficace separazione fra i contenuti e la loro impaginazione, è necessario innanzitutto strutturare i contenuti stessi. Riprendendo lo schema su carta, le sezioni logiche del progetto da fissare sono:
Testata <div id="header">
Menu <div id="navigation">
Contenuti <div id="contents">
Ad ogni sezione va associato un tag <div>, caratterizzato dal proprio selettore id.
Successivamente va sviluppata ogni sezione scomponendola in sottoclassi sempre attraverso l'uso di tag <div> annidati, ognuno collegato alla relativa classe nel CSS.
Si noti come, finora, non si sia assolutamente parlato di come impaginare i contenuti. In effetti, a questo punto potremmo anche non avere nessuna idea di come sarà il layout; in questa fase stiamo strutturando in maniera logica i contenuti.
Esemplare a riguardo è il progetto CSS Zen Garden, che dimostra le potenzialità della tecnologia CSS. Le pagine di Zen Garden sono scritte in xhtml 1.0; naturalmente il codice di queste pagine non ha traccia di elementi di "presentazione". Gli ideatori di Zen Garden permettono a chiunque di cimentarsi nella realizzazione di un foglio di stile per la presentazione delle informazioni di Zen Garden. I migliori CSS vengono pubblicati sul sito e resi disponibili per la consultazione.
L'impaginazione delle sezioni logiche è stata completamente implementata attraverso i CSS; ogni identificativo, classe o pseudoclasse presente nel codice HTML è legato al CSS, che ne definisce le caratteristiche.