Comment changer les couleurs de police du site Web avec CSS

CSS vous permet de contrôler l'apparence du texte sur les pages Web que vous créez et gérez. Dans ce guide, nous vous montrons comment modifier les couleurs de police dans CSS à l'aide de mots-clés de couleur, de codes de couleur hexadécimaux ou de numéros de couleur RVB.

Comment utiliser les styles CSS pour changer la couleur de la police

Les valeurs de couleur peuvent être exprimées sous forme de mots-clés de couleur, de numéros de couleur hexadécimaux ou de numéros de couleur RVB. Pour cette leçon, vous aurez besoin d'un document HTML pour voir les changements CSS et d'un

fichier CSS séparé qui est attaché à ce document. Nous allons examiner l'élément de paragraphe en particulier.

Utilisez des mots-clés de couleur pour modifier les couleurs de police

Pour modifier la couleur du texte de chaque paragraphe de votre fichier HTML, accédez à la feuille de style externe et tapez p { }. Placer le Couleur propriété dans le style suivi de deux points, comme p { couleur: }. Ensuite, ajoutez votre valeur de couleur après la propriété, en la terminant par un point-virgule. Dans cet exemple, le texte du paragraphe est remplacé par la couleur noire:

p {
la couleur noire;
}

Utiliser des valeurs hexadécimales pour modifier les couleurs de police

L'utilisation de mots-clés de couleur pour changer le texte en rouge, vert, bleu ou une autre couleur de base ne vous donnera pas la précision que vous recherchez lorsque vous créez différentes nuances de ces couleurs. C'est à ça que servent les valeurs hexadécimales.

Ce style CSS peut être utilisé pour colorer vos paragraphes en noir car le code hexadécimal #000000 se traduit en noir. Vous pouvez même utiliser un raccourci avec cette valeur hexadécimale et l'écrire sous la forme #000 avec les mêmes résultats.

p {
couleur: #000000;
}

Les valeurs hexadécimales fonctionnent bien lorsque vous avez besoin d'une couleur qui n'est pas simplement noire ou blanche. Par exemple, ce code hexadécimal vous donne la possibilité de définir une nuance de bleu très spécifique, un bleu de milieu de gamme, semblable à de l'ardoise:

p {
couleur: #2f5687;
}

Hex fonctionne en définissant les valeurs RVB (rouge, vert, bleu) d'une couleur séparément avec des valeurs de base seize. C'est pourquoi ils contiennent les lettres UNE à travers F en plus des chiffres 0 à travers 9.

Chaque couleur, rouge, vert et bleu, reçoit sa propre valeur à deux chiffres. 00 est la valeur la plus faible possible, tandis que FF est le plus élevé. Les couleurs sont répertoriées dans l'ordre RVB dans un hexadécimal, de sorte que les deux premiers chiffres représentent la valeur rouge et ainsi de suite.

Utiliser les valeurs de couleur RGBA pour modifier les couleurs de police

Enfin, vous pouvez utiliser les valeurs de couleur RGBA pour modifier les couleurs de police. Le RGCA est pris en charge dans tous les navigateurs modernes, vous pouvez donc utiliser ces valeurs en sachant que cela fonctionnera pour la plupart des téléspectateurs, mais vous pouvez également définir une solution de secours facile.

Cette valeur RVBA est la même que la couleur bleu ardoise spécifiée ci-dessus:

p {
couleur: rgba (47,86,135,1);
}

Les trois premières valeurs définissent les valeurs Rouge, Vert et Bleu et le nombre final est le paramètre alpha pour la transparence. Le paramètre alpha est défini sur 1 pour signifier 100 pour cent, donc cette couleur n'a pas de transparence. Si vous définissez cette valeur sur un nombre décimal, comme 0,85, cela se traduit par une opacité de 85 % et la couleur serait légèrement transparente.

Si vous souhaitez protéger vos valeurs de couleur, copiez ce code CSS:

p {
couleur: #2f5687;
couleur: rgba (47,86,135,1);
}

Cette syntaxe définit d'abord le code hexadécimal, puis remplace cette valeur par le numéro RGBA. Cela signifie que tout navigateur plus ancien qui ne prend pas en charge RGBA obtiendra la première valeur et ignorera la seconde.

Il est important de garder à l'esprit que la propriété color fonctionne sur n'importe quel élément de texte HTML en CSS. Vous pouvez, par exemple, changer toutes les couleurs de vos liens. Cet exemple rendra vos liens vert clair:

une {
couleur: #16c616;
}

Cela fonctionne également avec plusieurs éléments à la fois. Vous pouvez définir chaque niveau de titre simultanément. Par exemple, cela définira tous vos éléments de titre sur une couleur bleu nuit:

h1, h2, h3, h4, h5, h6 {
couleur: #020833;
}

Trouver les valeurs hexadécimales ou RGBA pour vos couleurs n'est pas toujours facile. La plupart des concepteurs de sites Web utiliseront un programme de retouche d'images, comme Photoshop ou GIMP, pour générer les codes exacts. Vous pouvez également trouver des outils de sélection de couleurs pratiques en ligne, comme celui-ci de w3schools.

Autres façons de styliser une page HTML

Les couleurs de police peuvent être modifiées avec une feuille de style externe, une feuille de style interne ou un style en ligne dans le document HTML. Cependant, les meilleures pratiques imposent d'utiliser une feuille de style externe pour vos styles CSS.

Une feuille de style interne, qui sont des styles écrits directement dans la "tête" de votre document, ne sont généralement utilisées que pour les petits sites Web d'une page. Les styles en ligne doivent être évités car ils s'apparentent aux anciennes balises "font" que nous avons traitées il y a de nombreuses années. Ces styles en ligne rendent très difficile la gestion du style de police car vous devez les modifier à chaque instance du style en ligne.