Couleur de Texte CSS

Dans ce tutoriel, nous allons vous montrer comment utiliser CSS pour colorer tout élément de texte HTML en utilisant une balise HTML, ID ou classe. Si vous n'êtes pas familier avec les styles CSS encore, consultez notre tutoriel sur la mise en route avec des couleurs CSS ici.

CSS couleur du texte en utilisant une balise HTML

Pour commencer, nous allons le style du texte de base. Nous allons utiliser la balise <h1> dans cet exemple, mais vous pouvez définir le style à peu près tout élément de texte en utilisant le CSS. Ci-dessous notre exemple de document HTML, une page très simple avec seulement un titre et un court paragraphe. 

HTML

<head>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

Disons colorer le <h1> élément rouge. Dans la section <head> de notre document HTML, nous allons ajouter un style CSS pour la balise <h1> élément, en changeant la couleur du noir au rouge par défaut. 

HTML

<head>
  <style>
    h1 { color: #FF0000; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>
Démo sur Codepen

CSS couleur du texte en utilisant une ID

Une autre façon nous pouvons le style de la <h1> est en lui donnant une identité; Dans cet exemple, nous allons utiliser l'ID de 'cap'. ID peuvent être décorés à l'aide CSS de la même manière que les balises HTML, mais sont précédés d'un symbole '#'. 

HTML

<head>
  <style>
    #heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 id="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
Démo sur Codepen

CSS couleur du texte en utilisant une classe

Une troisième méthode pour ajouter de la couleur à des éléments HTML est en utilisant des classes - très semblable à ID, sauf qu'ils sont précédés d'un point '.' au lieu d'un '#'. Ici, nous appliquons la même couleur de CSS à la balise <h1> élément mais en utilisant une classe nommée 'rubrique'. 

HTML

<head>
  <style>
    .heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 class="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
Démo sur Codepen