Cet article explique comment mettre en forme le texte de documents HTML en utilisant les propriétés CSS les plus communes.
| Prérequis : | Vous devez être familier avec les propriétés CSS et comment les utiliser. |
|---|---|
| Objectif : | Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates. |
Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.
Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :
colorfont-family(pour utiliser différentes polices)font-sizefont-weightfont-style(pour, par exemple, mettre en italique)line-heighttext-aligntext-decoration(pour ajouter des lignes dessous, dessus et en travers du texte)text-transform(pour modifier la casse du texte)text-shadow
Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que hyphens, letter-spacing, text-indent, text-overflow, vertical-align, white-space, word-spacing), les sélecteurs spécifiques (::first-letter ou ::first-line), ou les unités CSS utilisées pour la taille du texte (em et rem). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à @font-face.
Pédagogie active
Il n'y a actuellement pas de contenu pour cette section. Vous pouvez néanmoins contribuer.
Aller plus loin
color
La propriété color modifie la couleur du texte en faisant appel à divers systèmes de notation : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour red-green-blue), teinte-saturation-lumière (ou HSL pour hue-saturation-lightness). Vous pouvez aussi utiliser un mot-clé désignant une couleur. Voici un exemple illustrant comment colorer le texte en vert.
Pour commencer, intéressons nous au fragment de code HTML suivant :
<p>Je suis un paragraphe vert.</p>
Maintenant appliquons le style ci-dessous :
p {
color: green; /* C'est vert avec le mot clé "green" */
color: #008000; /* C'est vert avec la notation hexadecimale */
color: rgb(0,128,0); /* C'est vert avec la notation RGB */
color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
}
Astuce de pro : le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.
Voici le résultat :
font-family
La propriété font-family est très utile pour ajouter une touche personnelle à votre site, font-family définit en effet une liste de polices dans lesquelles votre texte peut apparaître.
La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être serif, sans-serif ou monospace. Voici un exemple :
Pour notre prochain exemple, prenons le fragment de code HTML suivant :
<p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="sansserif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Appliquons lui le style suivant :
.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
.serif {
font-family: "Times New Roman", Times, serif;
}
Voici le résultat :
font-size
La propriété font-size ajuste la taille du texte, en utilisant une de ces unités :
px- L'unité
pxdétermine la hauteur en pixels de votre texte. ememspécifie la largeur de la lettre "M" avec la police utilisée. Les ems sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de1.5em,on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue,1emvaut par défaut16px.remremest beaucoup plus facile à utiliser comme unité qu'em car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.ptptest l'abréviation de point, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.
Voici une illustration de la différence entre em et rem, grâce à ce fragment de code HTML :
<div>Je mesure 1rem (par défaut)
<div class="rem">Je mesure 0.8rem.
<div class="rem">Je mesure aussi 0.8rem.
<div class="rem">Ici, je mesure également 0.8rem.</div>
</div>
</div>
</div>
<hr>
<div>Je mesure 1em (par défaut)
<div class="em">Je mesure 0.8em.
<div class="em">Je mesure aussi 0.8em.
<div class="em">Ici, je mesure également 0.8em.</div>
</div>
</div>
</div>
En utilisant le style suivant :
.rem {
font-size: 0.8rem;
}
.em {
font-size: 0.8em
}
Le résultat obtenu est le suivant :
font-weight
La propriété font-weight définit l'épaisseur des caractères, généralement à l'aide des valeurs normal ou bold. Voici un exemple :
.bold {
font-weight: bold;
}
font-style
La propriété font-style détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à normal, italic, et oblique :
.italic {
font-style: italic;
}
line-height
La propriété line-height définit la hauteur de la ligne en utilisant les mêmes unités que la propriété font-size.
.line {
line-height: 80%;
}
Astuce de pro : Vous pouvez appliquer les propriétés font-style, font-weight, font-size, line-height, et font-family à l'aide d'une seule propriété « parente » : font
Les deux exemples suivants afficheront donc exactement la même chose :
body {
font: bold 1em/150% Helvetica, Arial, sans-serif;
}
body {
font-weight: bold;
font-size : 1em;
line-height: 150%;
font-family: Helvetica, Arial, sans-serif;
}
text-transform
La propriété text-transform modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :
.transform {
text-transform: uppercase;
}
text-align
La propriété text-align contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (left, right, center, ou justified) :
.center {
text-align: center;
}
text-decoration
La propriété text-decoration permet de faire apparaitre une ligne en dessous, au dessus, ou à travers de votre texte. La valeur par défaut none supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :
.strike {
text-decoration: line-through;
}
text-shadow
La propriété text-shadow fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :
<p class="simple">COUCOU</p> <p class="double">COUCOU</p> <p class="feu">COUCOU</p>
Si on applique maintenant ces différents styles :
p {
/* basic font setting */
font: bold 3em Impact, sans-serif;
text-align: center;
letter-spacing: 2px
}
.simple {
text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
}
.double {
text-shadow: 2px 2px 0 white,
4px 4px 0 black;
}
.feu {
color: white;
text-shadow: 0 0 2px #fefcc9,
1px -1px 3px #feec85,
-2px -2px 4px #ffae34,
2px -4px 5px #ec760c,
-2px -6px 6px #cd4606,
0 -8px 7px #973716,
1px -9px 8px #451b0e;
}
Voici le résultat final :
Prochaines étapes
Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'utiliser le CSS dans une page web ou à notre tutoriel CSS.