Mettre en forme le texte

Une grande partie du formatage du texte se fait avec la propriété font (et ses sous-propriétés). Il est plus courant d'utiliser les sous-propriétés que font elle-même.

// la police

On utilise font-family: [la police ou famille de police]; pour indiquer la police que l'on souhaite utiliser.

On indique généralement une famille de police, car il se peut que l'ordinateur du client ne possède pas celle que vous souhaitez. Dans le cas échéant, le navigateur utilisera une autre police de la famille, si elle est disponible.

Pour éviter les problèmes de compatibilité, on utilise toujours des polices standards, elles sont :

• Times (new roman)
• Arial
• Verdana
• Georgia
• Courrier new

Mais c'est toujours mieux d'utiliser une famille, les familles courantes sont :

• Arial, Helvetica, sans-serif
• "Times New Roman", Times, serif
• "Courier New", Courier, mono
• "Times New Roman", Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

Vous pouvez biensûr faire votre propre famille de polices, la seule recommandation est de terminer avec la police serif ou sans-serif, ce n'est pas obligatoire, mais c'est conseillé : la police serif est toujours disponible.

Notez aussi que pour les noms de polices contenant des espaces, il faut les entourer de guillemets doubles.

// la taille

La propriété CSS pour définir la taille du texte est font-size.

Il y a deux métodes pour exprimer la taille du texte : à partit d'une valeur absolue ou relative.

On exprime la taille de la police de manière absolue avec les unités px (pixel), en mm (millimètre) et en cm (centimètre).

Par exemple :

1  font-size: 8px;
2  font-size: 2mm;
3  font-size: 0.2cm;

Il est important de noter que pour une valeur décimale, il faut utiliser le point . comme séparateur, et non la virgule. Il n'est pas non plus possible de mettre d'espace entre la valeur et l'unité (12 px ne fonctionnera pas).

Il est malgré tout assez avantageux d'exprimer la taille du texte de manière relative, car certains utilisateurs réglent leur navigateur pour que la police soit plus petite ou plus grande selon leur préférence, et que l'utilisation d'une valeur absolue ne respecte pas ce choix de l'utilisateur.

Vous pouvez donc exprimer la taille avec les valeurs :
De la plus petite à la plus grande :

• xx-small
• x-small
• small
• medium
• big
• x-big
• xx-big

Vous pouvez utiliser l'unité relative em, qui correspond à la taille d'un m minuscule. On pourrait dire que 1em correspond à la "taille standard", donc 0.8em à 0,8 fois la taille standard, etc...

De la même manière que pour l'unité em, avec le % (pourcentage), 100% correspondra à la taille par défaut, donc 80% à 80% de la taille standard, etc...

// Effets de style

Par exemple, le gras et l'italique sont des effets de style.

Pour mettre un texte en gras, on utilise la propriété font-weight: bold;. la valeur normal annulera cet effet de style.

Pour mettre en italique, on utilise font-style, propriété qui admet comme valeur italic, oblique (équivalent à italique, mais l'inclinaison est plus prononcée) et normal.

Note : Il n'est biensûr pas obligatoire de préciser font-style: normal; pour un élément dont le texte sera droit par défaut.

Une troisième propriété text-decoration admet les valeurs :

• underline : souligne
• overligne : surligne
• line-through : barre
• blink : fait clignoter le texte
• none : annulera les effets cités (par exemple, pour annuler le surlignement d'un lien)

// La couleur

Pour choisir la couleur du texte, on utilise la propriété color.

On peut choisir cette couleur à l'aide des mots clés

• white
• silver
• gray
• black
• red
• maroon
• lime
• green
• yellow
• olive
• blue
• navy
• fuchsia
• purple
• aqua
• teal

Vous pouvez voir les différentes couleurs sur la page d'exemple des couleurs..

On peut utiliser le code héxadécimal, ou le format rgb, de la manière rgb([rouge],[vert],[bleu]).

On aura alors color: red; équivalent à color: #FF0000; et color: rgb(255,0,0);.

N'hésitez pas à poser vos questions sur le forum