DEVENIR-WEBMASTER.COM Log In
 9
close

Styler du Texte en CSS ou mettre en valeur du Texte en HTML ?

Visiter ma chaine Youtube

# Quelle est la différence ? close

Styler du texte en CSS est une affaire de rendu visuel. Par exemple vous mettez du texte en rouge. Ce texte aura probablement de l'importance pour vos visiteurs qui verront que votre texte est en rouge mais les moteurs de recherche eux ne verront rien.

Mettre en valeur du texte en HTML donne de l'importance à une partie du document mais cette importance est vue par tous vos visiteurs (Moteurs de recherche et synthétiseurs vocaux y compris).

# Quelles sont les propriétés CSS qui permettent de styler du texte ? close

Pour styler du Texte en CSS on a essentiellement :

  1. la propriété font-family qui permet de choisir la police de caractères.
  2. la propriété color qui permet de choisir la couleur du texte.
  3. la propriété font-size qui permet de choisir la taille du texte.
  4. la propriété font-style qui permet de mettre un texte en italique.
  5. la propriété font-weight qui permet de mettre un texte en gras.

Quels sont les éléments HTML qui permettent de mettre en valeur du texte ?

  1. l'élément em.
  2. l'élément strong.

On va étudier l'ensemble de ces éléments et on va surtout s'attacher à bien faire la différence entre ce qui relève du rendu et ce qui relève de la sémantique.

# Styler du texte avec font-style close

Ici je vais styler une portion de texte avec un font-style:italic et une autre avec font-style:oblique. On va constater que le rendu est le même ici.

Italic Oblique c'est la même chose

On peut mettre un font-style:normal. A quoi ça sert puisque par défaut le font-style est déjà normal. Alors pour voir ça on va créer une situation où un élément reçoit en héritage une propriété font-style:italic. On montre ici que l'on peut 'masquer' cet héritage avec une font-style:normal.

Le Font style normal

# Mettre en valeur du texte avec em close

Je vais mettre en valeur du texte en utilisant d'une part l'élément HTML em et d'autre part la propriété CSS font-style:italic. On regarde ce que ça donne ici. On constate que c'est le même rendu. Et pour cause...

Le rendu du em HTML

Le navigateur a positionné un font-style:italic lorsqu'il a rencontré l'élément em. On peut même dire que le navigateur a interprété la sémantique du em pour la traduire par un rendu en italique.

A nous de comprendre que ce n'est pas la même chose. Remarquer bien que les internautes ne peuvent pas faire la différence entre un font-style:italic et un élément HTML em. A qui d'autre ça peut servir ? Et bien aux bots des moteurs de recherche et aussi aux synthétiseurs vocaux qui écoutent votre site.

# Styler du texte avec font-weight close

Les différentes valeurs du font-weight qui nous intéressent sont le bold et le normal.

Il y a une autre manière de le faire c'est d'utiliser des chiffres. On met font-weight:400 pour le normal et font-weight:700 pour le bold.

On vérifie que bold et 700 c'est la même chose ici.

Bold 700 c'est la même chose

On vérifie que l'héritage du bold est masqué par le normal ici.

Le Font weight normal

# Mettre en valeur du texte avec strong close

Je vais mettre en valeur du texte en utilisant d'une part l'élément HTML strong et d'autre part la propriété CSS font-weight:bold. On regarde ce que ça donne ici.

Le rendu du strong HTML

On constate que c'est le même rendu.

Le navigateur a positionné un font-weight:bold lorsqu'il a rencontré l'élément strong.

On fait les mêmes remarques que dans le cas précédent.

# Utiliser le font-size close

On va voir deux manières d'utiliser le font-size. Une première en donnant une valeur fixe en pixels. Une deuxième en donnant une valeur relative en em. Attention il ne s'agit pas ici de l'élément em HTML qu'on a vu au dessus.

Je vais vous demander d'aller sur ce site et de vérifier que votre taille de police est bien de 16 pixels. Vous voyez ça au niveau du Root Font Size.

Font size en em

Si c'est le cas vous continuez sinon vous utilisez la procédure ci-dessous pour personnaliser la taille de police à moyenne.

Maintenant on fait un test ici pour comparer les deux. Pour le moment c'est le même rendu.

Je vais dans la personnalisation Google Chrome et je choisis paramètres. Je positionne la taille de police à "très grande".

Ce que l'on doit constater c'est que la police en em suit le changement de taille de la police par défaut du navigateur. C'est l'intérêt d'utiliser des em. Votre rendu va s'adapter à la configuration de chaque visiteur.

Ceci dit les em ont un inconvénient. Regardez ici ce code. En fait un em est un coefficient appliqué par rapport à la taille du parent. Donc ici un premier coefficient de 0.75 est appliqué au niveau du body puis un deuxième 0.75 est appliqué au niveau du div. Soit 0.5625 sur le deuxième paragraphe. Il y a donc un effet de cascade qui pourrait vous gêner.

Les em en cascade

Dans ce cas la solution est d'utiliser un rem qui appliquera un seul coefficient par rapport à la taille de la police racine. Vous avez ici le même code avec des rem.

Les em en cascade