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) :
- color : Définit la couleur du texte affiché au premier plan ;
- direction : Définit le sens de l’écriture ;
- font : Définit la police, la taille, l’inclinaison, la graisse et les petites capitales ;
- font-family : Définit la police d’écriture ;
- font-size : Définit la taille du texte ;
- font-stretch : Définit l’étirement du texte ;
- font-style : Définit le style (normal, oblique ou italique) du texte ;
- font-variant : Définit les petites capitales du texte ;
- font-weight : Définit le gras de la police ;
- letter-spacing : Définit l’espacement entre chaque lettre ;
- line-height : Définit la hauteur d’une ligne de texte ;
- text-align : Définit l’alignement horizontal du texte ;
- text-align-last : Définit l’alignement horizontal de la dernière ligne d’un texte ;
- text-decoration : Définit les décorations à appliquer au texte ;
- text-indent : Définit le retrait de la première ligne du texte ;
- text-overflow : Définit la chaîne de caractères qui remplace le texte sortant d’un bloc ;
- text-shadow : Définit l’ombrage du texte ;
- text-transform : Définit la capitalisation du texte ;
- unicode-bidi : Définit le sens de l’écriture pour l’algorithme bidirectionnel Unicode ;
- vertical-align : Définit l’alignement vertical du texte ;
- white-space : Définit la manière dont le navigateur doit interpréter les espaces blancs ;
- 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

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.
Gérer le sens de l’écriture : direction
La propriété CSS direction permet de modifier la direction de l’écriture.
Syntaxe

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.
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

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.
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

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.
Spécifier la taille de la police : font-size
La propriété CSS font-size vous permet de modifier la taille du texte.
Syntaxe

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.
Spécifier l’étirement de la police : font-stretch
La propriété CSS font-stretch vous permet de modifier l’élargissement du texte.
Syntaxe

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 : Élargissement hérité de la propriété font-stretch de son parent.
Spécifier le style de la police : font-style
La propriété CSS font-style vous permet de modifier le style du texte.
Syntaxe

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.
Spécifier que le texte soit écrit en petites capitales : font-variant
Spécifier le type de gras à utiliser : font-weight
La propriété CSS font-weight vous permet d’afficher votre texte en gras.
Syntaxe

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.
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

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.
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

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.
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

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.
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

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.
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

Description
- lunderline : Souligne votre texte ;
- loverline : Ajoute une ligne au-dessus de votre texte ;
- lline-through : Barre votre texte ;
- lnone : Affiche votre texte sans décoration ;
- linherit : 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.
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

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.
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

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.
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

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.
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

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.
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

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.
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

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.
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

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.
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

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.
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.
2 Commentaires
Soumettre un commentaire
Nous Sommes Là Pour Vous Aider !
Horaires
Du Lundi au Vendredi
De 9:00 à 17:30
Vraiment. C’est le plus riche de toutes les illustrations que j’ai consulte. Chapeau chef.
Bonjour, merci pour le compliment, si j’ai le temps j’en produirais d’autres sur les autres propriétés existantes 🙂