Les déclarations servant à styliser le texte peuvent être divisées en trois groupes : les propriétés relatives à la présentation du texte, celles relatives à la police de caractères et les autres.
Dans tout ce qui suit, la valeur inherit pour une propriété indique que la valeur doit être héritée de l'élément parent. Si une valeur apparait en caractères gras dans un tableau,
c'est qu'il s'agit de la valeur par défaut.
Le tableau suivant donne les propriétés et les valeurs les plus courantes concernant le texte :
| Propriété | Valeurs possibles |
|---|---|
| text-align | left | right | center | justify | inherit |
| text-decoration | none | underline | overline | line-through |inherit |
| text-indent | longueur | pourcentage | inherit |
| text-transform | none | capitalize | uppercase | lowercase | inherit |
Le sens de ces déclarations est comme suit :
text-align spécifie si le texte doit être aligné à gauche (left), à droite (right), au centre (center) ou
justifié (justify).
text-decoration indique si on veut du texte normal, souligné (underline), surligné (overline) ou barré (line-through).
text-indent sert à indenter le début des paragraphes. On peut spécifier une longueur ou un pourcentage de la longueur des lignes. La valeur par défaut est 0.
text-transform peut être utilisé pour mettre la première lettre de chaque mot en majuscule (capitalize), mettre tout le texte en majuscules
(uppercase) ou tout le texte en minuscules (lowercase).
Le tableau suivant donne les propriétés et les valeurs les plus courantes concernant la police de caractères :
| Propriété | Valeurs possibles |
|---|---|
| font-family | nom de police | serif | sans-serif | cursive | fantasy | monospace | inherit |
| font-size | hauteur | xx-small | x-small | small | medium | large | x-large | xx-large | pourcentage | smaller | larger | inherit |
| font-style | normal | italic | oblique | inherit |
| font-variant | normal | small-caps | inherit |
| font-weight | normal | bold | nombre : 100, 200, … , 900 (400 = normal, 700 = bold) | lighter | bolder | inherit |
Ces déclarations doivent être interprétées de la manière suivante :
font-family détermine la police de caractères. Vous pouvez donner un nom de police spécifique comme Verdana ou 'Times New Roman'.
Le nom doit être écrit de manière exacte, en respectant la casse. Si le nom comporte plusieurs mots, ils doivent être encadrés par des guillemets anglais simples ('…') ou doubles ("…").
Vous pouvez spécifier plus d'une police de caractères, en séparant leurs noms par des virgules; le navigateur choisira la première de ces polices qui est installée sur l'ordinateur client.
Vous pouvez aussi utiliser des types de
polices génériques comme serif (police à empattement), sans-serif (police sans empattement), cursive, fantasy
(police décorative) ou monospace (police à chasse fixe).
La police par défaut varie d'un navigateur à l'autre ; c'est le plus souvent une police avec empattement¹.
font-size spécifie la taille de la police. Ceci peut être fait en donnant une hauteur de manière absolue (p. ex. 16px) ou en utilisant un qualificatif qui
varie de extra extra petite (xx-small) à extra extra grande (xx-large) en passant par moyenne (medium).
La taille peut aussi être spécifiée relativement à la taille de police de l'élément
parent en utilisant un pourcentage (p. ex. 75%) ou les qualificatifs plus petite (smaller) ou plus grande (larger).
font-style indique si on veut une police normale, italique ou oblique (inclinée comme une police italique, mais basée sur la police normale).
font-variant spécifie une police normale ou en petites capitales (small-caps).
font-weight définit la graisse de la police. Les choix habituels sont normale ou grasse (bold). Théoriquement, il est aussi possible d'utiliser des nombres
(100, 200, … , 900) mais le résultat dépendra du nombre de polices installées sur l'ordinateur client.
On peut aussi spécifier la graisse de la police relativement à celle de la police de l'élément parent : lighter (moins grasse, si disponible) ou bolder
(plus grasse, également si disponible).
¹ Ceci parait un peu paradoxal, car on considère généralement que ce sont les polices sans empattement qui sont les plus lisibles sur un écran.
Parmi les autres propriétés, il yen a deux qui pourraient probablement vous être utile. La première est est line-height :
| line-height | normal | longueur | nombre | pourcentage | inherit |
qui fixe la distance entre les lignes². Outre le défaut du navigateur (normal), vous pouvez spécifier une longueur en pixels ou en cadratins, un pourcentage de la taille de la police
ou un facteur (donc, 1.5em, 1.5 et 150% correspondent tous les trois à une distance inter-ligne une fois et demie la taille de la police).
La propriété peut aussi être héritée de l'élément parent (inherit).
La deuxième propriété est vertical-align :
| vertical-align | baseline | longueur | sub | super | top | text-top | middle | bottom | text-bottom | inherit |
Sans entrer dans des détails trop techniques, mentionnons simplement que cette propriété peut être utile pour aligner le texte dans une table avec le haut (top) ou le bas
(bottom) de la cellule où il se trouve.
² À noter qu'il existe aussi des propriétés pour fixer l'écart entre les mots et même l'écart entre les lettres !