mardi, octobre 8

Mettre du texte en gras avec le CSS

1819

En HTML, il est très facile de mettre du texte en gras, et il y a plusieurs balises à connaitre si vous cherchez des options supplémentaires. Ainsi celui-ci permet d’accéder au CSS qui n’en demeure une propriété intéressante. Quelles seraient les étapes pour mettre les textes en gras avec le CSS ? Plus d’informations dans cet article.

Le CSS

Alors, là encore, n’oubliez pas que ce n’est pas <strong> qui permet de mettre en gras. Son rôle est d’indiquer que le texte est important, donc le navigateur l’affiche généralement en gras. La mise en gras en CSS peut par exemple s’appliquer aux titres, à certains paragraphes entiers, etc. C’est à vous de voir.

A voir aussi : Comment naviguer image par image avec VLC Media Player

La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :

  • Bold : le texte sera en gras ;
  • Normal : le texte sera écrit normalement (par défaut).

Le CSS est une façon plus puissante et plus cohérente de mettre en forme votre page web. Cela en fait le moyen idéal pour définir l’aspect de votre page, tandis que le HTML est conçu pour définir le sens de votre page. C’est tout à fait normal d’utiliser des balises HTML lorsque vous voulez mettre en valeur du texte important, mais le CSS vous donnera plus de contrôle sur l’aspect visuel de votre texte en gras. Si vous ne connaissez pas encore le CSS, utiliser du « CSS en ligne » est une bonne façon de débuter.

A lire aussi : Apex Legends, le rival de Fortnite créé par EA, attire 10 millions de joueurs en trois jours

Alors que vous pouvez l’utiliser pour modifier des balises telles que <p> ou <h1>, parfois vous voudrez modifier du texte qui ne se trouve pas déjà entre des balises [4] . Dans ce cas, placez le texte entre des balises <span></span>. Elles n’auront aucun effet par elles-mêmes, mais cela nous donnera quelque chose avec quoi travailler. Les attributs en HTML sont écrits directement dans la balise, à l’intérieur des crochets < >. L’attribut « style » est nécessaire pour insérer du CSS dans la balise HTML, donc nous allons insérer style= dans la balise « span ».

Étape 1

<strong>Utilisez la balise strong</strong>. En HTML5, la norme privilégiée, la balise « strong » est la balise recommandée pour du texte important. Elle presque toujours affichée en gras dans les navigateurs.

Placez le texte que vous voulez mettre en gras entre ces balises : <strong>texte en gras ici</strong>.

Étape 2

Utilisez des balises de titre à la place lorsque c’est approprié. Les « Titres » sont généralement placés en haut de la page web ou au début d’une nouvelle section. Habituellement, les titres sont affichés en gras et sont plus grands que la police ordinaire, mais cela peut varier. Il y a six balises de titre différentes, depuis <h1> à <h6>. Suivez ces directives lorsque vous les utiliserez :

La balise h1, écrite <h1>Votre titre ici</h1> est le titre le plus important, en général c’est le texte le plus grand en haut de la page.

<h2>La balise h2 </h2> est pour le second titre le plus important, et ainsi de suite jusqu’à <h6>h6, le plus petit </h6>.

Utilisez-les avec parcimonie, seulement pour organiser votre page [1]. Les utilisateurs devraient être en mesure de parcourir rapidement les titres et de trouver le sujet qu’ils cherchent.

À l’heure de créer des sous-titres, descendez seulement d’un niveau à la fois. Autrement dit, ne sautez pas de <h1> à <h3>. Cela aide la page HTML à préserver son formatage lorsqu’elle est transférée à un autre format [2].

Étape 3

<b>Utilisez la balise « b » en dernier recours</b>. La balise <b> est toujours prise en charge en HTML5, mais <strong> est préféré dans la plupart des situations. Utilisez la balise <b> uniquement lorsque le texte devrait être en caractères gras pour des raisons de style, pas pour le mettre en valeur. Par exemple, des mots-clés ou des mots de vocabulaire dans un passage, ou les noms de produit dans une revue [3] .

Comme avec la plupart des balises, <b> place le texte concerné entre une balise de début et une balise de fin </b>.