Mettre en forme votre texte avec CSS 3

Dans la partie précédente, vous avez appris à mettre en forme votre texte avec les balises HTML 5. Maintenant, vous allez pouvoir mettre en forme directement votre bloc de texte grâce à des balises CSS3.

Il est très important que votre code HTML et CSS soit lisible. Nous vous conseillons d’utiliser des feuilles de style, dans le code de la page HTML. Ou mieux, quand vous aurez des longues feuilles de styles avec énormément d’indications graphiques, utilisez des fichiers CSS à par.

Des fichiers .css qui vont contenir la mise en forme à la fois de votre texte, de votre site internet et de votre page Web.

Vous aurez, en gros, sur un site Internet imposant et complexe plusieurs fichiers CSS : un fichier CSS d’en-tête, un fichier CSS pour les catégories et un autre pour le corps de la page. Et cette organisation va vous permettre de retrouver très facilement, très rapidement le code source concerné. Il devient très facile de modifier les mises en forme, d’ajouter les modifications nécessaires au niveau graphique CSS.

Commençons tout de suite avec les premières balises…

Texte en gras

Pour mettre un texte en gras grâce au CSS, c’est vraiment très simple, utilisez la balise font-weight: bold.

Exemple :

<style type="text/css">
span { font-weight: bold; }
</style>

Remarquez l’utilisation de la balise style : vous attribuez à la balise HTML style font-weight: bold ;

Tout le texte qui sera dans une balise span dans la page HTML sera écrit en gras. C’est une autre façon de mettre le texte en gras. L’avantage de mettre votre texte en gras de cette façon, c’est que dans votre balise span, vous pouvez mettre également la couleur du texte, la taille du texte, etc. C’est l’intérêt d’utiliser les balises CSS, justement.

Dans les exemples suivants, la balise style ne sera plus précisée, mais vous devrez toutefois l’ajouter dans votre page HTML.

Texte en italique

Idem pour le mettre en italique, utilisez font-style: italic.

Exemple pour votre CSS :

.txtItalique { font-style: italic; }

Puis pour le contenu HTML :

<div class="txtItalique">HTML5</div> sur la première ligne

Même principe de fonctionnement, vous définissez une balise CSS txtItalique font-style: italic, puis vous spécifiez dans une balise HTML – par exemple span ou div – l’utilisation d’une classe txtItalique. Alors “HTML5” est écrit en italique, et le texte “sur la première ligne” avec une écriture normale.

Quand vous utilisez la balise div seule, votre texte ne sera pas en italique, mais si vous spécifiez la classe txtItalique, alors votre texte sera en italique. C’est le grand intérêt des classes CSS définies, vous pouvez mettre la classe txtItalique sur tout type de balises comme une balise div, span, p (paragraphe), dès que vous en avez besoin.

La taille du texte

La balise font-size, avec une valeur en pixels ou en EM, vous permet de modifier la taille du texte.

Exemple :

Dans le CSS :

#title { font-size: 32px; }

Dans la page HTML :

<div id="title">HTML5 32 pixels sur la première ligne !</div>

font-size: 32px modifie la balise div, identifiée par l’id title. Tout à l’heure, nous vous avons montré en utilisant une classe, txtItalique. Là, vous allez utiliser un identifiant – il n’y aura qu’une seule balise avec un identifiant title -, donc un seul titre dans votre page HTML, qui aura une taille 32.

Utilisez les classes CSS, utilisez un identifiant CSS, là c’est #title (le dièse pour un identifiant), .txtItalic pour une classe (avec un point comme préfixe), vous avez déjà de quoi faire avec les exercices sur CSS.

La couleur du texte

Ensuite, vous pouvez définir, bien évidemment, la couleur de votre texte avec du CSS. Vous pouvez mettre un code couleur HTML, un code couleur en hexadécimal ou en RGB. Vous avez plusieurs choix, avec une écriture en abréviation, de votre code couleur. C’est ce que vous avez appris dans un de nos premiers articles, sur les bases de CSS3.

Exemple :

h1 { color: #336699; }

Pour mettre toutes les balises H1 en couleur, vous faites H1 dans votre feuille de style color. Et à chaque fois que vous mettez une balise H1 dans votre texte, dans votre page HTML, elle sera de la couleur que vous avez définie. Bien évidemment, vous pouvez cumuler, dans la balise H1, plusieurs indications CSS, comme font-size, font-weight, italic, etc.

Aligner du texte

Pour définir l’alignement du texte, vous allez utiliser la balise text-align: center.

Exemple :

#txtCentre { text-align: center; }

Cette balise va centrer le texte de la balise div identifiée par un id txtCentre. Remarquez le code source de la feuille de style, c’est #txtCentre, cela cible une balise qui contient l’id txtCentre.Vous mettez text-align: center et vous avez les valeurs left, right, justify pour l’alignement de votre texte.

Texte souligné

Vous pouvez effectuer la mise en forme pour du texte souligné avec la balise text-decoration: underline. Rappelez-vous les liens dans les pages HTML ils sont souvent soulignés. Vous pouvez effectuer la même mise en forme pour des titres, des parties de textes que vous voulez mettre en valeur, avec text-decoration: underline.

Exemple :

#txtSouligne { text-decoration: underline; }

Vous utilisez un identifiant dans la feuille de style, avec text-décoration: underline. La balise div qui utilise l’identifiant txtSouligne dans la page HTML sera soulignée.

Vous pouvez modifier l’affichage du texte avec text-decoration. C’est une propriété qui vous permet de choisir le style affichage de votre texte.

Dans l’exemple, vous apercevez underline, cette valeur CSS va souligner le texte, c’est très utilisé pour les liens.

Vous avez également overline, qui va surligner le texte.

line-through va carrément barrer le texte et none enlève toutes apparences prédéfinies.

C’est comme ça que vous pourrez créer des liens qui ne sont pas soulignés dans une page html par exemple.

Vous pouvez cumuler plusieurs décorations, comme dans l’exemple ci-dessous :

.txt30 { text-decoration: underline overline;}

Ce sont des exemples de code source très basiques pour que vous compreniez directement à la fois comment utiliser les classes CSS, et text-decoration. Si vous souhaitez enlever le lien, la barre qu’il y a sous les liens, donc les liens soulignés, vous pouvez le faire très facilement avec text-decoration: none.

Conclusion

Dans cet article, vous avez donc découvert les premières balises essentielles pour mettre en forme votre texte CSS : en gras, en italique, souligné, en couleur, etc.