Apprends à styliser le texte avec CSS en utilisant les propriétés de police, l'alignement du texte, la décoration, la transformation et l'espacement pour créer du contenu lisible et bien conçu.
CSS fournit plusieurs propriétés pour contrôler le rendu du texte :
font-family — Définit la police de caractères. Tu peux spécifier une liste de polices comme pile de secours : font-family: "Helvetica Neue", Arial, sans-serif;. Le navigateur utilise la première police disponible.
font-size — Contrôle la taille du texte. Les unités courantes incluent px (pixels), em (relatif au parent), et rem (relatif à l'élément racine).
font-weight — Définit le degré de gras du texte. Les valeurs courantes sont normal (400), bold (700), ou des valeurs numériques de 100 à 900.
line-height — Contrôle l'espacement entre les lignes de texte. Une valeur sans unité comme 1.6 signifie 1,6 fois la taille de police, ce qui est un choix courant pour la lisibilité du texte de corps.
<style>
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.uppercase {
text-transform: uppercase;
letter-spacing: 4px;
}
.decorated {
text-decoration: underline;
text-decoration-color: tomato;
}
</style>
<h1>Typography Matters</h1>
<p>Good typography improves readability and creates
visual hierarchy on the page.</p>
<p class="uppercase">This text is uppercase</p>
<p class="decorated">This text is underlined in red</p>Au-delà des propriétés de police, CSS offre des moyens supplémentaires pour styliser le texte :
text-align — Aligne le texte dans son conteneur : left, right, center, ou justify.
text-decoration — Ajoute ou supprime des lignes sur le texte : underline, overline, line-through, ou none. Couramment utilisé pour supprimer le soulignement par défaut sur les liens : a { text-decoration: none; }.
text-transform — Change la capitalisation : uppercase, lowercase, ou capitalize (première lettre de chaque mot).
letter-spacing — Ajuste l'espace entre les caractères. Utile pour les titres et le texte en majuscules. Les valeurs positives augmentent l'espacement, les valeurs négatives le resserrent.
word-spacing — Ajuste l'espace entre les mots, similaire à letter-spacing mais au niveau des mots.
Combiner ces propriétés de manière réfléchie crée une hiérarchie visuelle claire qui guide les lecteurs à travers ton contenu.
Que fait la propriété CSS text-transform: capitalize; ?