Sans aucune instruction de style, un document html peut être affiché mais la mise en page de base est rarement satisfaisante. Une mise en page personnalisée s'obtient en ajustant des attributs css. Ces attributs et leurs valeurs possibles sont décrits dans les tableaux ci-dessous.

Cependant, deux principes de base sont également utiles à connaitre: le modèle de boîte et le modèle de placement

1. Le modèle de boîte

Tout élément html se voit attribuer une boite rectangulaire englobante en vue de son affichage par le navigateur. Cette boite a des marges intérieures (attributs padding), des marges extérieures (attributs margin) et une bordure (attribut border) dont l'épaisseur et la visibilité peuvent être modifiées. Cette boite est représentée par la figure ci-dessous. La taille de l'élément (attributs width et height ou max-width et max-height) n'est pas la taille de la boîte. En effet, la largeur ou largeur maximale spécifiées par width et max-width correspondent à la largeur du contenu de la boite. Pour obtenir la largeur de la boite il faut y ajouter la taille des padding, margin, border, et, le cas échéant, la taille de la scrollbar. Les attributs padding, margin et border sont les premiers à connaître, mais les boites ont bien d'autres attributs utiles à une mise en page stylisée. Un résumé de tous les attributs est disponible ici.

Figure 1: le modèle de boite avec margin, padding, border

2. Le modèle de placement

Pour afficher un document HTML, le navigateur crée un flux (liste d'éléments à afficher) utile à la gestion de la mise en page.

Par défaut, le flux du navigateur contient les éléments du document HTML dans l'ordre d'apparition dans le document. Dans le cas le plus simple, les éléments présents dans le flux sont affichés par le navigateur de haut en bas pour les éléments de type bloc et de gauche à droite pour les éléments de type ligne.

Pour faire une mise en page personnalisée, trois principales propriétés CSS permettent de modifier ce comportement de base du navigateur :

• display: modifie le type de l'élément (bloc ou ligne (inline en anglais). Les éléments de display: bloc sont affichés de haut en bas, les éléments de display: inline sont affichés de gauche à droite (par défaut), des éléments de display:none ne sont pas affichés, le document est rendu comme si ces éléments et leurs descendants n'existaient pas dans l'arbre du document. Tous les éléments HTML ont un type d'affichage (attribut display) par défaut. Cet attribut prend principalement pour valeur bloc et inline mais d'autres valeurs sont possibles (cf tableau).
• float: sort l'élément du flux
• position: modifie la place dans le flux

Par ailleurs, pour une mise en page personnalisé, trois principaux éléments HTML sont souvent utilisés en combinaison avec les propriétés CSS pour structurer le contenu du document:

• <table></table> : les tableaux permettent de faire une mise en page selon une grille, représentée par le tableau.
• <div></div>: les div aussi appelés calques permettent de faire une mise en page définie à partir de zones rectangulaires positionnables par CSS et dans lesquelles d'autres éléments HTML sont affichés. C'est la manière la plus couramment utilisée aujourd'hui pour faire une mise en page qui dépasse le modèle de grille. La particularité des div est d'être, par défaut des éléments des type bloc, ie passage à la ligne obligatoire avant et après le div.
• <span></span> : les span sont comme les div, mais en mode ligne, ce qui, par défaut permet d'éviter le passage à la ligne avant et après l'élément span.

Quelques questions de mise en page fréquentes:

1) Comment centrer une page ou un élément HTML?

Pour centrer une page on utilise généralement un élement de type div qui représente la page et qu'on pourra centrer dans son conteneur (généralement body), en fixant des marges droites et gauche du div pour qu'elles soient de même taille comme dans cet exemple.

Si l'élément est un élément textuel ou apparenté (c'est à dire un élément pour lequel la propriété CSS text-align est définie), alors il suffit d'associer à l'élément une règle css qui définisse text-align:center comme dans cet exemple.

Cependant, il existe de nombreux cas particuliers ou d'autres techniques doivent être utilisées.

2) Comment faire une mise en page en plusieurs colonnes?

Deux principales techniques peuvent être utilisées selon que les colonnes sont de même longueur ou de longueurs différentes:

• Pour des colonnes de même longueur, on peut utiliser l'attribut position: absolute comme dans cet exemple.
• Pour des colonnes de longueurs quelconques, on considére les colonnes comme des boites flottantes autour desquelles le reste des éléments html s'affichent. On utilise alors l'attribut float:left ou float:right, pour "retirer" les colonnes du flux ou autrement dit en faire des éléments flottants comme dans cet exemple.