Stylez vos pages !

Donnez du style aux caractères !

Il existe un grand nombre de propriétés destinées à styler le texte. Elles permettent de contrôler la police de caractères, la couleur et même les ornements de ceux-ci. Vous avez déjà rencontré la propriété font-family et jusqu'ici la valeur que vous avez indiquée est sans-serif. Avant de vous lancer dans une créativité débridée, apprenez d'abord en quoi consiste une famille de polices.

Les polices faisant partie d'une même famille partagent un certain nombre de caractéristiques. Ces familles sont au nombre de cinq: sans-serif, serif, monospace, cursive et fantasy:

Il est impossible de contrôler quelles polices équipent l'ordinateur de vos visiteurs. C'est pourquoi, la propriété font-family permet de lister une série de polices à utiliser par le navigateur. Si aucune police de la liste n'est trouvée par le navigateur dans le système d'exploitation de la machine réceptionnant la page web, la police par défaut est utilisée. C'est la raison pour laquelle il est recommandé de spécifier plusieurs noms de polices ainsi qu'une famille de polices générale:

Afin d'illustrer notre propos, nous allons effectuer au fur et à mesure des petites modifications sur les styles des textes du site de Marc que vous pouvez télécharger. Créez dans un premier temps un fichier journal.css et incluez-y la règle précédente puis liez le fichier journal.html à cette nouvelle feuille de style externe.

La propriété font-size permet de spécifier la taille de la police à utiliser. Il existe différentes manières de spécifier cette taille:

• A l'aide de la taille exacte en pixels
  
• A l'aide de la taille en pourcentage de celle héritée
  
• A l'aide de la taille en em où 1em correspond à la taille d'un caractère
  
• A l'aide de mots-clés traduits par le navigateur en pixels
  

Afin d'obtenir des résultats cohérents dans la plupart des navigateurs, il est recommandé de choisir un mot-clé comme taille par défaut, de le mettre dans la déclaration font-size de la règle de body puis d'indiquer la taille des polices soit en em, soit en pourcentage de la taille précisée précédemment. Ceci permet de modifier n'importe quelle taille de caractère de la page en ne changeant que celle asignée à body. Ainsi, lorsque vos visiteurs voudront redimensionner les polices de la page, toutes les tailles de caractères se réajusteront automatiquement.

Ajoutez les nouvelles propriétés dans le fichier journal.css puis rechargez la page de votre navigateur et regardez si vous voyez une différence dans la taille des polices:

Agrandissez et rétrécissez l'affichage du site de Marc dans votre navigateur: la taille des polices devrait s'adapter à l'affichage choisi !

La propriété font-weight contrôle la graisse des caractères. Cette propriété peut prendre différentes valeurs selon le style que nous désirons donner aux caractères:

p.normal{font-weight : normal;}

p.gras{font-weight : bold;}

p.important{font-weight : 300;}

Notons que normal est la valeur par défaut et que les valeurs possibles pour cette propriété sont un nombre entier de centaines compris entre 100 et 900, bold ou bolder ou lighter qui permettent d'augmenter ou de diminuer la graisse par rapport à la valeur par défaut.

La propriété font-style permet quant à elle de spécifier le «style» de la police à utiliser. Cette propriété peut également prendre différentes valeurs:

p.normal{font-style : normal;}

p.italique{font-style : italic;}

p.oblique{font-style : oblique;}

Notons que normal est la valeur par défaut et oblique est un style où la police est inclinée. Le rendu à l'écran est parfois similaire au style italic mais s'utilise en principe sur des polices ne possédant pas de rendu italique.