Exemple de CSS et modèle de page

Structure du document:

<div id="frame">
    <div id="header"> </div> (haut)
        <div class="logo"> </div> (image)
        <div class="sitetitle"> </div> (texte)
    <div id="sidebar"> </div> (gauche)
    <div id="content"> </div> (droite)
</div>
<div id="footer"> </div>

L'ordre de déclaration dans la feuille de style suit l'ordre hiérarchique.

Les identifieurs de premier niveau:

1. frame, la page est dans un cadre centré.
2. footer, Le bas de page
   Nous avons choisi de placer un bas de page, contenant le copyright, sous le cadre, avec la même largeur.
   On aurait pu le placer à l'intérieur du cadre, ou encore, dans une page sans cadre, avec une largeur de 100%.

Le second niveau:

A l'intérieur du cadre principal, on crée un en-tête et deux colonnes.

1. header, haut de page, contient logo, titre, etc...
2. sidebar, la colonne � gauche contenant des liens sur les autres pages du site.
3. content, le corps de la page. Cela peut être la seule partie qui change d'une page à l'autre.

Les sous-niveaux:

Dans le haut de page, deux classes sont définies:

1. logo, l'image � gauche.
   Il faut définir la largeur et la hauteur dans la feuille de style, car elles sont à 0 par défaut.

2. sitetitle, le titre du site.
   La feuille de style définit la police et la taille, ainsi que l'emplacement.