L'image ci-contre illustre les possibilités du CSS, basées sur le principe de séparation de la structure ( le code HTML ) et de la mise en page ( alors traitée par une feuille de style CSS ).

Il s'agit de 4 captures d'écran provenant du site CSSZenGarden, où les plus grands graphistes montrent leurs talents en mettant une forme une même structure HTML.

Avec les balises HTML suivantes :

<h1>...</h1>
 
<p>...</p>
 
<br />
 
<hr />
 
<ol>
  <li>...</li>
</ol>
 
<ul>
  <li>...</li>
</ul>
 
<img src="" alt="" />
 
 
<a href="">...</a>
 
 
<table>...</table>

il est déjà possible de réaliser la structure de la plupart des pages web existantes ( il existe beaucoup d'autres balises, mais qui ne seront pas forcément nécessaires pour les pages simples ).

Mais seulement la structure.

Si cette structure est propre et bien faite, on peut alors se poser la question de la mise en page pour rendre la page plus attrayante. Pour cela, nous utiliserons une Feuille de Style CSS ( Cascading Style Sheet ).

C'est un fichier texte à part qui va contenir toutes les informations de mise en page pour l'ensemble du site. Une modification de cette page permet donc de changer toutes les pages d'un site, ce qui est beaucoup plus avantageux que de modifier chaque page une à une.

Ce langage qui consiste à séparer la mise en page avec la structure s'appelle le XHTML, alors que le langage HTML comprend dans la même page la structure ET la “décoration”, ce qui est peu lisible.