Style: Couleur de Fond en CSS - Tutoriel

Introduction

La propriété CSS `background-color` permet de définir la couleur de fond d'un élément HTML. Ce tutoriel explore comment utiliser cette propriété pour styliser l'arrière-plan de vos pages web.

Exemples

Exemple 1 : Couleur de Fond Simple

Utilisation de la propriété `background-color` pour définir la couleur de fond d'un paragraphe :

       <p style="background-color: lightblue;">Fond de paragraphe en bleu clair</p>

Exemple 2 : Arrière-plan de Section avec Couleur

Définition d'une couleur de fond pour une section spécifique de la page :

       <div style="background-color: #ffcc00; padding: 20px;">
            <p>Contenu de la section avec fond jaune</p>
        </div>

Exercices avec Corrections

Exercice 1 : Couleur de Fond pour une Liste

Appliquez une couleur de fond à une liste non ordonnée :

       <ul style="background-color: #d4edda; padding: 10px;">
            <li>Élément 1</li>
            <li>Élément 2</li>
            <li>Élément 3</li>
        </ul>

Questions à Choix Multiple (QCM)

1. Quelle propriété CSS est utilisée pour définir la couleur de fond d'un élément?
   • A. color
   • B. background-color
   • C. text-background

   Réponse correcte : B

Questions & Réponses

Question : Peut-on utiliser des noms de couleurs prédéfinis pour la propriété `background-color`?

Réponse : Oui, vous pouvez utiliser des noms de couleurs prédéfinis tels que `red`, `blue`, etc., ou des valeurs hexadécimales comme `#ffcc00`.

Études de Cas

Cas d'utilisation : Encadrer un Titre

Utilisez la couleur de fond pour encadrer un titre avec une apparence de bloc :

       <h2 style="background-color: #007bff; color: #fff; padding: 10px; text-align: center;">Titre Encadré</h2>

Éléments à Retenir

• La propriété CSS `background-color` est utilisée pour définir la couleur de fond d'un élément HTML.
• Elle peut être définie en utilisant des noms de couleurs prédéfinis ou des valeurs hexadécimales.
• La couleur de fond peut être appliquée à divers éléments tels que des paragraphes, des divs, des listes, etc.

Proposition d'un Examen avec Correction

1. Quelle propriété CSS est utilisée pour définir la couleur de fond d'un élément?
   • A. color
   • B. background-color
   • C. text-background

   Correction : B

body {
  background-color: red;
}

body {
  background-color: #FF0000;
}

body {
  background-color: rgb(255, 0, 0);
}

body {
  background-color: hsl(0, 100%, 50%);
}

body {
  background-color: red;
}

p {
  background-color: blue;
}

a {
  background-color: green;
}

img {
  background-color: yellow;
}

body {
  background-color: linear-gradient(to bottom, red, blue);
}

body {
  background-color: url("image.jpg");
}

body {
  background-color: transparent;
}