Voulez-vous changer les couleurs de police en HTML et CSS, mais vous ne savez pas comment?
Il est important de créer le bon contraste entre l’interface de votre site Web et la couleur de la police afin que les lecteurs trouvent votre contenu facile à lire et à partager.
De plus, une couleur de police unique peut différencier votre marque de ses concurrents et définir sa personnalité auprès de votre public cible.
Mais sans les dernières connaissances en codage HTML5, vous ne pourrez pas rendre votre couleur de police accessible à tous les utilisateurs.
Et c’est pourquoi dans ce tutoriel convivial pour les débutants, je vais vous montrer les 4 méthodes pour changer les couleurs de police en HTML et CSS avec des détails pertinents.
Modification de la couleur de la police HTML (en un coup d’œil)
Avant de nous plonger dans les méthodes pour changer la couleur de police en HTML, répondons à deux des questions les plus fréquemment posées:
Puis-je changer la couleur de la police du texte ?
Oui, vous pouvez modifier la couleur de la police de texte sur une page de blog en ajoutant des propriétés font-color dans l’attribut style de la balise HTML via le CSS en ligne.
Par exemple, pour un titre <h1> WPChanger</h1> donné, nous pouvons changer la couleur de police du noir par défaut (code hexadécimal:#000000) au bleu marine (code hexadécimal: #000080) avec ce code:
<h1 style= » color:#000080"> WPChanger</h1>
Si vous utilisez un système de gestion de contenu (CMS) comme WordPress, vous pouvez facilement changer la police du texte en allant dans Articles>Tous les Articles>Modifier.
Ensuite, sélectionnez un paragraphe et allez dans Bloc > Couleur > Texte et sélectionnez la couleur de votre police à l’aide de la palette de couleurs donnée.
Comment changer la couleur de police en HTML ?
Vous pouvez modifier la couleur de police en HTML en utilisant des balises de police et en spécifiant des couleurs avec leur code hexadécimal ou leur nom.
Par exemple, ce sera le code HTML d’un paragraphe de blog en bleu :
<font color="#0000FF"> Océan est bleu. </font> ou <font color="blue"> L’océan est bleu. </font>
Cependant, la balise <font> n’est plus prise en charge en HTML depuis l’introduction de HTML5 en 2014.
Le but du HTML est de décrire la structure de la page Web, pas de déterminer le style du texte.
Ainsi, les balises font et center ont été obsolètes et déplacées vers des feuilles de style en cascade (CSS).
Comment spécifier une couleur en HTML ?
Il existe quatre façons de spécifier une couleur en HTML :
Noms de couleurs :
Le moyen le plus simple de spécifier une couleur dans les feuilles en cascade est d’écrire le nom de la couleur tel que nous le connaissons normalement en anglais, comme bleu, vert, orange, etc…
Vous pouvez également spécifier différentes nuances de couleur primaire, comme le pourpre en rouge, comme indiqué ci-dessus.
Le CSS prend actuellement en charge 140 noms de couleurs standard.
Cependant, vous ne trouverez pas de couleurs inhabituelles comme « Sarcoline » dans la liste des 140 noms de couleurs pris en charge.
Donc, si vous possédez un blog de mode ou de beauté, il est préférable d’utiliser d’autres options dans cette liste.
Codes HEX :
Le code hexadécimal est une représentation à six chiffres de la couleur basée sur trois couleurs primaires: rouge, vert et bleu.
Tous les codes hexadécimaux ont un #RRGGBB où R représente le rouge, G le vert et B le bleu.
Ainsi, le noir sera représenté par #000000 car le noir n’a pas de nuances de rouge, de vert ou de bleu, tandis que #FFFFFF représentera le blanc car le blanc inclut toutes les nuances de couleur RVB.
L’utilisation de l’hexadécimal n’est pas intuitive, mais vous trouverez plus d’options que les noms de couleurs.
Valeurs RVB
Ils sont similaires aux codes hexadécimaux, où vous définissez une couleur en fonction de ses entrées rouge, verte et bleue comprises entre 0 et 255.
0 signifie que la couleur est absente et 255 signifie que la couleur est pleinement présente.
Par exemple, le RVB de l’orange sera RVB(255,165,0) car il a une concentration maximale de rouge, une présence significative de vert et aucune présence de bleu.
Il existe une version apparentée des valeurs RVB : RGBA, avec « A » comme valeur alpha pour l’opacité.
Sa valeur varie de 0 (opaque) à 1 (entièrement transparent).
Valeurs HSL :
Enfin, nous avons HSL, qui signifie Teinte, Saturation et Luminosité.
La teinte représente les couleurs sur la roue chromatique standard avec des valeurs telles que 0/360 ou 360/360 (pour le rouge), 240/360 (pour le bleu), etc…
La saturation et la luminosité sont très similaires, avec des valeurs de 0% (noir) à 100% (blanc).
Ainsi, la HSL orange sera la HSL(44, 96%, 71%).
Comme RVB, vous pouvez ajouter des valeurs d’opacité avec une plage de 0 à 1.
Changer les couleurs de police en HTML et CSS
Maintenant, nous allons vous montrer le processus détaillé de changement des couleurs de police en HTML et CSS.
Tout logiciel de conception graphique peut créer un aperçu de la façon dont la couleur de votre police apparaît pour les utilisateurs, alors utilisez-les pour finaliser votre choix de couleur, puis appliquez les étapes suivantes:
Méthode #1: Changer les couleurs de police sans utiliser CSS
C’est la méthode la plus simple pour changer la couleur de police où vous utilisez la balise <font> et définissez la couleur à l’aide du nom de police ou du code hexadécimal.
Voici un exemple de ce code :
<p> <font color="blue"> Brett est graveur et écrivain. </font> </p>
Cependant, la balise <font> a été déconseillée avec l’introduction de HTML5.
Donc, si votre site Web fait partie des 95% de sites Web du World Wide Web qui utilisent le HTML, vous devriez éviter d’utiliser la méthode de balise <font>.
Les navigateurs Web peuvent cesser de prendre en charge cet ancien code HTML à tout moment, empêchant ainsi les utilisateurs d’accéder correctement à votre contenu.
Actuellement, cependant, tous les navigateurs modernes, y compris Chrome, Safari, Opera et Edge, prennent en charge les balises de police en HTML.
Méthode #2: Modification des couleurs de police à l’aide de CSS en ligne
Vous pouvez utiliser le CSS en ligne pour ajouter des propriétés de style directement à votre fichier HTML.
En d’autres termes, vous mettez des éléments CSS directement dans le code HTML.
Voici le code CSS en ligne pour changer la couleur du texte en bleu:
<p style="color: blue"> Brett est graveur et écrivain. </p>
Vous pouvez définir une couleur à l’aide de l’une des quatre méthodes décrites ci-dessus (nom de police, code hexadécimal, valeurs RVB ou valeurs HSL) et modifier les couleurs des paragraphes, des titres et des liens hypertextes.
Vous pouvez utiliser cette méthode CSS en ligne pour changer rapidement la couleur d’un paragraphe ou d’un titre, ce qui rend votre fichier HTML désordonné et réduit le temps de chargement.
La vitesse de la page est l’un des facteurs cruciaux pour le classement et l’expérience utilisateur, il est donc préférable d’éviter cette méthode.
Méthode #3: Modification des couleurs de police à l’aide de CSS interne ou intégré
Pour changer les couleurs de police à l’aide de CSS intégré, vous devrez ajouter des balises <style> et définir une couleur en utilisant les quatre méthodes mentionnées ci-dessus entre les balises <head> de votre fichier HTML.
Donc, pour changer les couleurs de tous les paragraphes de notre page Web en bleu, nous utiliserons le code suivant:
<html>
<head>
<style>
<p> {
color: blue;
}
</style>
</head>
De même, vous pouvez modifier les couleurs de police des liens hypertexte et des titres.
La différence entre les méthodes CSS en ligne et intégrées est que le CSS en ligne ne fonctionne que pour la page Web spécifique, tandis que le CSS intégré fonctionnera sur toutes les pages chargées avec la balise <head>.
Mais le CSS intégré gâche également votre fichier HTML, réduisant la vitesse de chargement de la page pour différents appareils.
Méthode #4: Modification des couleurs de police à l’aide de CSS externe
Votre site Web dispose d’un fichier CSS distinct pour décrire la taille de la police, la couleur, la famille de polices, le remplissage, la couleur d’arrière-plan et d’autres éléments de style de votre site Web.
Vous pouvez modifier ce fichier CSS pour modifier la taille de police des paragraphes, des titres ou des liens hypertexte.
Par exemple, pour changer la couleur du texte en bleu pour tous les paragraphes sous « content p », ajoutez ce code à votre fichier CSS :
#content p {
color: blue;
}
Pour définir la couleur dans le CSS externe, vous pouvez utiliser des noms de couleur, du code hexadécimal, des valeurs RVB ou HSL.
C’est la meilleure méthode pour changer la couleur de la police car elle conserve tous les éléments de style de votre site Web au même endroit, ce qui le rend facile à modifier.
De plus, la vitesse de la page n’est pas affectée, ce qui est mieux pour l’expérience utilisateur.
Note: Les modifications apportées au CSS interne ou interne peuvent remplacer le CSS externe.
Conclusion
Une couleur de police appropriée peut améliorer la lisibilité et le temps d’arrêt, ce qui permet d’obtenir de meilleurs classements et une meilleure visibilité en ligne.
Il est tentant d’utiliser la méthode de balise HTML <font>, mais elle est obsolète et peut ralentir la vitesse de la page.
Il est donc préférable d’ajouter des attributs de couleur à l’aide de noms de couleur, de codes hexadécimaux, de valeurs RVB ou HSL sous un sélecteur pertinent dans votre fichier CSS pour modifier efficacement la couleur de la police du site Web.
L’utilisation de CSS en ligne ou intégré peut rendre le code de votre site Web désordonné et lent, tout comme les balises HTML.
