Texte CSS

Formater du texte avec CSS

CSS fournit plusieurs propriétés qui vous permettent de définir très facilement et efficacement différents styles de texte tels que la couleur, l'alignement, l'espacement, la décoration, la transformation, etc.

Les propriétés de texte couramment utilisées sont : text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, etc. Ces propriétés vous permettent de contrôler avec précision l'apparence visuelle des caractères , des mots , des espaces , etc.

Voyons comment définir ces propriétés de texte pour un élément plus en détail.

Couleur du texte

La couleur du texte est définie par la propriété CSS color.

La règle de style dans l'exemple suivant définira la couleur de texte par défaut pour la page

body {
    color: #747474;
}

Bien que la propriété color semble faire partie du texte CSS, il s'agit en fait d'une propriété autonome dans CSS. Voir le tutoriel sur la couleur CSS pour en savoir plus sur la propriété color.

Alignement du texte

La propriété text-align est utilisée pour définir l'alignement horizontal du texte.

Le texte peut être aligné de quatre manières : left (à gauche), right (à droite ), center (au centre) ou justify (justifié :marges droites à gauche et à droite).

Examinons un exemple pour comprendre le fonctionnement de cette propriété.

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

Remarque : Lorsque text-align est défini sur justify, chaque ligne est étirée de sorte que chaque ligne ait la même largeur (sauf la dernière ligne) et que les marges gauche et droite soient droites. Cet alignement est généralement utilisé dans des publications telles que des magazines et des journaux.

Examinons l'illustration suivante pour comprendre ce que signifient réellement ces valeurs.

Décoration de texte

La propriété text-decoration est utilisée pour définir ou supprimer des décorations du texte.

Cette propriété accepte généralement l'une des valeurs suivantes : underline (souligné), overline (ligne par dessus), line-through (barré) et none. Vous devez éviter de souligner du texte qui n'est pas un lien, car cela pourrait dérouter le visiteur.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Suppression du soulignement par défaut des liens

La propriété text-decoration est largement utilisée pour supprimer le soulignement par défaut des hyperliens HTML . Vous pouvez en outre fournir d'autres repères visuels pour le faire ressortir du texte normal, par exemple, en utilisant une bordure en pointillé au lieu d'un soulignement plein.

Examinons l'exemple suivant pour comprendre comment cela fonctionne :

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

Remarque : Lorsque vous créez un lien HTML , les navigateurs intégrés dans la feuille de style le soulignent automatiquement et lui appliquent une couleur bleue, afin que les lecteurs puissent voir clairement quel texte est cliquable.

 

Transformation de texte

La propriété text-transform est utilisée pour définir les cas d'un texte.

Les textes sont souvent écrits en casse mixte. Cependant, dans certaines situations, vous souhaiterez peut-être afficher votre texte dans une casse totalement différente. À l'aide de cette propriété, vous pouvez modifier le contenu du texte d'un élément en lettres majuscules ou minuscules, ou mettre en majuscule la première lettre de chaque mot sans modifier le texte d'origine.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
h3 {
    text-transform: lowercase;
}

Indentation du texte

La propriété text-indent est utilisée pour définir l'indentation de la première ligne de texte dans un bloc de texte. Cela se fait généralement en insérant l'espace vide avant la première ligne de texte.

La taille de l'indentation peut être spécifiée en utilisant un pourcentage (%), des valeurs de longueur en pixels, ems, etc.

La règle de style suivante indentera la première ligne des paragraphes de 100 pixels.

p {
    text-indent: 100px;
}

Remarque : L'indentation du texte à partir de la gauche ou de la droite dépend de la direction du texte à l'intérieur de l'élément, définie par la propriété CSS text-direction.

 

L'espacement des lettres

La propriété letter-spacing est utilisée pour définir un espacement supplémentaire entre les caractères du texte.

Cette propriété peut prendre une valeur de longueur en pixels, ems, etc. Elle peut également accepter des valeurs négatives. Lors de la définition de l'espacement des lettres, une valeur de longueur indique l'espacement en plus de l'espacement inter-caractères par défaut.

Examinons l'exemple suivant pour comprendre comment cela fonctionne vraiment :

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

Espacement des mots

La propriété word-spacing est utilisée pour spécifier un espacement supplémentaire entre les mots.

Cette propriété peut accepter une valeur de longueur en pixels, ems, etc. Les valeurs négatives sont également autorisées.

Essayons l'exemple suivant pour comprendre le fonctionnement de cette propriété :

 

p.normal {
    word-spacing: 20px;
}
p.justified {
    word-spacing: 20px;
    text-align: justify;
}
p.preformatted {
    word-spacing: 20px;
    white-space: pre;
}

Remarque : L'espacement des mots peut être affecté par la justification du texte. De plus, même si les espaces blancs sont préservés, les espaces entre les mots sont affectés par la propriété word-spacing.

Hauteur de la ligne

La propriété line-height est utilisée pour définir la hauteur de la ligne de texte.

Il est également appelé interligne et couramment utilisé pour définir la distance entre les lignes de texte.

La valeur de cette propriété peut être un nombre, un pourcentage (%), ou une longueur en pixels, ems, etc.

p {
    line-height: 1.2;
}

Lorsque la valeur est un nombre, la hauteur de ligne est calculée en multipliant la taille de police de l'élément par le nombre. Tandis que les valeurs en pourcentage sont relatives à la taille de police de l'élément.

Remarque : Les valeurs négatives pour la propriété line-height ne sont pas autorisées. Cette propriété est également un composant de la propriété abrégée de la police CSS.

 

Si la valeur de la propriété line-height est supérieure à la valeur de font-size pour un élément, cette différence (appelée le "leading" ) est réduite de moitié (appelée le "half-leading" ) et répartie uniformément sur le haut et le bas de la ligne. Voyons un exemple :

p {
    font-size: 13px;
    line-height: 20px;
    background-color: #f0e68c;
}

Consultez le tutoriel sur le débordement de texte CSS3 dans la section avancée pour savoir comment gérer le texte débordé. Consultez également la section CSS3 sur l'ombre du texte pour savoir comment appliquer un effet d'ombre sur le texte.