Mise en forme d'éléments de page avec CSS

Les feuilles de style CSS permettent d'appliquer de la couleur aux éléments HTML, et d'ajuster leur position ainsi que leur aspect. Ajoutez des feuilles de style CSS pour peaufiner l'apparence des différents éléments, créer une maquette mieux structurée et améliorer le rendu visuel d'une page.

Besoin d'aide pour comprendre le principe des marges intérieures et extérieures ? Examinez le modèle de boîte CSS suivant. Il illustre la relation entre les différentes propriétés de mise en page CSS et les éléments HTML auxquels elles se rapportent.

Avant de commencer

Téléchargez et enregistrez les fichiers du projet. Ouvrez style_containers_practice.html dans Dreamweaver.

Cliquez sur la feuille de style style_containers_practice.css dans l'angle supérieur gauche de votre espace de travail, puis passez en mode Fractionner. 

Repérez le sélecteur header. Vous pouvez modifier la couleur de cet élément en ajoutant une propriété background-color. Lorsque vous tapez la virgule après le nom de la propriété, un menu contextuel apparaît. Sélectionnez l'option Color. Déplacez le sélecteur de couleur sur la palette pour trouver la nuance qui vous intéresse, ou saisissez directement le code hexadécimal correspondant.

Pour les sections header, #main et #sidebar, choisissez la couleur d'arrière-plan #FFFFFF. Pour la section footer, définissez pour la couleur la valeur #2F4666.

CSS

header {
    background-color:#FFFFFF;
    ...
}
#main {
    background-color:#FFFFFF;
    ...
}
#sidebar {
    background-color:#FFFFFF;
    ...
}
footer {
    background-color:#2F4666;
    ...
} 

Pour définir une hauteur précise, ajoutez une propriété height. Pour les sélecteurs #main et #sidebar, choisissez une hauteur de 250px.

CSS

#main {
    ...
    height:250px;
    ...
}
#sidebar {
    ...
    height:250px;
    ...
} 

La propriété padding permet de créer un espace entre le contenu et la bordure d'un élément. Pour les sections #main et #sidebar, choisissez une marge intérieure de 25px. Vous obtiendrez ainsi un espace de 25px tout autour du contenu.

CSS

#main {
    ...
    padding:25px;
    ...
}
#sidebar {
    ...
    padding:25px;
    ...
} 

Vous pouvez modifier séparément les valeurs de la marge intérieure gauche, droite, supérieure et inférieure. Ajoutez la valeur 1px 0px 1px 0px à la propriété padding du sélecteur header. Vous obtiendrez ainsi un espace de 1px entre le contenu et le haut de l'élément, de 0 px à droite, de 1px entre le contenu et le bas de l'élément, et de 0 px à gauche.

Pour la section footer, définissez une marge intérieure de 15px 0px 15px 0px.

CSS

header {
    ...
    padding:1px 0px 1px 0px;
    ...
}
footer {
    ...
    padding:15px 0px 15px 0px;
    ...
}

La propriété margin sert à créer un espace vide autour d'un élément. Pour la section #main, choisissez une marge de 10px 50px 20px 0px. Vous obtiendrez ainsi un espace de 10px au-dessus de l'élément, de 50px à droite, de 20px en dessous et de 0px à gauche.

Pour la section #sidebar, choisissez une marge de 10px 0px 20px 50px.

CSS

#main {
    ...
    margin:10px 50px 20px 0px;
    ...
}
#sidebar {
    ...
    margin:10px 0px 20px 50px;
    ...
}

Ajoutez des propriétés margin aux autres éléments pour finaliser la mise en page.

Pour la section header, définissez une marge de 10px 50px 20px 50px, et pour la section footer, une marge de 0px 50px 0px 50px. 

CSS

header {
    ...
    margin:10px 50px 20px 50px;
    ...
}
footer {
    ...
    margin:0px 50px 0px 50px;
    ...
}

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez visualiser le résultat.

Vous devrez enregistrer vos fichiers pour voir les modifications.