Le CSS a été conçu pour mettre en forme les sites web tandis que le HTML a été pensé pour créer les structures des sites web. Parmi les possibles mises en forme du CSS nous retrouvons celle du texte.
A travers plus de 250 propriétés l’apparence d’un site peut être extrêmement personnalisée grâce au CSS. Quelques-unes de ces propriétés influent sur l’apparence des textes et c’est celles-ci, du moins les plus communes, que nous allons découvrir et apprendre à utiliser dans cet article.
Sommaire :
La mise en page web peut parfois s’avérer complexe. Mise en forme du texte, des images, des arrières-plans, design responsif… les éléments à maîtriser sont nombreux pour créer une page esthétique et fonctionnelle.
Pour vous éviter toute perte de temps et assurer un résultat harmonieux répondant aux bonnes pratiques du web, confiez la création de votre site à des professionnels. Décrivez votre projet sur Codeur.com et recevez gratuitement et en quelques minutes les devis de développeurs web freelances, sans engagement.
Commençons par une propriété simple à utiliser et utilisée dans la quasi-totalité des sites web, la propriété CSS color. Cette propriété permet de changer la couleur d’un texte grâce à des mots-clés prédéfinis, une valeur en hexadécimal, en RGB ou RGBA et pour finir on peut aussi utiliser les valeurs notées en HSL ou HSLA.
En plus de modifier la couleur d’un texte, color permet de gérer la transparence de ce dernier grâce à un canal alpha ce qui permet de composer avec un arrière-plan.
| Valeur possible | Exemple |
| Mot-clé « currentcolor » | |
| Mot-clé pour une couleur définie | |
| Hexadécimale | |
| Hexadécimale avec transparence | |
| RGB | |
| RGBA (transparence) | |
| HSL | |
| HSL (transparence) | |
La propriété font-family permet de changer la police de caractère d’un texte donné. Pour cela, il suffit d’indiquer le nom de la police à utiliser entre guillemets.
Il est possible d’indiquer plusieurs polices à la suite, ainsi si la première police de la liste ne peut pas être utilisée alors la suivante le sera et ainsi de suite jusqu’à ce qu’une police de la liste puisse être utilisée.
Si aucune des polices ne peut être utilisée pour le texte donné, alors la police par défaut du site sera utilisée. Cette police par défaut peut être définie directement, dans la liste déclarée des polices du font-family, par un des noms de famille génériques existant en CSS.
Ces noms de famille génériques sont des polices de secours pour conserver une mise en forme voulue représentant l’intention du site. Dans les noms de famille génériques, nous retrouverons :
Chacun de ces noms de famille générique a sa particularité et parfois une utilité particulière comme « emoji » qui a été spécialement conçue pour afficher des emoji.
Néanmoins, avant de déclarer un nom de famille générique dans votre font-family, vous pouvez indiquer une police « Web Safe ». Les polices « Web Safe » sont des polices préinstallées sur tous les navigateurs et appareils accédant à internet. Elles sont universelles et devraient pouvoir être utilisée sans souci si vous avez déclaré avant cette police « Web Safe » une police personnalisé qui n’est pas reconnue par le navigateur.
Voici quelques polices « Web Safe » que vous pouvez utiliser :
Alors que les polices personnalisées doivent être indiquées entre guillemets, les noms de famille génériques et les polices « Web Safe » ne nécessitent pas de guillemets dans leur déclaration.
Pour finir, voyons des exemples de déclaration d’une propriété CSS font-family :
font-family: sans-serif;font-family: Courier New, monospace;font-family: "Fira Sans", Arial, sans-serif;
Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités.
Les mots-clés définis se décomposent en 2 familles : les tailles absolues et les tailles relatives.
Une taille absolue est un mot-clé désignant une valeur absolue basée sur la taille par défaut de l’utilisateur (à savoir medium). Il existe au total 7 mots-clés pour les tailles absolues qui sont :
Une taille relative se définie par rapport à la taille de son élément parent. Ainsi avec le mot-clé « larger » le texte aura une taille agrandie par rapport à celle de son parent et à l’inverse avec le mot-clé « smaller » la taille sera réduite.
Ensuite, vous pouvez définir une taille par une valeur numérique personnalisée et une unité choisie. Il existe de multiples unités pour définir une taille de texte, en voici quelques-unes :
L’unité « px » pour « pixels » permet de définir une taille statique et absolue totalement indépendante de tout autre élément parent, enfant ou racine.
Les unités « ex », « em » ou « % » sont relatives à la taille de l’élément parent. Ainsi une taille définie à « 50% » pour un élément dont l’élément parent a une taille de « 20px » représentera une taille pour l’élément cible de « 10px ».
L’unité « rem » est quant à elle relative à la taille de la racine HTML, l’élément « <html> ». Ainsi, si la taille définie pour l’élément <html> a été définie à 16px, un élément du site ayant une taille de « 1rem » aura une taille équivalente à celle de l’élément <html> soit « 16px ». Un élément qui aura une taille de « 0.75rem » aura au final une taille de « 12px » avec la taille définie précédemment pour l’élément <html>.
Voici quelques exemples de définition de « font-size » :
font-size: 18px;font-size: 1.2em;font-size: 0.8rem;font-size: 80%;La graisse d’un texte est ce qui permet de lui donner l’apparence d’un texte en gras ou au contraire d’un texte fin. Cette propriété se définit par des mots-clés ou bien des valeurs numériques.
Tout comme pour font-size, il existe des mots-clés pour définir un niveau de graisse absolu ou relatif.
Les mots-clés de niveau de graisse relatifs sont « bolder » et « lighter ».
Les éléments qui auront la propriété font-weight avec pour valeur « bolder » seront plus gras que leur élément parent et à l’inverse avec « lighter » leurs caractères seront affichés avec une graisse moins importante que celle de l’élément parent.
Les valeurs numériques et les niveaux de graisse absolus sont liés, ainsi on aura les associations suivantes :
| Valeur numérique | Mot-clé prédéfini |
| 100 | thin |
| 200 | extra light |
| 300 | light |
| 400 | normal ou regular |
| 500 | medium |
| 600 | semi bold |
| 700 | bold |
| 800 | extra bold |
| 900 | black |
Toutes les polices de caractères n’existent pas avec tous les niveaux de graisses, certaines fontes ont été créées pour utiliser seulement les graisses « normal » et « bold ».
La valeur par défaut de niveau de graisse d’un texte est « normal » ou en valeur numérique « 400 »
Voici quelques exemples d’utilisation de la propriété font-weight :
font-weight: 200;font-weight: extra bold;font-weight: lighter;
La propriété CSS font-style permet de donner à un texte la forme « italique » ou « oblique ».
Elle ne fonctionne qu’avec des mots-clés prédéfinis qui sont :
Voici comment utiliser la propriété avec chaque valeur :
font-style: normal;font-style: italic;font-style: oblique;La valeur « oblique » peut prendre un second paramètre qui est l’inclinaison du texte. Ainsi si vous souhaitez écrire un texte en oblique avec une inclinaison de 30 degrés, vous définirez sa propriété « font-style » de cette manière :
font-style: oblique 30deg;
Comme sur les logiciels de traitement de texte, en CSS il est aussi possible de définir qu’un texte soit aligné à gauche ou à droite, qu’il soit centré ou bien justifié.
La propriété CSS qui permet cela est text-align et elle peut prendre 4 valeurs différentes prédéfinies et correspondantes aux alignement précédemment cités.
Les associations mot-clé et alignement sont les suivant :
Ainsi, vous aurez les possibilités suivantes pour text-align :
text-align: left;text-align: right;text-align: center;text-align: justify;
Le CSS offre de nombreuses possibilités pour mettre en forme le texte de votre site ou application web. Dans cet article nous avons vu les propriétés les plus communes et les plus utilisées en CSS néanmoins un large panel d’autres propriétés existe. Retrouvez-les dans cet autre tuto !
Si la mise en forme de vos textes n’est pas une tâche qui vous semble facile, n’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un développeur web freelance pour la mise en forme de votre site web.