CSS : mettre en forme le texte

Construire une fiche de formation lisible sur ordinateur et téléphone, en séparant la structure HTML de sa présentation.

Chapitre rédigé pour compléter cette ancienne adresse. Les exemples et exercices ci-dessous sont originaux.

1. Lire avant de décorer

Un titre annonce la section ; un paragraphe développe une idée. Les éléments HTML restent sémantiques, même si CSS change leur apparence. Limitez la largeur des longues lignes, laissez un interligne confortable et conservez des liens reconnaissables.

<article class="fiche">
  <h1>Formation NKILItech</h1>
  <p>Apprendre, pratiquer et expliquer ses choix.</p>
  <a href="programme.html">Consulter le programme</a>
</article>

2. Une feuille de style complète

.fiche {
  max-width: 65ch;
  margin-inline: auto;
  padding: 1rem;
  color: #16222e;
  background: #fff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
.fiche h1 { line-height: 1.2; font-size: 2rem; }
.fiche a { color: #174c8b; text-decoration: underline; }
.fiche a:focus-visible { outline: 3px solid #e2571e; }
.fiche pre { white-space: pre-wrap; }

text-align: start suit le sens d’écriture. L’alignement du texte à l’intérieur d’un bloc ne centre pas le bloc lui-même : ici, ce sont les marges qui s’en chargent. La largeur en ch donne un repère de lecture, pas une garantie du nombre exact de caractères sur chaque ligne.

3. Observer les différences

Schéma pédagogique original PandaCodeur.

Comparez white-space: normal, qui réunit les espaces, avec pre-wrap, qui conserve les sauts de ligne tout en autorisant le retour automatique. Essayez un identifiant très long : overflow-wrap évite qu’il impose la largeur de toute la page. Évitez de justifier un petit paragraphe étroit si cela crée de grands espaces entre les mots.