Comment changer la taille de la police HTML dans CSS

Être capable de styliser différents aspects de votre page HTML est une compétence importante pour les concepteurs et développeurs Web. Pour styliser vos pages Web HTML avec des couleurs et des tailles de police, vous devez être familiarisé avec CSS. Pour cibler spécifiquement la taille de la police, vous pouvez utiliser le CSS taille de police propriété.

Si vous cherchez un moyen de modifier la taille de la police HTML à l’aide de CSS, nous avons ce qu’il vous faut. Plongeons-nous en commençant par une introduction au CSS taille de police propriété.

Comprendre la propriété CSS font-size

le taille de police La propriété en CSS est pratique lorsque vous devez modifier la taille du texte HTML. Vous pouvez utiliser cette propriété pour modifier la taille de chaque morceau de texte sur une page HTML ou cibler des éléments spécifiques à modifier.

Le ciblage d’éléments spécifiques est généralement recommandé car vous ne voulez généralement pas que tout ait la même taille. Le texte qui ne suit pas une hiérarchie visuelle est difficile à parcourir et à différencier les titres de niveau supérieur des titres de niveau inférieur.

En termes plus simples, n’abusez pas de la taille de police propriété. Si vous voulez qu’un en-tête se démarque, il existe différentes balises d’en-tête HTML pour cela. Consultez notre aide-mémoire HTML Essentials pour différentes balises, attributs, etc., ainsi que des explications.

Le CSS taille de police La propriété prend deux types de valeurs : absolue et relative.

Valeurs de longueur absolue (c’est-à-dire pixels ) sont fixes tandis que les relatifs (par exemple em et ex ) sont flexibles. Par exemple, pour une unité relative à la police comme em , la taille est généralement déterminée par la taille de police de l’élément parent. Cependant, les unités relatives aux polices basées sur la racine telles que Rem sont influencés par la taille de la police de l’élément racine ( ).

Chacun a ses avantages et ses inconvénients, mais dans le but de rester concentré, nous n’en discuterons pas dans cet article.

Comment changer la taille de la police d’un élément HTML en CSS

Vous pouvez modifier la taille de la police du texte HTML en utilisant une syntaxe CSS standard.

Tout d’abord, spécifiez le sélecteur (le texte que vous souhaitez modifier) ​​et ouvrez des accolades. Ensuite, entrez le taille de police propriété suivie de deux-points, spécifiez la taille spécifique dans laquelle vous voulez que votre texte HTML soit présenté et fermez-le avec un point-virgule.

Voici la syntaxe :

Pour mieux comprendre le concept, passez en revue le passe-partout HTML suivant qui contient quelques lignes de code supplémentaires (un titre et un paragraphe) :

Si vous souhaitez modifier la taille de la police de l’élément de paragraphe, vous devez le sélectionner (via une classe, une balise ou un identifiant) et, à l’aide du CSS taille de police propriété, définissez une valeur personnalisée avec vos unités préférées. Dans notre exemple, nous utiliserons des pixels ( pixels ).

Bien que le CSS en ligne ne soit généralement pas conseillé dans les grands projets, vous pouvez également l’utiliser pour modifier la taille du texte HTML. En prenant des notes sur le code CSS externe ci-dessus, nous pouvons implémenter la même chose en ligne comme ceci :

Texte dans le p La balise HTML aura désormais une nouvelle taille personnalisée.

Dépannage des erreurs lors de la modification de la taille de la police HTML dans CSS

Bien que l’ensemble du processus de modification de la taille du texte dans CSS puisse sembler facile, il se peut qu’il ne se déroule pas toujours exactement comme prévu. Si vous rencontrez des problèmes, commencez par vérifier si vous avez enregistré les modifications apportées à votre fichier (assurez-vous également de lier votre feuille CSS à votre fichier HTML). Si c’est le cas, essayez d’utiliser la méthode en ligne, puis actualisez la page.

Si cela fonctionne, il y a peut-être un problème avec votre code CSS. Essayez d’utiliser le !important balise, et si cela fonctionne, il doit y avoir un code en conflit. Analysez votre code CSS ligne par ligne pour essayer de détecter cette erreur.