Défi : Utiliser des variables pour une meilleure gestion du CSS
Tâche
Nous devons styliser une page web de blog. L'objectif est le suivant :
- Définir la couleur dans le bloc
:root
:- Créer une variable nommée
--description-color
et lui attribuer la valeur#9e6f21
.
- Créer une variable nommée
- Appliquer la variable
--description-color
comme valeur de la propriétécolor
aux éléments<p>
ayant la classe.description
.
index.html
index.css
- Utiliser
--
suivi d'un nom descriptif pour créer une variable, puis définir:
et lui attribuer une valeur. - Attribuer la valeur
#9e6f21
à la variable. - Employer
var()
, et spécifier le nom de la variable entre parenthèses pour utiliser la variable comme valeur de propriété.
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 10
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Suggested prompts:
Can you show me how to define a CSS variable in the :root block?
How do I apply the --description-color variable to the .description class?
Can you explain how to use var() in CSS?
Awesome!
Completion rate improved to 2.56
Défi : Utiliser des variables pour une meilleure gestion du CSS
Glissez pour afficher le menu
Tâche
Nous devons styliser une page web de blog. L'objectif est le suivant :
- Définir la couleur dans le bloc
:root
:- Créer une variable nommée
--description-color
et lui attribuer la valeur#9e6f21
.
- Créer une variable nommée
- Appliquer la variable
--description-color
comme valeur de la propriétécolor
aux éléments<p>
ayant la classe.description
.
index.html
index.css
- Utiliser
--
suivi d'un nom descriptif pour créer une variable, puis définir:
et lui attribuer une valeur. - Attribuer la valeur
#9e6f21
à la variable. - Employer
var()
, et spécifier le nom de la variable entre parenthèses pour utiliser la variable comme valeur de propriété.
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 1. Chapitre 10