Mettre en forme du texte en CSS

Parmi les propriétés que le CSS nous apporte, les premières et les plus élémentaires, sont évidemment celles qui concerne la mise en forme du texte. Qu’il s’agisse de la taille, de la police ou de la position, nous allons voir ici quelles sont ses fonctionnalités et comment les utiliser.

 

La taille, propriété incontournable pour une mettre en forme

 

Afin de modifier la taille du texte en CSS, la propriété qu’il faut utiliser est font-size. Cependant quelle valeur lui donner pour indiquer la dimension du texte ? Il y existe deux techniques principales pour faire cela :

• Donner une taille absolue, avec une unité (en pixels, en cm, en mm) ce qui permet d’être très précis. L’inconvénient est qu’avec les différentes machines utilisées (smartphone, tablette..) elle ne sera pas adaptée pour tout le monde. Une taille absolue n’est pas responsive.
• Indiquer une taille relative, en pourcentage, avec des mots, ou en unité em.

 

Taille absolue

Pour donner une taille absolue, on utilise principalement le pixel. Par conséquent, afin d’avoir un texte d’une hauteur de 15 pixels par exemple pour les paragraphes, il faut donc écrire dans votre fichier CSS :
selecteur
{
font-size : 15px ;
}

Comme je l’ai dit plus haut, vous pouvez aussi définir les tailles en centimètres ou en millimètres. Vous avez juste à remplacer le « px » par « cm » ou « mm ». Cependant, je déconseille de faire cela, car ce n’est pas bien adapté pour les différents types d’écrans.

 

Dimension relative

C’est la solution la plus adaptée, car le texte va s’adapter en fonction de l’appareil de l’utilisateur. Il existe également plusieurs manières d’indiquer une valeur relative.
Tout d’abord, vous pouvez écrire la taille avec des mots en anglais comme ceux-ci :

• -xx-small : minuscule ;
• -x-small : très petit ;
• -small : petit ;
• -medium : moyen (valeur par défaut) ;
• -large : grand ;
• -x-large : très grand ;
• -xx-large : gigantesque ;

Vous pouvez tester ces valeurs dans votre CSS de cette manière :

selecteur
{
font-size : small ;
}

Le défaut de cette technique est qu’elle est limitée aux 7 tailles présentées ci-dessus. De plus, il faut savoir que ces tailles sont relatives à la taille qui est appliquée par défaut par le support utilisé.
L’unité em présente plus de possibilités, tout comme la façon précédente, elle est relative à la taille par défaut qu’applique le support. Sa valeur centrale est 1em, c’est la valeur qui ne modifie pas la taille du texte : 1em=100% de la valeur par défaut.
On peut également y ajouter des décimales en remplaçant la virgule par un point. 1.5em=150% de la valeur par défaut, 0.5em=50%…
Le ex fonctionne de la même manière que le em, mais est plus petit de base, car il s’agit d’une unité relative à la hauteur de la minuscule de l’élément.
Pour en savoir plus sur les tailles vous pouvez cliquer ici.

 

La police en CSS

La police fut un point très difficile à maîtriser avant l’arrivée du CSS3. En effet, pour que la police que vous avez choisie s’affiche correctement, il faut que l’internaute qui consulte votre page l’ait sur son support. Si celui-ci ne la possède pas, son navigateur prendra une police standard par défaut et ça n’aura peut-être rien à voir avec ce que vous vouliez rendre.
Depuis le CSS3, nous pouvons faire télécharger automatiquement au navigateur une police.

 

Modifier la police d’une page web

Tout d’abord, il faut connaître les polices déjà intégrées au CSS, qui seront donc exploitables sur tous les navigateurs et supports physiques existants. Il y en a 3 : serif, sans-serif et cursive.
La propriété CSS qui permet de donner une police à utiliser est font-family. Vous devez l’écrire de cette manière dans votre document CSS :

selecteur
{
font-family : police ;
}

Pour palier à l’éventualité que l’internaute n’ait pas la même police que vous, on peut préciser plusieurs polices, séparées par des virgules :

selecteur
{
font-family : police1, police2, police3 ;
}

Le navigateur tentera d’afficher le texte en utilisant les polices dans l’ordre où elles sont écrites (ici, police1, puis police2, puis police3), en s’arrêtant sur la première qui fonctionnera. Il est conseillé de mettre en dernier l’une des 3 polices du CSS afin que l’affichage de la page se fasse dans tous les cas.

Voici ici une petite liste des polices les plus utilisées et qui fonctionnent sur la majorité des navigateurs :

• Arial ;
• Arial Black ;
• Comic Sans MS ;
• Courier New ;
• Georgia ;
• Impact ;
• Times New Roman ;
• Trebuchet MS ;
• Verdana.

 

Mettre en italique, gras, souligné

Mettre en italique

Afin de mettre en italique en CSS, on utilise la propriété font-style qui peut prendre 3 valeurs :

• italic : le texte sera mis en italique
• oblique : le texte sera placé en oblique (moins prononcé que l’italique)
• normal : valeur par défaut, qui permet d’annuler un texte mis en italique par les balises <em> par exemple.

Mettre en gras

La propriété pour mettre du texte en gras en CSS est font-weigth. Celle-ci ne peut prendre que deux valeurs :

• bold : le texte sera en gras
• normal : le texte sera donc écrit normalement, c’est la valeur par défaut.

Souligement et autre

Pour souligner un texte ou lui appliquer une décoration particulière, on se servira de la propriété text-decoration. Voici les différentes valeurs qu’elle peut prendre :

• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
• none : normal (par défaut).

 

 

L’alignement

En CSS nous avons la possibilité de faire tous les alignements les plus connus de façon très simple. Par conséquent, il suffit d’utiliser la propriété text-align et d’y attribuer la valeur souhaitée :

• left : le texte sera aligné à gauche (c’est le réglage par défaut) ;
• center : le texte sera centré ;
• right : le texte sera aligné à droite ;
• justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu’il prenne toute la largeur possible afin de ne pas laisser d’espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

 

À retenir

Afin que votre page soit adaptée au maximum de support, il est nécessaire de mettre une taille relative à votre texte. L’unité que je vous recommande d’utiliser est donc le em.
Les différentes propriétés à connaître pour commencer à mettre en forme le texte en CSS sont :

• font-size : taille du texte
• font-family : police du texte
• font-style : italique
• font-weight : gras
• font-align : alignement du texte.

N’hésitez pas à me laisser un commentaire et à liker la page si ce cours vous a plu, JB !