Comment coder une couleur en HTML ?

31 vues
Pour colorer du texte en HTML : Identifiez lélément à colorer. Ajoutez la balise . Spécifiez la couleur à laide dun nom, de valeurs RGB, hexadécimales ou HSL.
Commentaire 0 j’aime
Vous vouliez peut-être demander ceci ?Plus

Colorer du texte en HTML : bien plus que la balise <font> (dépréciée !)

Vous souhaitez ajouter de la couleur à votre texte HTML ? Oubliez la balise <font color="...">, considérée comme obsolète et non conforme aux standards actuels du web. Les bonnes pratiques recommandent l'utilisation des propriétés CSS pour styliser votre contenu, offrant une plus grande flexibilité et une meilleure séparation entre le contenu et la présentation.

Voici comment colorer votre texte en HTML avec les méthodes modernes :

1. Utiliser la propriété color en CSS inline:

La manière la plus simple, pour une modification ponctuelle, consiste à utiliser l'attribut style directement dans la balise HTML. Par exemple, pour colorer un paragraphe en rouge :

<p style="color: red;">Ce texte est en rouge.</p>

Vous pouvez remplacer "red" par d'autres noms de couleurs (blue, green, yellow, etc.), des valeurs hexadécimales (#FF0000 pour le rouge), RGB (rgb(255, 0, 0) pour le rouge), ou HSL (hsl(0, 100%, 50%) pour le rouge).

2. Intégrer la propriété color dans une balise <style>:

Pour appliquer un style à plusieurs éléments de la même page, il est préférable d'utiliser une balise <style> dans la section <head> de votre document HTML. Cela permet de centraliser les styles et de les réutiliser facilement :

<!DOCTYPE html>
<html>
<head>
  <title>Exemple de couleur</title>
  <style>
    p {
      color: blue; /* Tous les paragraphes seront bleus */
    }
    h1 {
      color: #008000; /* Tous les titres h1 seront verts foncés */
    }
  </style>
</head>
<body>
  <h1>Titre en vert foncé</h1>
  <p>Ce paragraphe est en bleu.</p>
  <p>Et celui-ci aussi.</p>
</body>
</html>

3. Utiliser un fichier CSS externe:

La meilleure pratique pour des projets web plus complexes est de créer un fichier CSS séparé et de le lier à votre document HTML. Cela facilite la maintenance et permet de réutiliser les styles sur plusieurs pages. Créez un fichier (par exemple, styles.css) avec le code CSS suivant :

p {
  color: purple;
}
h1 {
  color: orange;
}

Puis, liez ce fichier à votre HTML dans la section <head> :

<link rel="stylesheet" href="styles.css">

En résumé:

Évitez la balise <font>. Privilégiez l'utilisation de la propriété CSS color avec des valeurs nommées, hexadécimales, RGB ou HSL. Choisissez la méthode d'intégration CSS (inline, balise <style> ou fichier externe) la plus adaptée à la taille et à la complexité de votre projet. En appliquant ces conseils, vous assurerez un code propre, maintenable et respectant les standards du web.

Les plus appréciés
Les plus vus
Questions les plus récentes

Commenter la réponse :

Merci pour votre retour ! Votre commentaire nous aide énormément à améliorer les réponses à l’avenir.

Veuillez indiquer la raison :