Comment structurer sa page en utilisant les feuilles de style?

Les pages web que vous avez l'habitude de rencontrer sont souvent divisées en plusieurs parties. Il est donc indispensable d'avoir une idée de la structure que vous souhaitez donner à votre page. Vous pouvez avoir envie de disposer d'une bannière de menu sur votre gauche qui vous permettra de naviguer sur votre site et certains outils des feuilles de style peuvent vous y aider. On utilise pour cela les ID (qui sont identiques au class mais ne peuvent être appelés qu'une seule fois dans une même page). Par exemple, si l'on souhaite séparer sa page en trois blocs (un bandeau horizontal pour l'entête et deux bandeaux verticaux, un pour le menu de navigation et un pour le corps de la page), on définit cette structure dans la feuille de style:

$\char93$entete
$\{$ height: 200px;
style appliqué dans l'entête
$\}$

$\char93$menu
$\{$ width: 100px;
float:left;
style appliqué dans le menu
$\}$

$\char93$principal
$\{$ width: 700px;
float:right;
style appliqué dans le bloc principal
$\}$

Une fois que votre structure est définie, il faut l'appeler dans le fichier .html. L'appel des ID se fait de la façon suivante:

Dans le fichier .html:
$<$div id=''entete'' $>$contenu de l'entete $</$div$>$
$<$div id=''menu'' $>$contenu du menu $</$div$>$
$<$div id=''principal'' $>$contenu du bloc principal $</$div$>$

Testez le résultat!

Rien de bien impressionnant a priori, car la mise en forme n'est pas terminée. Pour distinguer vos différents blocs, on peut les colorer (en ajoutant la balise background:la couleur de votre choix dans la feuille de style), ou les encadrer (en utilisant les balises border-(style, color, width):).
Pour aligner le texte de chaque bloc à sa convenance text-align (center, left, right, justify).
Colorer vos blocs et tester le résultat!

Vous pouvez aussi définir le style des balises de chaque bloc dans la feuille de style, en rajoutant une classe à une balise existante. Par exemple, le titre de l'entête:

h1.entete
$\{$ font-size:30pt; font-weight: bold; font-family: 'Comic sans MS'; 
$\}$

qui sera alors appelé dans le fichier .html:

$<$h1 class=''entete''$>$ contenu de l'entête$</$h1$>$

Il existe une autre façon de structurer sa page qui consiste à utiliser des frame, toutefois, l'utilisation des frame est aujourd'hui obsolète.