Arrière-plans et Couleurs CSS : Stylisez vos Pages Web

Introduction

Bienvenue dans le laboratoire sur les couleurs et arrière-plans CSS ! En conception web, les couleurs et les arrière-plans sont fondamentaux pour créer des sites web visuellement attrayants et conviviaux. Ils aident à définir le ton, à améliorer la lisibilité et à guider l'attention de l'utilisateur.

Dans ce laboratoire, vous acquerrez une expérience pratique avec certaines des propriétés CSS les plus courantes utilisées pour contrôler l'apparence des éléments. Vous apprendrez à définir les couleurs d'arrière-plan, à appliquer des couleurs de texte, à utiliser des images d'arrière-plan et à contrôler la manière dont ces images sont affichées. Nous aborderons les propriétés suivantes : background-color, color, background-image, background-repeat et background-position.

À la fin de ce laboratoire, vous aurez une solide compréhension de la manière de styliser les couleurs et les arrière-plans de vos pages web.

Définir la propriété background-color avec un code hexadécimal

Dans cette étape, vous apprendrez à modifier la couleur d'arrière-plan de la page entière. Nous utiliserons la propriété background-color et un code couleur hexadécimal (hex). Les codes hexadécimaux sont un moyen courant de représenter les couleurs en développement web, commençant par un # suivi de six caractères (0-9, a-f).

Tout d'abord, vous devez modifier le fichier styles.css. Vous pouvez trouver ce fichier dans l'explorateur de fichiers sur le côté gauche du WebIDE.

Cliquez sur le fichier styles.css pour l'ouvrir dans l'éditeur.
Ajoutez la règle CSS suivante pour définir la couleur d'arrière-plan de l'élément <body>. Cela appliquera le style à la page entière.

body {
  background-color: #f0f8ff;
}

Cette règle sélectionne l'élément body et définit sa couleur d'arrière-plan sur une nuance de bleu clair connue sous le nom de "AliceBlue".

Après avoir ajouté le code, enregistrez le fichier (vous pouvez utiliser Ctrl+S ou Cmd+S). Pour voir vos modifications, cliquez sur l'onglet Web 8080 en haut de l'interface. Vous devriez voir l'arrière-plan de la page passer du blanc au bleu clair.

Appliquer la propriété color avec des valeurs RGB

Maintenant que vous avez défini la couleur d'arrière-plan, changeons la couleur du texte du titre principal. Nous utiliserons la propriété color, qui définit la couleur du contenu textuel d'un élément. Pour cela, nous utiliserons le format de couleur rgb().

La fonction rgb() définit une couleur en utilisant ses composantes Rouge, Verte et Bleue, chaque valeur allant de 0 à 255.

Continuez à modifier le fichier styles.css.

Ajoutez une nouvelle règle CSS pour cibler l'élément <h1>.
À l'intérieur de cette règle, définissez la propriété color sur un gris foncé en utilisant rgb(60, 60, 60).

Ajoutez le code suivant à votre fichier styles.css :

h1 {
  color: rgb(60, 60, 60);
}

Enregistrez le fichier et basculez vers l'onglet Web 8080 pour prévisualiser vos modifications. Le titre "Welcome to LabEx" devrait maintenant être gris foncé, le faisant ressortir sur l'arrière-plan bleu clair.

Utiliser la propriété background-image avec url

En plus des couleurs unies, le CSS vous permet d'utiliser des images comme arrière-plans. La propriété background-image est utilisée à cette fin. Vous spécifiez le chemin de l'image en utilisant la fonction url().

Dans cette étape, vous ajouterez une image d'arrière-plan au body de la page. Le script d'installation a déjà créé un fichier image nommé labex.svg dans votre répertoire de projet.

Retournez à votre fichier styles.css.
Modifiez la règle body existante pour ajouter la propriété background-image.

Ajoutez la ligne suivante à l'intérieur des accolades du sélecteur body :

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
}

Après avoir enregistré le fichier, vérifiez l'onglet Web 8080. Vous remarquerez que l'image (labex.svg) apparaît sur la page. Par défaut, les images d'arrière-plan se répètent horizontalement et verticalement pour remplir tout l'élément. Dans la prochaine étape, nous apprendrons à contrôler ce comportement.

Implémenter la propriété background-repeat no-repeat

Comme vous l'avez vu à l'étape précédente, les images d'arrière-plan se répètent par défaut. La propriété background-repeat vous permet de contrôler ce comportement. Elle peut prendre plusieurs valeurs, notamment repeat (la valeur par défaut), repeat-x (répéter horizontalement), repeat-y (répéter verticalement) et no-repeat.

Dans cette étape, vous empêcherez l'image d'arrière-plan de se répéter.

Continuez à modifier la règle body dans votre fichier styles.css.
Ajoutez la propriété background-repeat et définissez sa valeur sur no-repeat.

Votre règle body devrait maintenant ressembler à ceci :

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
}

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez maintenant une seule instance de l'image d'arrière-plan, située dans le coin supérieur gauche de la page.

Ajouter la propriété background-position center

Actuellement, l'image d'arrière-plan unique est positionnée dans le coin supérieur gauche de la page. Vous pouvez modifier sa position en utilisant la propriété background-position. Cette propriété accepte des valeurs telles que left, right, top, bottom et center, ainsi que des valeurs de longueur ou de pourcentage spécifiques.

Pour cette dernière étape, vous allez centrer l'image d'arrière-plan horizontalement et verticalement.

Dans votre fichier styles.css, ajoutez la propriété background-position à la règle body.
Définissez sa valeur sur center.

La règle body complète sera maintenant :

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
  background-position: center;
}

Enregistrez vos modifications et visualisez le résultat dans l'onglet Web 8080. L'image d'arrière-plan devrait maintenant être parfaitement centrée sur la page.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez appris avec succès à styliser les couleurs et les arrière-plans d'une page web en utilisant des propriétés CSS fondamentales.

Dans ce laboratoire, vous avez pratiqué :

La définition de la couleur d'arrière-plan d'une page avec background-color et un code hexadécimal.
La modification de la couleur du texte avec la propriété color et une valeur rgb().
L'ajout d'une background-image en utilisant la fonction url().
Le contrôle du pavage de l'image avec background-repeat: no-repeat;.
Le positionnement d'une image d'arrière-plan avec background-position: center;.

Ces propriétés sont des outils essentiels pour tout développeur web. N'hésitez pas à expérimenter davantage en changeant les valeurs ou en essayant différentes images pour voir ce que vous pouvez créer.

Couleurs et Arrière-plans CSS