Chargement...

Texte en CSS

Vous avez dimensionné des boîtes et contrôlé l’overflow. Formez maintenant les mots eux-mêmes. Les propriétés de texte CSS gèrent l’alignement, le soulignement, la casse, l’espacement et la hauteur de ligne — sans encore changer la famille de police (leçon suivante).

Outils texte du quotidien

📊 Propriétés de texte courantes

Propriété Rôle au quotidien
text-align Aligne le texte dans sa ligne : left, right, center, justify
text-decoration Ajoute ou retire soulignement, surlignage ou barré
text-transform Change la casse : uppercase, lowercase, capitalize
line-height Définit la hauteur de chaque ligne — clé pour des paragraphes lisibles
letter-spacing Ajuste l’espace entre les lettres

Aligner le texte

text-align place le texte sur l’axe horizontal de son bloc conteneur.

Centrer un titre

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Décoration — soulignement et compagnie

text-decoration dessine des lignes sur le texte. Les liens sont souvent soulignés ; retirez cela avec none, ou ajoutez underline / line-through si le design le demande.

Exemples de décoration

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Transformer la casse

text-transform change l’apparence des lettres sans réécrire le texte HTML.

Transformations de casse

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Hauteur de ligne pour des paragraphes lisibles

line-height contrôle le rythme vertical des lignes. Des valeurs sans unité comme 1.5 suivent la taille de police et sont un choix calme pour le corps de texte.

Hauteur de ligne confortable

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Espacement des lettres — main légère

Un peu de letter-spacing peut aérer un titre court. Gardez les paragraphes de corps surtout naturels sauf besoin réel du design.

Titre avec tracking léger

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

À vous d’essayer

  1. Centrez un h1 avec text-align: center.
  2. Retirez le soulignement d’un lien avec text-decoration: none ; optionnellement le remettre au survol.
  3. Mettez un petit label en majuscules avec text-transform: uppercase.
  4. Réglez le line-height du paragraphe à 1.6 et comparez avec 1.2.
  5. Donnez un petit letter-spacing à un titre — puis vérifiez qu’il reste lisible.

Erreurs fréquentes

  • Utiliser text-align: center en espérant centrer tout le layout de bloc (c’est du layout, pas seulement du texte)
  • Laisser tous les liens soulignés quand le design veut des liens discrets — ou retirer le soulignement sans autre indice
  • Faire ici le travail font-family / font-size (leçon Fonts)
  • Gros letter-spacing sur de longs paragraphes (difficile à lire)
  • Confondre les outils d’ellipse d’overflow de texte avec ces bases (plus tard)

Résumé

  • text-align aligne le texte à gauche, à droite, au centre ou en justify
  • text-decoration ajoute ou retire soulignements et lignes similaires
  • text-transform change la casse sans éditer le HTML
  • line-height façonne la lisibilité du paragraphe
  • Un léger letter-spacing peut peaufiner de courts titres
  • Les polices viennent ensuite ; cette leçon reste sur l’assise et la lecture du texte

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 26 de 35
Css Tutoriel