Mettre en forme les textes en CSS

Au cours de ce tutoriel, vous aurez la possibilité d'apprendre à mettre en application toutes les propriétés CSS vous permettant de mettre en forme vos textes. Vous pouvez utiliser la table des matières suivante pour apprendre à utiliser la propriété qui vous intéresse (elles sont classées par ordre alphabétique) :

  1. color : Définit la couleur du texte affiché au premier plan ;
  2. direction : Définit le sens de l'écriture ;
  3. font : Définit la police, la taille, l'inclinaison, la graisse et les petites capitales ;
  4. font-family : Définit la police d'écriture ;
  5. font-size : Définit la taille du texte ;
  6. font-stretch : Définit l'étirement du texte ;
  7. font-style : Définit le style (normal, oblique ou italique) du texte ;
  8. font-variant : Définit les petites capitales du texte ;
  9. font-weight : Définit le gras de la police ;
  10. letter-spacing : Définit l'espacement entre chaque lettre ;
  11. line-height : Définit la hauteur d'une ligne de texte ;
  12. text-align : Définit l'alignement horizontal du texte ;
  13. text-align-last : Définit l'alignement horizontal de la dernière ligne d'un texte ;
  14. text-decoration : Définit les décorations à appliquer au texte ;
  15. text-indent : Définit le retrait de la première ligne du texte ;
  16. text-overflow : Définit la chaîne de caractères qui remplace le texte sortant d'un bloc ;
  17. text-shadow : Définit l'ombrage du texte ;
  18. text-transform : Définit la capitalisation du texte ;
  19. unicode-bidi : Définit le sens de l'écriture pour l'algorithme bidirectionnel Unicode ;
  20. vertical-align : Définit l'alignement vertical du texte ;
  21. white-space : Définit la manière dont le navigateur doit interpréter les espaces blancs ;
  22. word-break : Définit la manière de faire la césure des mots.

Changer la couleur du texte : color

La propriété CSS color vous permet de modifier la couleur d'un texte.

Syntaxe

Propriété color

Propriété color

Description

  • transparent : Couleur transparente ;
  • #EBA716 : Couleur hexadécimale ;
  • orange : Couleur nommée ;
  • rgb(235,167,22) : Couleur en RGB (Red-Green-Blue) dont les valeurs sont comprises entre 0 et 255 ou en pourcentage à l'aide du symbole"%";
  • rgb(235,167,22,0.5) : Couleur en RGB avec transparence, cette valeur est comprise entre 0 (transparent) et 1 (opaque) ;
  • hsl(33,100%,50%) : Couleur en HSL (Hue-Saturation-Lightness) dont la valeur H est comprise entre 0 et 360, entre 0 et 100% pour les valeurs S et L ;
  • hsl(33,100%,50%,0.5) : Couleur en HSL avec transparence, cette valeur est comprise entre 0 (transparent) et 1 (opaque) ;
  • inherit : Couleur héritée de la propriété "color" de son parent.

Retourner en haut de page

Gérer le sens de l'écriture : direction

La propriété CSS direction permet de modifier la direction de l'écriture.

Syntaxe

Propriété direction

Propriété direction

Description

  • ltr : Affiche votre texte de droite à gauche (ltr pour left-to-right) ;
  • rtl : Affiche votre texte de gauche à droite (rtl pour right-to-left), c'est la valeur par défaut ;
  • inherit : Sens d'écriture hérité de la propriété "direction" de son parent.

Retourner en haut de page

Modifier taille, hauteur de ligne, graisse, inclinaison, police et petites capitales en une seule propriété : font

La propriété CSS font est une propriété combinant font-style, font-variant, font-weight, font-size/line-height et font-family (à écrire dans cet ordre).

Syntaxe

Propriété font

Propriété font

Description

  • italic bold 16px Helvetica : Affiche votre texte en italique (font-style: italic;), en gras (font-weight: bold;), de taille 16 pixels (font-size: 16px;) et en utilisant la police Helvetica (font-family: Helvetica;) ;
  • small-caps Arial : Affiche votre texte en petites capitales (font-variant: small-caps;) et en utilisant la police Arial (font-family: Arial;) ;
  • caption : Utilise la police du navigateur mise en place pour les boutons ;
  • icon : Utilise la police du navigateur mise en place pour les icônes ;
  • menu : Utilise la police du navigateur mise en place pour les menus ;
  • message-box : Utilise la police du navigateur mise en place pour les boîtes de dialogue ;
  • small-caption : Utilise une version plus petite de la police du navigateur mise en place pour les boutons ;
  • status-bar : Utilise la police du navigateur mise en place pour les barres de statut;
  • inherit : Style global d'écriture hérité de la propriété "font" de son parent.

Retourner en haut de page

Spécifier quelle police utiliser : font-family

La propriété CSS font-family vous permet de paramétrer la police à utiliser pour un texte.

Syntaxe

Propriété font-family

Propriété font-family

Description

  • Helvetica, Arial, sans-serif : Affiche votre texte en Helvetica. Si cette police est indisponible pour l'internaute, affiche en Arial. Si cette police aussi est indisponible, affiche le texte avec une police générique de type sans-serif ;
  • caption : Utilise la police du navigateur mise en place pour les boutons ;
  • icon : Utilise la police du navigateur mise en place pour les icônes ;
  • menu : Utilise la police du navigateur mise en place pour les menus ;
  • message-box : Utilise la police du navigateur mise en place pour les boîtes de dialogue ;
  • small-caption : Utilise une version plus petite de la police du navigateur mise en place pour les boutons ;
  • status-bar : Utilise la police du navigateur mise en place pour les barres de statut;
  • inherit : Police d'écriture héritée de la propriété "font-family" de son parent.

Retourner en haut de page

Spécifier la taille de la police : font-size

La propriété CSS font-size vous permet de modifier la taille du texte.

Syntaxe

Propriété font-size

Propriété font-size

Description

  • 16px : Affiche votre texte avec une taille de 16 pixels ;
  • 2em : Affiche votre texte avec une taille de 2 cadratins, soit 32 pixels : 1em = 16px ;
  • 0.7% : Affiche votre texte avec une taille de 16*0,7/100, soit 0,112 pixels, en gros le texte devient invisible à l'œil nu ;
  • xx-small : Affiche votre texte avec une taille de 9 pixels ;
  • x-small : Affiche votre texte avec une taille de 10 pixels ;
  • small : Affiche votre texte avec une taille de de 13 pixels ;
  • medium : Affiche votre texte avec une taille de 16 pixels ;
  • large : Affiche votre texte avec une taille de 18 pixels ;
  • x-large : Affiche votre texte avec une taille de 24 pixels ;
  • xx-large : Affiche votre texte avec une taille de 32 pixels ;
  • larger : Affiche votre texte dans une taille plus grande que celle héritée de la propriété "font-size" de son parent ;
  • smaller : Affiche votre texte dans une taille plus petite que celle héritée de la propriété "font-size" de son parent ;
  • inherit : Taille héritée de la propriété "font-size" de son parent.

Retourner en haut de page

Spécifier l'étirement de la police : font-stretch

La propriété CSS font-stretch vous permet de modifier l'élargissement du texte.

Syntaxe

Propriété font-stretch

Propriété font-stretch

Description

  • normal : Affiche votre texte normalement ;
  • wider : Affiche votre texte d'une taille plus large que celle héritée ;
  • narrower : Affiche votre texte d'une taille plus étroite que celle héritée ;
  • ultra-condensed : Affiche votre texte de manière très très condensée ;
  • extra-condensed : Affiche votre texte de manière très condensée ;
  • condensed : Affiche votre texte de manière condensée ;
  • semi-condensed : Affiche votre texte de manière moyennement condensée ;
  • semi-expended : Affiche votre texte de manière moyennement élargie ;
  • expended : Affiche votre texte de manière élargie ;
  • extra-expended : Affiche votre texte de manière très élargie ;
  • ultra-expended : Affiche votre texte de manière très très élargie ;
  • inherit : Elargissement hérité de la propriété "font-stretch" de son parent.

Retourner en haut de page

Spécifier le style de la police : font-style

La propriété CSS font-style vous permet de modifier le style du texte.

Syntaxe

Propriété font-style

Propriété font-style

Description

  • normal : Affiche votre texte normalement ;
  • italic : Affiche votre texte de manière italique ;
  • oblique : Affiche votre texte de manière oblique ;
  • inherit : Style hérité de la propriété "font-style" de son parent.

Retourner en haut de page

Spécifier que le texte soit écrit en petites capitales : font-variant

La propriété CSS font-variant vous permet d'afficher votre texte en petites capitales.

Syntaxe

Propriété font-variant

Propriété font-variant

Description

  • normal : Affiche votre texte normalement ;
  • small-caps : Affiche votre texte en petites capitales ;
  • inherit : Forme héritée de la propriété "font-variant" de son parent.

Retourner en haut de page

Spécifier le type de gras à utiliser : font-weight

La propriété CSS font-weight vous permet d'afficher votre texte en gras.

Syntaxe

Propriété font-weight

Propriété font-weight

Description

  • 900 : Affiche votre texte très gras. En ce qui concerne les valeurs numériques, vous pouvez écrire 100, 200, 300, 400, 500, 600, 700, 800 ou 900 ;
  • normal : Affiche votre texte normalement (équivalent à la valeur numérique 400) ;
  • bold : Affiche votre texte en gras (équivalent à la valeur numérique 700) ;
  • lighter : Affiche votre texte moins gras que la valeur héritée de la propriété "font-weight" de son parent ;
  • bolder : Affiche votre texte plus gras que la valeur héritée de la propriété "font-weight" de son parent ;
  • inherit : Gras hérité de la propriété "font-weight" de son parent.

Retourner en haut de page

Spécifier l'espacement entre les caractères : letter-spacing

La propriété CSS letter-spacing vous permet de gérer l'espacement entre les lettres de votre texte.

Syntaxe

Propriété letter-spacing

Propriété letter-spacing

Description

  • normal : Affiche votre texte normalement ;
  • 13 px : Affiche votre texte avec un espacement entre les lettres de 13px ;
  • 0.8em : Affiche votre texte avec un espacement entre les lettres de 0,8 cadratin, soit 12,8px : 1em = 16px ;
  • inherit : Espacement des lettres hérité de la propriété "letter-spacing" de son parent.

Retourner en haut de page

Spécifier la hauteur d'une ligne : line-height

La propriété CSS line-height vous permet de gérer l'espacement entre les lignes de votre texte.

Syntaxe

Propriété line-height

Propriété line-height

Description

  • normal : Affiche votre texte normalement ;
  • 13 px : Affiche votre texte avec un espacement entre les lignes de 13px ;
  • 0.4em : Affiche votre texte avec un espacement entre les lignes de 0,4 cadratin, soit 6,4px : 1em = 16px ;
  • 25% : Affiche votre texte avec un espacement entre les lignes de 25% de la valeur définit par la propriété "font-size" de l'élément ;
  • 0.9 : Affiche votre texte avec un espacement entre les lignes de 0,9 fois de la valeur définit par la propriété "font-size" de l'élément ;
  • inherit : Espacement des lignes hérité de la propriété "line-height" de son parent.

Retourner en haut de page

Spécifier l'alignement horizontal d'un texte : text-align

La propriété CSS text-align vous permet de gérer la manière dont est aligné votre texte.

Syntaxe

Propriété text-align

Propriété text-align

Description

  • left : Aligne votre texte à gauche ;
  • center :  Aligne votre texte au centre ;
  • right :  Aligne votre texte à droite ;
  • justify :  Justifie votre texte ;
  • inherit : Alignement du texte hérité de la propriété "text-align" de son parent.

Retourner en haut de page

Spécifier l'alignement horizontal de la dernière ligne d'un texte : text-align-last

La propriété CSS text-align-last vous permet de gérer la manière dont est alignée la dernière ligne de votre texte.

Syntaxe

Propriété text-align-last

Propriété text-align-last

Description

  • auto : Aligne la dernière ligne suivant la valeur de la propriété text-align ;
  • start : Aligne la dernière ligne de la même manière que la valeur left si votre texte va de gauche à droite ou de la même manière que la valeur right si votre texte va de droite à gauche ;
  • end : Aligne la dernière ligne de la même manière que la valeur right si votre texte va de gauche à droite ou de la même manière que la valeur left si votre texte va de droite à gauche ;
  • left : Aligne la dernière ligne de votre texte à gauche ;
  • center : Aligne la dernière ligne de votre texte au centre ;
  • right : Aligne la dernière ligne de votre texte à droite ;
  • justify : Justifie la dernière ligne de votre votre texte ;
  • inherit : Alignement de la dernière ligne du texte hérité de la propriété "text-align-last" de son parent.

Retourner en haut de page

Spécifier la décoration d'un texte : text-decoration

La propriété CSS text-decoration vous permet de gérer la décoration (souligné, barré, ...) de votre texte.

Syntaxe

Propriété text-decoration

Propriété text-align-last

Description

  • underline : Souligne votre texte ;
  • overline : Ajoute une ligne au-dessus de votre texte ;
  • line-through : Barre votre texte ;
  • none : Affiche votre texte sans décoration ;
  • inherit : Décoration du texte héritée de la propriété "text-decoration" de son parent.

Evolution

En CSS3, vous avez la possibilité de définir de manière individuelle chaque propriété de "text-decoration" :

  • text-decoration-color : Paramètre la couleur du trait :
    • currentColor : Reprend la valeur de la propriété "color" ;
    • transparent : Couleur transparente ;
    • #EBA716 : Couleur hexadécimale ;
    • orange : Couleur nommée ;
    • rgb(235,167,22) : Couleur en RGB (Red-Green-Blue) dont les valeurs sont comprises entre 0 et 255 ou en pourcentage à l'aide du symbole"%";
    • rgb(235,167,22,0.5) : Couleur en RGB avec transparence, cette valeur est comprise entre 0 (transparent) et 1 (opaque) ;
    • hsl(33,100%,50%) : Couleur en HSL (Hue-Saturation-Lightness) dont la valeur H est comprise entre 0 et 360, entre 0 et 100% pour les valeurs S et L ;
    • hsl(33,100%,50%,0.5) : Couleur en HSL avec transparence, cette valeur est comprise entre 0 (transparent) et 1 (opaque) ;
    • inherit : Couleur héritée de la propriété "text-decoration-color" de son parent ;
  • text-decoration-line : Paramètre le type du trait :
    • underline : Texte souligné ;
    • overline : Ligne au-dessus du texte ;
    • line-through : Texte barré ;
    • none : Texte sans ligne ;
  • text-decoration-style : Paramètre le style du trait :
    • solid : Ligne simple et continue ;
    • double : Ligne double pleine ;
    • dotted : Ligne en pointillés ;
    • dashed : Ligne en tirets ;
    • wavy : Ligne ondulée ;

Retourner en haut de page

Spécifier le retrait de la première ligne : text-indent

La propriété CSS text-indent vous permet de gérer le décalage de la première ligne de votre texte.

Syntaxe

Propriété text-indent

Propriété text-indent

Description

  • 4px : Décale la première ligne de votre texte de 4 pixels ;
  • 0.6em : Décale la première ligne de votre texte de 0,6 cadratin, soit 9,6px : 1em = 16px ;
  • 3% : Décale la première ligne de votre texte de 3% ;
  • inherit : Décalage de la première ligne hérité de la propriété "text-indent" de son parent.

Retourner en haut de page

Remplacer un texte sortant d'un bloc par une chaîne de caractères : text-overflow

La propriété CSS text-overflow vous permet de gérer le dépassement du texte d'un bloc en le remplaçant soit par une certaine chaîne de caractères.

Syntaxe

Propriété text-overflow

Propriété text-indent

Description

  • clip : Tronque votre texte à la limite de la boîte CSS, "clip" est la valeur par défaut ;
  • ellipsis : Remplace le texte rogné par des points de suspensions ;
  • '>>' : Remplace le texte rogné par la chaîne de caractères ">>" ;
  • ellipsis '>>' : Remplace le texte rogné par des points de suspensions suivis de la chaîne de caractères ">>"
  • inherit : Chaîne de remplacement héritée de la propriété "text-overflow" de son parent.

Retourner en haut de page

Spécifier l'ombre d'un texte : text-shadow

La propriété CSS text-shadow vous permet d'ajouter de l'ombre à votre texte.

Syntaxe

Propriété text-shadow

Propriété text-shadow

Description

  • 1em 0.2em 0.1em purple : La première valeur spécifie le décalage horizontal de l'ombre du texte, la seconde le décalage vertical, et la troisième, qui peut être omise, spécifie le rayon du flou de l'ombre du texte. Vous avez aussi la possibilité d'ajouter une couleur à votre ombre ;
  • 2em 1em 0.4em #EBA716, 3px 12px 6px blue : Ajoute des ombres multiples, il vous suffit de mettre une virgule pour séparer chaque ombre ;
  • inherit : Ombre héritée de la propriété "text-shadow" de son parent.

Retourner en haut de page

Spécifier la capitalisation : text-transform

La propriété CSS text-transform vous permet de forcer votre texte à apparaître en majuscule ou en minuscule.

Syntaxe

Propriété text-transform

Propriété text-transform

Description

  • capitalize : Transforme la première lettre de chaque mot en majuscule ;
  • lowercase : Transforme tout le texte en minuscule ;
  • uppercase : Transforme tout le texte en majuscule ;
  • none : Affiche le texte tel qu'il est écrit dans le fichier HTML ;
  • inherit : Capitalisation héritée de la propriété "text-transform" de son parent.

Retourner en haut de page

Spécifier le sens de l'écriture pour d'un texte bidirectionnel : unicode-bidi

La propriété CSS unicode-bidi vous permet de gérer le texte bidirectionnel dans un document lorsqu'elle est associé à la propriété "direction".

Syntaxe

Propriété unicode-bidi

Propriété unicode-bidi

Description

  • normal : Affiche le texte sans changer son sens ;
  • bidi-override : Surcharge la directionnalité. Ignore tout simplement l'algorithme de bidirectionnalité ;
  • embed : Ajoute un niveau pour l'intégration. Le sens de ce niveau est fournie par la propriété "direction" ;
  • inherit : Paramètres hérités de la propriété "unicode-bidi" de son parent.

Retourner en haut de page

Spécifier l'alignement vertical d'un texte : vertical-align

La propriété CSS vertical-align vous permet de définir l'alignement vertical de votre texte.

Syntaxe

Propriété vertical-align

Propriété vertical-align

Description

  • 15% : Affiche l'élément aligné à 15% au-dessus de l'alignement par défaut. Cette valeur peut être exprimée de manière négative et avec les différentes unités de longueur existantes ;
  • baseline : Affiche l'élément sur le même alignement que celui de son parent ;
  • bottom : Affiche l'élément sur le bas de la ligne à laquelle il appartient ;
  • middle : Affiche l'élément sur le milieu de la ligne à laquelle il appartient ;
  • top : Affiche l'élément sur le haut de la ligne à laquelle il appartient ;
  • sub : Affiche l'élément tel un exposant de son parent ;
  • super : Affiche l'élément tel un indice de son parent ;
  • text-bottom : Aligne le bas de l'élément avec le bas de son parent ;
  • text-top : Aligne le haut de l'élément avec le haut de son parent ;
  • inherit : Alignement vertical hérité de la propriété "vertical-align" de son parent.

Retourner en haut de page

Spécifier la manière dont le navigateur interprète les espaces blancs : white-space

La propriété CSS white-space vous permet de gérer les espaces, les tabulations et les passages à la ligne de votre texte.

Syntaxe

Propriété white-space

Propriété white-space

Description

  • normal : Fusionne les espaces blancs en un seul. Les passages à la ligne se font automatiquement. Valeur par défaut ;
  • nowrap : Fusionne les espaces blancs en un seul mais supprime les passages à la ligne ;
  • pre : Conserve seulement les saut de ligne appliqués par la balise "br" ;
  • pre-line : Les passages à la ligne se font automatiquement et les espaces et tabulations sont regroupés ;
  • pre-wrap : Les passages à la ligne se font automatiquement ;
  • inherit : Gestion des blancs héritée de la propriété "white-space" de son parent.

Retourner en haut de page

Spécifier comment faire les césures des mots : word-break

La propriété CSS word-break vous permet de définir la manière dont vos mots se coupent à la fin des lignes de votre texte.

Syntaxe

Propriété white-space

Propriété white-space

Description

  • normal : Affiche votre texte normalement ;
  • break-all : Les césures se font entre n'importe quel caractère. Utilisé principalement pour les langues non CJC (Chinois, Japonais, Coréen) d'après le W3C ;
  • keep-all : Interdit les césures pour les langues CJC et applique l'attribut "normal" pour les autres ;
  • inherit : Césures héritées de la propriété "word-break" de son parent.

Retourner en haut de page

Vous voici avec une jolie petite liste de propriétés vous permettant de mettre en forme votre texte destiné au Web. Bien entendu, il existe d'autres propriétés, et il en existera encore de nouvelles avec l'arrivée du CSS4. Dans le prochain tutoriel, vous trouverez une liste des propriétés CSS permettant la gestion des tableaux.

Ce tutoriel a été écrit par Arnaud Casas.