Chapitre 15 | Propriétés CSS pour le style des textes

Exemple de Propriétés CSS pour le style des textes

Alignement du texte : text-align

La propriété text-align permet de définir l’alignement du texte à l’intérieur de son conteneur.
Les options disponibles sont :

• left : alignement à gauche (valeur par défaut) ;
• center : texte centré horizontalement ;
• right : alignement à droite ;
• justify : texte justifié, avec un espacement des mots ajusté pour remplir toute la largeur.

Exemple :

HTML :

<div class="exemple1">Texte aligné à gauche.</div>
<div class="exemple2">Texte centré.</div>
<div class="exemple3">Texte aligné à droite.</div>
<div class="exemple4">Texte justifié.</div>

CSS :

.exemple1 {
  text-align: left;
}

.exemple2 {
  text-align: center;
}

.exemple3 {
  text-align: right;
}

.exemple4 {
  text-align: justify;
}

Exercice :

1. Reproduisez l’exemple ci-dessus en créant quatre paragraphes.
2. Changez les noms des classes dans le code HTML et CSS (par exemple : texte1, texte2, etc.).
3. Vérifiez que les styles fonctionnent toujours correctement.

Transformation de texte : text-transform

La propriété text-transform contrôle la casse d’un texte, c’est-à-dire son affichage en majuscules, minuscules ou capitales.
Les options disponibles sont :

• none : aucune transformation (par défaut) ;
• lowercase : tout en minuscules ;
• uppercase : tout en majuscules ;
• capitalize : première lettre de chaque mot en majuscule.

Exemple :

HTML :

<p class="exemple5">ce texte sera tout en majuscules.</p>
<p class="exemple6">chaque mot commence par une majuscule.</p>
<p class="exemple7">CE TEXTE SERA TOUT EN MINUSCULES.</p>

CSS :

.exemple5 {
  text-transform: uppercase;
}

.exemple6 {
  text-transform: capitalize;
}

.exemple7 {
  text-transform: lowercase;
}

Exercice :

1. Écrivez trois paragraphes : un pour chaque style (uppercase, capitalize, lowercase).
2. Changez les textes pour voir l’impact des transformations.
3. Modifiez les noms de classes dans votre HTML et CSS pour vérifier leur indépendance.

Décoration de texte : text-decoration

La propriété text-decoration ajoute des styles décoratifs au texte, comme des soulignements ou des surlignements. Elle accepte plusieurs options :

• underline : texte souligné ;
• overline : texte surligné au-dessus ;
• line-through : texte barré ;
• combine : plusieurs décorations, par exemple underline overline.

Exemple :

HTML :

<p class="exemple8">Soulignement simple.</p>
<p class="exemple9">Texte barré.</p>
<p class="exemple10">Soulignement et surlignement.</p>
<p class="exemple11">Soulignement en pointillés rouge.</p>

CSS :

.exemple8 {
  text-decoration: underline;
}

.exemple9 {
  text-decoration: line-through;
}

.exemple10 {
  text-decoration: underline overline;
}

.exemple11 {
  text-decoration: underline dotted red;
}

Exercice :

1. Écrivez un paragraphe avec un style souligné.
2. Ajoutez un second paragraphe avec un style barré.
3. Modifiez les décorations (par exemple : couleur, style) pour expérimenter.

Espacement des textes : line-height, letter-spacing, word-spacing

1. Hauteur de ligne : line-height
   Permet de régler la hauteur des lignes dans un paragraphe, augmentant ou réduisant l’espace entre elles.
2. Espacement entre les lettres : letter-spacing
   Définit un espace supplémentaire (positif ou négatif) entre chaque caractère.
3. Espacement entre les mots : word-spacing
   Contrôle l’espace entre les mots.

Exemple :

HTML :

<p class="exemple12">Texte avec hauteur de ligne doublée.</p>
<p class="exemple13">Texte avec espace entre les lettres.</p>
<p class="exemple14">Texte avec espace entre les mots.</p>

CSS :

.exemple12 {
  line-height: 2;
}

.exemple13 {
  letter-spacing: 2px;
}

.exemple14 {
  word-spacing: 10px;
}

Exercice :

1. Expérimentez avec différents paragraphes : changez la hauteur de ligne, l’espacement des lettres et celui des mots.
2. Essayez des valeurs négatives pour letter-spacing et word-spacing et observez le résultat.

Couleur et opacité : color, opacity

1. Couleur
   La propriété color permet de définir la couleur d’un texte. Vous pouvez utiliser des noms de couleurs, des codes hexadécimaux, ou des notations RGB et HSL.
2. Opacité
   La propriété opacity contrôle la transparence d’un texte, avec une valeur entre 0 (transparent) et 1 (opaque).

<p class="exemple15">Texte bleu.</p>
<p class="exemple16">Texte orange foncé.</p>
<p class="exemple17">Texte rouge transparent.</p>
<p class="exemple18">Texte vert semi-transparent.</p>

.exemple15 {
  color: blue;
}

.exemple16 {
  color: #FF5733;
}

.exemple17 {
  color: rgba(255, 0, 0, 0.5);
}

.exemple18 {
  color: hsla(120, 100%, 50%, 0.5);
}

Exercice :

1. Créez plusieurs paragraphes avec des couleurs différentes en utilisant color.
2. Ajoutez des valeurs d’opacité pour expérimenter avec rgba et hsla. (passer0.5 à 0.2 puis 0.7 puis 1)