Comment changer la couleur de la police HTML

Lorsqu'il s'agit de personnaliser votre site, la couleur de la police est souvent négligée. Dans la plupart des cas, les propriétaires de sites Web laissent la couleur de police par défaut comme le noir ou tout ce que leurs styles de thème ont défini pour la couleur du texte du corps et de l'en-tête.

Cependant, c'est une bonne idée de changer la couleur de la police HTML sur votre site Web pour plusieurs raisons. Changer la couleur de la police HTML peut sembler intimidant, mais c'est assez simple. Il existe plusieurs façons de changer la couleur de la police sur votre site Web.

Dans cet article, nous vous montrerons différentes façons de changer la couleur des polices de votre site Web, ainsi que la raison pour laquelle vous voudriez le faire en premier lieu.

Pourquoi changer la couleur de la police HTML ?

Vous voudriez changer la couleur de la police, car cela peut aider à améliorer la lisibilité et l'accessibilité de votre site Web. Par exemple, si votre site utilise un jeu de couleurs plus foncé, laisser la couleur de police noire rendrait difficile la lecture du texte sur votre site Web.

Une autre raison pour laquelle vous voudriez envisager de changer la couleur de la police est si vous allez utiliser une couleur plus foncée de la palette de couleurs de votre marque. C'est une nouvelle occasion de renforcer votre marque. Il renforce la cohérence de la marque et garantit que le texte sur tous vos canaux marketing est identique.

Avec cela à l'écart, regardons comment vous pouvez définir et changer la couleur de la police HTML.

Lorsqu'il s'agit de personnaliser votre site, la couleur de la police est souvent négligée... mais c'est une simple modification qui peut ajouter beaucoup de personnalité ! Cliquez pour tweeter

Façons de définir la couleur

Il existe plusieurs façons de définir la couleur dans la conception Web, notamment le nom, les valeurs RVB, les codes hexadécimaux et les valeurs HSL. Voyons comment ils fonctionnent.

Nom de la couleur

Les noms de couleur sont le moyen le plus simple de définir une couleur dans vos styles CSS. Le nom de la couleur fait référence au nom spécifique de la couleur HTML. Actuellement, 140 noms de couleurs sont pris en charge et vous pouvez utiliser n'importe laquelle de ces couleurs dans vos styles. Par exemple, vous pouvez utiliser "bleu" pour définir la couleur d'un élément individuel sur bleu.

Cependant, l'inconvénient de cette approche est que tous les noms de couleurs ne sont pas pris en charge. En d'autres termes, si vous utilisez une couleur qui ne figure pas dans la liste des couleurs prises en charge, vous ne pourrez pas l'utiliser dans votre conception par son nom de couleur.

Valeurs RVB et RVBA

Ensuite, nous avons les valeurs RGB et RGBA. Le RVB signifie Rouge, Vert et Bleu. Il définit la couleur en mélangeant les valeurs de rouge, de vert et de bleu, de la même manière que vous mélangeriez une couleur sur une palette réelle.

La valeur RVB ressemble à ceci : RVB(153,0,255). Le premier nombre spécifie l'entrée de couleur rouge, le second spécifie l'entrée de couleur verte et le troisième spécifie le bleu.

La valeur de chaque entrée de couleur peut être comprise entre 0 et 255, où 0 signifie que la couleur n'est pas présente du tout et 255 signifie que la couleur particulière est à son intensité maximale.

La valeur RGBA ajoute une valeur supplémentaire au mélange, et c'est la valeur alpha qui représente l'opacité. Il va de 0 (non transparent) à 1 (entièrement transparent).

Valeur HEX

Les codes de couleur hexadécimaux fonctionnent de la même manière que les codes RVB. Ils se composent de chiffres de 0 à 9 et de lettres de A à F. Le code hexadécimal ressemble à ceci : #800080. Les deux premières lettres spécifient l'intensité de la couleur rouge, les deux chiffres du milieu spécifient l'intensité de la couleur verte et les deux derniers définissent l'intensité de la couleur bleue.

Valeurs HSL et HSLA

Une autre façon de définir les couleurs en HTML consiste à utiliser les valeurs HSL. HSL signifie teinte, saturation et luminosité.

La teinte utilise des degrés de 0 à 360. Sur une roue chromatique standard, le rouge se situe autour de 0/360, le vert à 120 et le bleu à 240.

La saturation utilise des pourcentages pour définir le degré de saturation de la couleur. 0 représente le noir et blanc et 100 représente la pleine couleur.

Enfin, la luminosité utilise des pourcentages de la même manière que la saturation. Dans ce cas, 0 % représente le noir et 100 % représente le blanc.

Par exemple, la couleur violette que nous avons utilisée tout au long de cet article ressemblerait à ceci dans HSL : hsl(276, 100%, 50%) .

HSL, comme RVB, prend en charge l'opacité. Dans ce cas, vous utiliseriez la valeur HSLA où A signifie alpha et est défini dans un nombre de 0 à 1. si nous voulions réduire l'opacité de l'exemple violet, nous utiliserions ce code : hsl(276, 100%, 50%, .85) .

Maintenant que vous savez comment définir la couleur, examinons différentes manières de modifier la couleur de la police HTML.

L'ancien : balises <font>

Avant que HTML5 ne soit introduit et défini comme norme de codage, vous pouviez modifier la couleur de la police à l'aide de balises de police. Plus précisément, vous utiliseriez la balise font avec l'attribut color pour définir la couleur du texte. La color a été spécifiée soit avec son nom, soit avec son code hexadécimal.

Voici un exemple de l'apparence de ce code avec un code de couleur hexadécimal :

 <font color="#800080">This text is purple.</font>

Et c'est ainsi que vous pouvez définir la couleur du texte sur violet en utilisant le nom de la couleur.

 <font color="purple">This text is purple.</font>

Cependant, la <font> est obsolète dans HTML5 et n'est plus utilisée. Changer la couleur de la police est une décision de conception, et la conception n'est pas l'objectif principal du HTML. Par conséquent, il est logique que les balises <font> ne soient plus prises en charge dans HTML5.

Donc, si la balise <font> n'est plus prise en charge, comment changer la couleur de la police HTML ? La réponse est avec les feuilles de style en cascade ou CSS.

La nouveauté : les styles CSS

Pour changer la couleur de la police HTML avec CSS, vous utiliserez la propriété de couleur CSS associée au sélecteur approprié. CSS vous permet d'utiliser des noms de couleur, des valeurs RVB, hexadécimales et HSL pour spécifier la couleur. Il existe trois façons d'utiliser CSS pour changer la couleur de la police.

CSS en ligne

Le CSS en ligne est ajouté directement à votre fichier HTML. Vous utiliserez la balise HTML telle que <p>, puis la styliserez avec la propriété CSS color comme ceci :

 <p>This is a purple paragraph.</p>

Si vous souhaitez utiliser une valeur hexadécimale, votre code ressemblera à ceci :

 <p>This is a purple paragraph.</p>

Si vous comptez utiliser la valeur RVB, vous l'écrirez comme ceci :

 <p>This is a purple paragraph.</p>

Enfin, en utilisant les valeurs HSL, vous utiliseriez ce code :

 <p>This is a purple paragraph.</p>

Les exemples ci-dessus vous montrent comment changer la couleur d'un paragraphe sur votre site Web. Mais vous n'êtes pas limité aux seuls paragraphes. Vous pouvez modifier la couleur de la police de vos titres ainsi que des liens.

Par exemple, remplacer la <p> ci-dessus par <h2> changera la couleur de ce texte d'en-tête, tandis que le remplacer par la balise <a> changera la couleur de ce lien. Vous pouvez également utiliser l'élément <span> pour colorer n'importe quelle quantité de texte.

Si vous souhaitez modifier la couleur d'arrière-plan de tout le paragraphe ou d'un titre, cela ressemble beaucoup à la façon dont vous modifieriez la couleur de la police. Vous devez utiliser l'attribut background-color place et utiliser le nom de la couleur, les valeurs hexadécimales, RVB ou HSL pour définir la couleur. Voici un exemple :

<p>

CSS intégré

Le CSS intégré se trouve dans les balises <style> et est placé entre les balises d'en-tête de votre document HTML.

Le code ressemblera à ceci si vous souhaitez utiliser le nom de la couleur :

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Le code ci-dessus changera la couleur de chaque paragraphe de la page en violet. Semblable à la méthode CSS en ligne, vous pouvez utiliser différents sélecteurs pour modifier la couleur de la police de vos en-têtes et liens.

Si vous souhaitez utiliser le code hexadécimal, voici à quoi ressemblerait le code :

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

L'exemple ci-dessous utilise les valeurs RBGA afin que vous puissiez voir un exemple de réglage de l'opacité :

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

Et le code HSL ressemblerait à ceci :

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

CSS externe

Enfin, vous pouvez utiliser un CSS externe pour modifier la couleur de la police sur votre site Web. Le CSS externe est un CSS placé dans un fichier de feuille de style séparé, généralement appelé style.css ou stylesheet.css.

Cette feuille de style est responsable de tous les styles de votre site et spécifie les couleurs et les tailles de police, les marges, les remplissages, les familles de polices, les couleurs d'arrière-plan, etc. En bref, la feuille de style est responsable de l'apparence visuelle de votre site.

Pour changer la couleur de la police avec un CSS externe, vous devez utiliser des sélecteurs pour styliser les parties de HTML que vous souhaitez. Par exemple, ce code modifiera tout le corps du texte sur votre site :

 body {color: purple;}

N'oubliez pas que vous pouvez utiliser les valeurs RVB, hexadécimales et HSL et pas seulement les noms de couleur pour modifier la couleur de la police. Si vous souhaitez modifier la feuille de style, il est recommandé de le faire dans un éditeur de code.

En ligne, intégré ou externe ?

Alors maintenant, vous savez comment vous pouvez utiliser CSS pour changer la couleur de la police. Mais quelle méthode utiliser ?

Si vous utilisez le code CSS en ligne, vous l'ajouterez directement dans votre fichier HTML. D'une manière générale, cette méthode convient aux solutions rapides. Si vous souhaitez modifier la couleur d'un paragraphe ou d'un titre spécifique sur une seule page, cette méthode est la plus rapide et la moins compliquée.

Cependant, les styles en ligne peuvent augmenter la taille de votre fichier HTML. Plus votre fichier HTML est volumineux, plus le temps de chargement de votre page Web sera long. En plus de cela, le CSS en ligne peut rendre votre HTML désordonné. En tant que telle, la méthode en ligne consistant à utiliser CSS pour modifier la couleur de la police HTML est généralement déconseillée.

Le CSS intégré est placé entre les balises <head> et dans les balises <style>. Comme le CSS en ligne, il convient aux solutions rapides et au remplacement des styles spécifiés dans une feuille de style externe.

Une distinction notable entre les styles en ligne et intégrés est qu'ils s'appliqueront à toute page sur laquelle les balises head sont chargées, tandis que les styles en ligne s'appliquent uniquement à la page spécifique sur laquelle ils se trouvent, généralement l'élément qu'ils ciblent sur cette page.

La dernière méthode, le CSS externe, utilise une feuille de style dédiée pour définir vos styles visuels. De manière générale, il est préférable d'utiliser une feuille de style externe pour conserver tous vos styles en un seul endroit, d'où ils sont faciles à modifier. Cela sépare également la présentation et la conception, de sorte que le code est facile à gérer et à entretenir.

N'oubliez pas que les styles intégrés et intégrés peuvent remplacer les styles définis dans la feuille de style externe.

Balises de police ou styles CSS : avantages et inconvénients

Les deux principales méthodes de modification des couleurs de police HTML consistent à utiliser la balise de police ou les styles CSS. Ces deux méthodes ont leurs avantages et leurs inconvénients.

Avantages et inconvénients des balises de police HTML

La balise de police HTML est facile à utiliser, c'est donc un pro en sa faveur. En règle générale, CSS est plus compliqué et prend plus de temps à apprendre que de taper <font color="purple"> . Si vous avez un site Web plus ancien qui n'utilise pas HTML5, la balise de police est une méthode viable pour modifier la couleur de la police.

Même si la balise de police est facile à utiliser, vous ne devez pas l'utiliser si votre site Web utilise HTML. Comme mentionné précédemment, la balise de police était obsolète dans HTML5. L'utilisation de code obsolète doit être évitée car les navigateurs pourraient cesser de le prendre en charge à tout moment. Cela peut entraîner la rupture de votre site Web et son mauvais fonctionnement, ou pire, ne pas s'afficher du tout pour vos visiteurs.

Avantages et inconvénients de CSS

CSS, comme la balise de police, a ses avantages et ses inconvénients. L'avantage le plus important de l'utilisation de CSS est que c'est le bon moyen de changer la couleur de la police et de spécifier tous les autres styles pour votre site Web.

Comme mentionné précédemment, il sépare la présentation de la conception, ce qui facilite la gestion et la maintenance de votre code.

En revanche, CSS et HTML5 peuvent prendre du temps à apprendre et à écrire correctement par rapport à l'ancienne méthode d'écriture de code.

Gardez à l'esprit qu'avec CSS, vous avez différentes façons de changer la couleur de la police, et chacune de ces méthodes a son propre ensemble d'avantages et d'inconvénients, comme indiqué précédemment.

Conseils pour changer la couleur de la police HTML

Maintenant que vous savez comment changer la couleur de la police HTML, voici quelques conseils qui vous aideront.

Utiliser un sélecteur de couleurs

Au lieu de choisir des couleurs au hasard, utilisez des sélecteurs de couleurs pour sélectionner les bonnes couleurs. L'avantage d'un sélecteur de couleurs est qu'il vous donnera le nom de la couleur et les valeurs hexadécimales, RVB et HSL correctes que vous devez utiliser dans votre code.

Vérifiez le contraste

Le texte sombre avec un arrière-plan sombre et le texte clair avec un arrière-plan clair ne fonctionnent pas bien ensemble. Ils rendront le texte de votre site difficile à lire. Cependant, vous pouvez utiliser un vérificateur de contraste pour vous assurer que les couleurs de votre site sont accessibles et que le texte est facile à lire.

Trouver la couleur à l'aide de la méthode d'inspection

Si vous voyez une couleur que vous aimez sur un site Web, vous pouvez inspecter le code pour obtenir la valeur hexadécimale, RVB ou HSL de la couleur. Dans Chrome, tout ce que vous avez à faire est de pointer votre curseur sur la partie de la page Web que vous souhaitez inspecter, de cliquer avec le bouton droit et de sélectionner Inspecter . Cela ouvrira le panneau d'inspection du code, où vous pourrez voir le code HTML d'un site Web et les styles correspondants.

Vous souhaitez changer la couleur de la police de votre site ? C'est simple! Ce guide vous aidera à démarrer ️ Cliquez pour tweeter

Résumé

La modification de la couleur de la police HTML peut contribuer à améliorer la lisibilité et l'accessibilité de votre site Web. Cela peut également vous aider à établir une cohérence de marque dans les styles de votre site Web.

Dans ce guide, vous avez découvert quatre manières différentes de modifier la couleur de la police HTML : avec les noms de couleur, les codes hexadécimaux, les valeurs RVB et HSL.

Nous avons également expliqué comment modifier la couleur de la police avec des CSS intégrés, intégrés et externes et utiliser la balise de police, ainsi que les avantages et les inconvénients de chaque méthode. À présent, vous devriez avoir une bonne compréhension de la méthode à utiliser pour changer la couleur de la police HTML. Il ne vous reste donc plus qu'à mettre en œuvre ces conseils sur votre site.

Que pensez-vous de changer la couleur de la police avec CSS et la balise de police ? Faites le nous savoir dans la section "Commentaires!