Apprenez à utiliser des feuilles de style CSS pour appliquer des couleurs d'arrière-plan et définir l'espace entre les éléments des balises div et autres conteneurs.
use-css-to-style-divs_1408x792

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.

Feuilles de style CSS pour optimiser une mise en page
Feuilles de style CSS pour optimiser une mise en 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.

Modèle d’encadré CSS
Modèle d’encadré CSS

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. 

Téléchargement et enregistrement des fichiers du projet
Téléchargement et enregistrement des fichiers du projet dès le départ

Ajout de couleurs aux sections d'une page

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.

Ajout de couleurs aux sections d'une page
Ajout de couleurs aux sections d'une page

CSS

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

Définition des couleurs d’arrière-plan
Définition des couleurs d’arrière-plan

Réglage de la hauteur des sections

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;
    ...

Spécification de la hauteur d'une section
Spécification de la hauteur d'une section

Ajout d'une marge intérieure

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;
    ...

Ajout d'une marge intérieure
Ajout d'une marge intérieure pour créer un espace

Ajout d'une marge intérieure (suite)

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;
    ...
}

Modification des marges intérieures droite, gauche, inférieure et supérieure
Modification des marges intérieures droite, gauche, inférieure et supérieure

Ajout de marges extérieures

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;
    ...
}

Définition des marges
Définition des marges

Ajout de marges extérieures (suite)

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;
    ...
}

Ajout de marges pour les en-têtes et pieds de page
Ajout de marges pour les en-têtes et pieds de page

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.

Prévisualisation du résultat dans un navigateur
Prévisualisation du résultat dans un navigateur
04/13/2018
Cette page vous a-t-elle été utile ?