W3docs
fr
Se connecter

CSS Text

Découvrez les fondamentaux du style de texte en CSS : couleur, alignement, décoration, transformation et bien plus. Avec des exemples.

CSS vous offre un contrôle précis sur l'apparence du texte. Cette page présente les principales propriétés de texte que vous utiliserez le plus souvent — ce que chacune fait, les valeurs qu'elle accepte et un exemple exécutable minimal pour chacune. Chaque propriété renvoie vers son propre chapitre dédié pour approfondir le sujet.

Couleur du texte

La propriété color définit la couleur du texte d'un élément (et, par défaut, de ses décorations de texte comme les soulignements). Vous pouvez spécifier la valeur sous la forme d'un mot-clé de couleur (red), d'une valeur HEX (#ff0000), d'une valeur rgb() / rgba() (rgb(255 0 0)), ou d'une valeur hsl(). Puisque color est héritée, la définir sur un conteneur l'applique à tout le texte descendant, sauf si un élément enfant la remplace.

Exemple d'utilisation de la propriété CSS color :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>
Essayez vous-même »

Résultat

Couleur du texte

Alignement du texte

La propriété d'alignement est utilisée pour aligner le texte à l'intérieur d'un élément à gauche, à droite, au centre, etc.

L'alignement du texte possède quatre valeurs :

  • Gauche (text-align: left) - aligne le texte à gauche
  • Droite (text-align: right) - aligne le texte à droite
  • Centre (text-align: center) - place le texte au centre de la page
  • Justifié (text-align: justify) - étire la ligne de texte pour aligner les bords gauche et droit (comme dans les magazines et les journaux)

Par défaut, les navigateurs alignent le texte au début de la ligne — à gauche pour les langues s'écrivant de gauche à droite comme le français. Utilisez la valeur correspondante lorsque vous avez besoin d'un alignement différent. Pour un alignement tenant compte de la direction de la langue, préférez les mots-clés logiques start et end plutôt que left et right.

Exemple d'utilisation de la propriété CSS text-align :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
Essayez vous-même »

Décoration du texte

La propriété text-decoration ajoute des lignes au texte. En CSS moderne, c'est un raccourci pour CSS text-decoration-line, CSS text-decoration-color et CSS text-decoration-style. Les valeurs les plus courantes pour la partie text-decoration-line sont :

  • Surlignage (text-decoration: overline) - trace une ligne au-dessus du texte
  • Soulignement (text-decoration: underline) - trace une ligne sous le texte
  • Texte barré (text-decoration: line-through) - trace une ligne au milieu du texte
  • Aucune (text-decoration: none) - supprime toute décoration ; c'est ce que vous utilisez pour retirer le soulignement par défaut des liens

Exemple d'utilisation de la propriété CSS text-decoration :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>
Essayez vous-même »

Résultat

Décoration du texte

Transformation du texte

La propriété de transformation est utilisée pour contrôler la capitalisation du texte. Cela signifie que vous pouvez mettre votre texte en majuscules, en minuscules ou en casse de titre.

La propriété de transformation possède les valeurs suivantes :

  • Majuscules (text-transform: uppercase) - convertit tous les caractères en majuscules
  • Minuscules (text-transform: lowercase) - convertit tous les caractères en minuscules
  • Capitalisation (text-transform: capitalize) - convertit le premier caractère de chaque mot en majuscule
  • Aucune (text-transform: none) - laisse le texte tel que saisi ; c'est la valeur par défaut

Gardez à l'esprit que text-transform modifie uniquement la façon dont le texte est affiché — le contenu HTML sous-jacent reste exactement tel que vous l'avez écrit, ce qui est important pour le copier-coller et l'accessibilité.

Exemple d'utilisation de la propriété CSS text-transform :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>
Essayez vous-même »

Résultat

Transformation du texte

Ombre du texte

La propriété text-shadow ajoute une ou plusieurs ombres au texte. Chaque ombre est décrite par jusqu'à quatre valeurs, dans cet ordre :

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow (obligatoire) - décalage horizontal ; une valeur positive déplace l'ombre vers la droite, une valeur négative vers la gauche.
  • v-shadow (obligatoire) - décalage vertical ; une valeur positive déplace l'ombre vers le bas, une valeur négative vers le haut.
  • blur-radius (facultatif) - la douceur de l'ombre ; des valeurs plus grandes la rendent plus floue (par défaut 0).
  • color (facultatif) - la couleur de l'ombre ; si elle est omise, le navigateur utilise la color de l'élément.

Vous pouvez empiler plusieurs ombres en les séparant par des virgules, ce qui permet de créer des effets de lueur et de contour.

Exemple d'utilisation de la propriété CSS text-shadow :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Consultez le chapitre CSS text-shadow pour plus d'exemples.

Indentation du texte

La propriété d'indentation du texte est utilisée pour spécifier la longueur de l'espace vide de la première ligne dans un bloc de texte. Les valeurs suivantes sont valides pour cette propriété :

  • Longueur, qui spécifie l'indentation en px, pt, cm, em, etc. La valeur par défaut est 0. Les valeurs négatives sont autorisées.
  • Pourcentage, qui spécifie l'indentation en pourcentage de la largeur du bloc conteneur.
  • Each-line, lorsque l'indentation affecte la première ligne ainsi que chaque ligne après un saut de ligne forcé, mais ne concerne pas les lignes après un retour à la ligne automatique.
  • Hanging, qui inverse les lignes indentées. La première ligne n'est pas indentée.
  • Initial, qui fait que la propriété utilise sa valeur par défaut.
  • Inherit, qui hérite la propriété de l'élément parent.

Exemple d'utilisation de la propriété CSS text-indent :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Essayez vous-même »

Espacement des lettres

La propriété CSS letter-spacing permet de définir les espaces entre les lettres/caractères dans un texte. Les valeurs suivantes sont prises en charge par cette propriété :

  • Normal, ce qui signifie qu'il n'y aura pas d'espace supplémentaire entre les caractères. C'est la valeur par défaut de cette propriété.
  • Longueur, qui définit un espace supplémentaire entre les caractères. Les valeurs négatives sont autorisées.
  • Initial, qui fait que la propriété utilise sa valeur par défaut.
  • Inherit, qui hérite la propriété de l'élément parent.

Exemple d'utilisation de la propriété CSS letter-spacing :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>
Essayez vous-même »

Hauteur de ligne

La propriété line-height définit la hauteur de ligne. Elle est utilisée pour définir l'interlignage des lignes d'un texte. Si la valeur de line-height est supérieure à la valeur de font-size d'un élément, la différence constituera l'interlignage du texte. Voici les valeurs prises en charge par cette propriété :

  • Normal, qui définit une hauteur de ligne normale. C'est la valeur par défaut de cette propriété.
  • Longueur, qui définit une hauteur de ligne fixe en px, cm, etc.
  • Nombre, qui définit un nombre multiplié par la taille de police actuelle pour définir la hauteur de ligne.
  • %, qui définit une hauteur de ligne en pourcentage de la taille de police actuelle.
  • Initial, qui fait que la propriété utilise sa valeur par défaut.
  • Inherit, qui hérite la propriété de l'élément parent.

Une valeur number sans unité (par exemple line-height: 1.5) est généralement le choix le plus sûr, car elle s'adapte à la taille de police propre à chaque élément et évite les surprises liées à l'héritage.

Exemple d'utilisation de la propriété CSS line-height :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>
Essayez vous-même »

Espacement des mots

Grâce à la propriété CSS word-spacing, nous pouvons modifier l'espace entre les mots dans un texte, et non les caractères individuels. Elle prend en charge les valeurs suivantes :

  • Normal, qui spécifie un espacement normal des mots. C'est la valeur par défaut de cette propriété.
  • Longueur, qui spécifie un espacement supplémentaire entre les mots. Peut être spécifiée en px, pt, cm, em, etc. Les valeurs négatives sont valides.
  • Initial, qui fait que la propriété utilise sa valeur par défaut.
  • Inherit, qui hérite la propriété de l'élément parent.

Exemple d'utilisation de la propriété CSS word-spacing :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique
Laquelle des propriétés suivantes peut être utilisée pour contrôler l'apparence du texte en CSS ?
Laquelle des propriétés suivantes peut être utilisée pour contrôler l'apparence du texte en CSS ?
Was this page helpful?