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 ce que les styles de leur 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 modifier la couleur de la police sur votre site web.
Dans cet article, nous allons vous montrer différentes façons de changer la couleur des polices de votre site web, et discuter des raisons pour lesquelles vous voudriez le faire en premier lieu.
Consultez notre guide vidéo sur la modification de la couleur de la police HTML
Pourquoi changer la couleur de la police HTML?
Vous voudriez changer la couleur de la police parce que cela peut aider à améliorer la lisibilité et l’accessibilité de votre site web. Par exemple, si votre site utilise un schéma de couleurs plus sombres, laisser la couleur de la police en noir rendrait difficile la lecture du texte sur votre site web.
Une autre raison pour laquelle vous pourriez envisager de changer la couleur de la police est si vous comptez utiliser une couleur plus sombre de la palette de couleurs de votre marque. C’est une autre occasion de renforcer votre marque. Cela renforce la cohérence de la marque et garantit que le texte sur tous tes canaux de marketing a la même apparence.
Ceci étant dit, voyons comment vous pouvez définir et modifier la couleur de la police HTML.
Les 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 hexagonaux et les valeurs HSL. Voyons comment elles 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 couleur sont pris en charge, et vous pouvez utiliser n’importe laquelle de ces couleurs dans vos styles. Par exemple, vous pouvez utiliser « blue » pour définir la couleur d’un élément individuel en bleu.
Cependant, l’inconvénient de cette approche est que tous les noms de couleur ne sont pas pris en charge. En d’autres termes, si vous utilisez une couleur qui ne figure pas sur la liste des couleurs prises en charge, vous ne pourrez pas l’utiliser dans votre design par son nom de couleur.
Valeurs RVB et RGBA
Ensuite, nous avons les valeurs RVB et RGBA. La valeur RVB signifie Rouge, Vert et Bleu. Il définit la couleur en mélangeant les valeurs rouge, verte et bleue, de la même façon que vous mélangeriez une couleur sur une palette réelle.
La valeur RVB ressemble à ceci : RGB(153,0,255). Le premier chiffre indique l’entrée de la couleur rouge, le deuxième indique l’entrée de la couleur verte et le troisième indique 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 du tout présente et 255 signifie que la couleur particulière est à son intensité maximale.
La valeur RGBA ajoute une autre valeur au mélange, et c’est la valeur alpha qui représente l’opacité. Elle va de 0 (non transparent) à 1 (totalement transparent).
Valeur HEX
Les codes de couleur hexagonaux fonctionnent de manière similaire aux codes RVB. Ils se composent de chiffres de 0 à 9 et de lettres de A à F. Le code hexa ressemble à ceci : #800080. Les deux premières lettres indiquent l’intensité de la couleur rouge, les deux chiffres du milieu indiquent l’intensité de la couleur verte et les deux derniers indiquent l’intensité de la couleur bleue.
Valeurs HSL et HSLA
Une autre façon de définir les couleurs en HTML est d’utiliser les valeurs HSL. HSL est l’abréviation de hue, saturation et lightness.
La teinte utilise des degrés de 0 à 360. Sur une roue chromatique standard, le rouge est à environ 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 couleur complète.
Enfin, la luminosité utilise des pourcentages similaires à 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 en HSL : hsl(276, 100%, 50%).
HSL, comme RGB, prend en charge l’opacité. Dans ce cas, vous utiliseriez la valeur HSLA où A représente l’alpha et est défini par un nombre de 0 à 1. Si nous voulions diminuer 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 les différentes façons de modifier la couleur de la police HTML.
L’ancien : Balises <font>
Avant l’introduction de HTML5 et son adoption comme norme de codage, vous pouviez changer la couleur de la police en utilisant les balises de police. Plus précisément, vous utilisiez la balise de police avec l’attribut color pour définir la couleur du texte. La balise color était spécifiée soit par son nom, soit par son code hexadécimal.
Voici un exemple de l’aspect de ce code avec le code couleur hex :
<font color="#800080">This text is purple.</font>Et voici comment vous pourriez définir la couleur du texte en violet en utilisant le nom de la couleur.
<font color="purple">This text is purple.</font> Cependant, la balise <font> est dépréciée en 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 le but premier du HTML. Par conséquent, il est logique que les balises <font> ne soient plus prises en charge en HTML5.
Alors 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.
Le nouveau : Styles CSS
Pour modifier la couleur de la police HTML avec CSS, vous utiliserez la propriété CSS color associée au sélecteur approprié. CSS vous permet d’utiliser des noms de couleur, des valeurs RGB, hex et HSL pour spécifier la couleur. Il existe trois façons d’utiliser CSS pour modifier 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 vous la styliserez avec la propriété de couleur CSS comme suit :
<p style="color: purple">This is a purple paragraph.</p>Si vous voulez utiliser une valeur hexagonale, votre code ressemblera à ceci :
<p style="color:#800080">This is a purple paragraph.</p>Si vous voulez utiliser la valeur RGB, vous l’écrirez comme ceci :
<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>Enfin, si vous utilisez les valeurs HSL, vous utiliserez ce code :
<p style="color:hsl(276, 100%, 50%)">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 changer la couleur de la police de tes en-têtes ainsi que des liens.
Par exemple, en remplaçant la balise <p> ci-dessus par <h2>, vous changeras la couleur du texte de ce titre, tandis qu’en la remplaçant par la balise <a>, vous changerez la couleur de ce lien. Vous pouvez aussi utiliser l’élément <span> pour colorer n’importe quelle quantité de texte.
Si vous voulez changer la couleur d’arrière-plan de tout un paragraphe ou d’un titre, c’est très similaire à la façon dont vous changeriez la couleur de la police. Vous devez utiliser l’attribut background-color à la place et utiliser soit le nom de la couleur, soit les valeurs hex, RVB ou HSL pour définir la couleur. Voici un exemple
<p style="background-color: purple">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 voulez 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. Comme pour la méthode CSS en ligne, vous pouvez utiliser différents sélecteurs pour modifier la couleur de la police de vos titres et de vos liens.
Si vous voulez 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 pour 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 le CSS externe pour modifier la couleur de la police sur votre site web. Le CSS externe est un CSS qui est 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 des polices, les marges, les marges intérieures, les familles de polices, les couleurs d’arrière-plan, etc. En bref, la feuille de style est responsable de l’aspect visuel de votre site.
Pour modifier la couleur de la police avec un CSS externe, vous utiliseriez des sélecteurs pour styliser les parties du HTML que vous voulez. Par exemple, ce code modifiera tout le corps du texte de votre site :
body {color: purple;}N’oublie pas que vous pouvez utiliser les valeurs RGB, hex et HSL et pas seulement les noms des couleurs pour changer la couleur de la police. Si vous voulez modifier la feuille de style, il est recommandé de le faire dans un éditeur de code.
En ligne, intégré ou externe ?
Vous savez donc maintenant comment utiliser CSS pour modifier la couleur de la police. Mais quelle méthode devez-vous utiliser ?
Si vous utilisez le code CSS en ligne, vous l’ajouterez directement dans votre fichier HTML. En général, cette méthode convient pour les corrections rapides. Si vous voulez changer 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 gros, plus votre page web mettra du temps à se charger. En plus de cela, les CSS en ligne peuvent rendre votre HTML désordonné. C’est pourquoi la méthode d’utilisation de CSS en ligne pour modifier la couleur de la police HTML est généralement déconseillée.
Le CSS incorporé est placé entre les balises <head> et à l’intérieur des balises <style>. Comme le CSS en ligne, il est bon pour les corrections rapides et pour remplacer les 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’appliquent à toute page sur laquelle les balises head sont chargées, alors que les styles en ligne ne s’appliquent qu’à 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. En général, 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 permet également de séparer la présentation et la conception, afin que le code soit facile à gérer et à entretenir.
N’oubliez pas que les styles en ligne 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 pour modifier les couleurs des polices HTML consistent à utiliser la balise de police ou les styles CSS. Ces deux méthodes ont leurs avantages et leurs inconvénients.
Balises de police HTML : avantages et inconvénients
La balise de police HTML est facile à utiliser, c’est donc un atout en sa faveur. En général, les CSS sont plus compliqués et prennent plus de temps à apprendre que de saisir <font color="purple">. Si vous avez un site web plus ancien qui n’utilise pas HTML5, alors la balise de police est une méthode viable pour changer la couleur de la police.
Même si la balise font est facile à utiliser, tu ne devrais pas l’utiliser si votre site web utilise HTML. Comme mentionné précédemment, la balise font a été dépréciée en HTML5. Il faut éviter d’utiliser un code déprécié car les navigateurs peuvent cesser de le prendre en charge à tout moment. Cela peut conduire à ce que votre site web se casse et ne fonctionne pas correctement, ou pire, ne s’affiche pas 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 des polices 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 rend votre code plus facile à gérer et à maintenir.
L’inconvénient, c’est que CSS et HTML5 peuvent prendre du temps à apprendre et à écrire correctement par rapport à l’ancienne façon d’écrire du code.
N’oubliez pas qu’avec CSS, vous avez différentes façons de changer la couleur de la police, et que chacune de ces méthodes a ses propres avantages et inconvénients, comme nous l’avons vu 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 seront utiles.
Utilisez un sélecteur de couleurs
Au lieu de choisir les 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 hex, RVB et HSL correctes que vous devez utiliser dans votre code.
Vérifiez le contraste
Un texte foncé avec un arrière-plan sombre ou un 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 en utilisant la méthode Inspecter
Si vous voyez une couleur qui vous plaît sur un site web, vous pouvez inspecter le code pour obtenir la valeur hex, RVB ou HSL de la couleur. Dans Chrome, il vous suffit de pointer votre curseur sur la partie de la page Web que vous voulez inspecter, de faire un clic 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.
Résumé
Changer 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 façons 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 couvert la façon dont vous pouvez changer la couleur de la police avec le CSS en ligne, intégré et externe 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 modifier la couleur de la police HTML, il ne te reste donc plus qu’à mettre en œuvre ces conseils sur votre site.
Que pensez-vous de la modification de la couleur de la police avec CSS et la balise de police ? Dîtes-le-nous dans la section des commentaires !
Laisser un commentaire