Couleur de Texte en CSS - Tutoriel

Introduction

La propriété CSS `color` permet de définir la couleur du texte d'un élément HTML. Ce tutoriel explore comment utiliser cette propriété pour styliser la couleur du texte dans vos pages web.

Exemples

Exemple 1 : Couleur de Texte pour un Paragraphe

Utilisation de la propriété `color` pour définir la couleur du texte d'un paragraphe :

       <p style="color: blue;">Ce texte est en bleu.</p>

Exemple 2 : Texte avec Couleurs Différentes

Définition de couleurs différentes pour différentes parties d'un texte :

       <p>Ce <span style="color: red;">texte</span> a des couleurs <span style="color: green;">différentes</span>.</p>

Exercices avec Corrections

Exercice 1 : Couleur de Texte pour une Liste

Appliquez une couleur de texte spécifique à une liste ordonnée :

       <ol style="color: #ff6600;">
            <li>Élément 1</li>
            <li>Élément 2</li>
            <li>Élément 3</li>
        </ol>

Questions à Choix Multiple (QCM)

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

   Réponse correcte : C

Questions & Réponses

Question : Peut-on utiliser des noms de couleurs prédéfinis pour la propriété `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 : Surligner un Texte

Utilisez la propriété `color` pour surligner un texte en jaune :

       <p>Ce texte est <span style="color: yellow;">surligné en jaune</span>.</p>

Éléments à Retenir

• La propriété CSS `color` est utilisée pour définir la couleur du texte 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 texte peut être appliquée à divers éléments tels que des paragraphes, des titres, des listes, etc.

Proposition d'un Examen avec Correction

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

   Correction : C

p {
  color: red;
}

p {
  color: #FF0000;
}

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

p {
  color: hsl(0, 100%, 50%);
}

body {
  color: red;
}

p {
  color: blue;
}

a {
  color: green;
}

img {
  color: yellow;
}

p {
  color: transparent;
}

p {
  color: red;
  text-shadow: 2px 2px 4px black;
}

p {
  color: red;
}

p:hover {
  color: blue;
}