Couleur d'arrière-plan

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 25 sur 76.

En CSS, la propriété background-color est utilisée pour définir la couleur d'arrière-plan d'un élément HTML. Cette propriété vous permet de spécifier une valeur de couleur.

Voici la syntaxe de base pour utiliser la propriété background-color :

selector {
    background-color: color-value;
}

Voici quelques façons courantes de spécifier des valeurs de couleur en CSS :

Couleurs nommées : Noms de couleurs prédéfinis, tels que red, blue, green, black, white, etc.

Valeurs hexadécimales : Codes de couleur à six chiffres précédés d'un symbole dièse (#), tels que #FF0000 pour le rouge.

Valeurs RGB : Spécifie les composantes rouge, verte et bleue d'une couleur à l'aide de la fonction rgb(), avec des valeurs allant de 0 à 255, telles que rgb(255, 0, 0) pour le rouge.

Par exemple :

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Dans cet exemple, la couleur d'arrière-plan de l'élément <body> est définie sur lightblue, tous les titres <h1> ont un arrière-plan rouge (#FF0000), tous les éléments <p> (paragraphe) ont un arrière-plan bleu (rgb(0, 0, 255)).

Défi

Facile

On vous donne un document HTML avec un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser la propriété background-color pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez le background-color sur yellow.
Écrivez une règle CSS qui cible l'élément <p>. Définissez le background-color sur #00FF00 (vert).
Écrivez une règle CSS qui cible l'élément <div>. Définissez le background-color sur rgb(255, 0, 255) (magenta).

Aide-mémoire

La propriété background-color définit la couleur d'arrière-plan d'un élément HTML :

selector {
    background-color: color-value;
}

Les valeurs de couleur peuvent être spécifiées en utilisant :

Couleurs nommées : red, blue, green, black, white
Valeurs hexadécimales : #FF0000 (rouge)
Valeurs RGB : rgb(255, 0, 0) (rouge)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Essayez vous-même

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>