Les feuilles de style en cascade (CSS) décrivent la manière dont le langage HTML affiche les éléments à l’écran. Les feuilles de style en cascade permettent de contrôler la mise en page de plusieurs pages web en quelques lignes de code.


Les feuilles de style en cascade possèdent des propriétés de mise en forme qui affectent l’espacement, l’apparence et l’alignement du texte. Voici quelques propriétés que vous pouvez utiliser pour styliser le texte de vos pages d’application.

1. Couleur du texte

Le couleur spécifie la couleur de premier plan de votre texte. Vous pouvez utiliser un nom de couleur prédéfini comme rouge, blancou vert. Vous pouvez également utiliser une valeur hexagonale ou d’autres unités telles que RVB, HSL et RGBA.

Les frameworks CSS tels que Tailwind CSS disposent d’une fonction de couleur intégrée qui affiche une variété de nuances. Cela vous permet de sélectionner plus facilement la nuance que vous préférez. Modifions la couleur des titres suivants en utilisant certaines de ces propriétés :

 <body>
    <h1>Change My Color</h1>

    <h2>Change My Color</h2>

    <h3>Change My Color</h3>

    <h4>Change My Color</h4>
</body>

Le fichier CSS se présentera comme suit :

 h1 {
    color: orange;
}

h2 {
    color: #ff6600;
}

h3 {
    color: rgb(255, 102, 0);
}

h4 {
    color: hsl(24, 100%, 50%);
}

Et le texte stylé apparaîtra comme suit :

Les propriétés CSS modifient la couleur du texte

2. Couleur d’arrière-plan

Vous pouvez utiliser la fonction couleur de fond pour créer des arrière-plans attrayants. Utilisez-la pour définir des arrière-plans différents pour les rubriques suivantes :

 <body>
    <h1>Change My Background Color</h1>

    <h2>Change My Background Color</h2>

    <h3>Change My Background Color</h3>

    <h4>Change My Background Color</h4>
</body>

Avec le CSS suivant :

 h1 {
    background-color: orange;
}

h2 {
    background-color: #009900;
}

h3 {
    background-color: rgb(204, 0, 0);
}

h4 {
    background-color: hsl(60, 100%, 50%);
}

Lorsque votre navigateur affichera cette page, elle ressemblera à ceci :

CSS définit la couleur d'arrière-plan des textes

3. Alignement du texte

Le text-align définit l’alignement horizontal du texte. Cette valeur peut être gauche, droit, centreou justifier.

La valeur justify étire chaque ligne de texte, de sorte qu’elles prennent toutes la même largeur sur les marges droite et gauche. Utilisez l’exemple de code suivant pour explorer ces quatre valeurs :

 <body>
    <h1>Align Me Left</h1>

    <h2> Align Me Right</h2>

    <h3>Align Me center</h3>

    <p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p> 

    <p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>

Utilisez le CSS suivant pour appliquer différents alignements :

 h1 {
   text-align: left;
}

h2 {
   text-align: right;
}

h3 {
   text-align: center;
}

.ex4{
   text-align: justify;
}

Dans le navigateur, le résultat sera le suivant :

propriétés d'alignement du texte sur le texte

4. Direction du texte

Le direction du texte définit la direction du texte. Définir la direction à l’aide des propriétés rtl (de droite à gauche) ou ltr (de gauche à droite). Ces deux éléments indiquent la direction dans laquelle vous souhaitez que le texte s’écoule.

Par exemple, utilisez rtl lorsque vous travaillez avec des langues écrites de droite à gauche comme l’hébreu ou l’arabe. Vous utilisez ltr pour les langues qui s’écrivent de gauche à droite comme l’anglais.

Illustrons cela avec le code ci-dessous :

 <body>
    <div>
         <p class='ex1'>This paragraph goes from right to left. The cursor
        moves from right to left when you type more information on the
        page.</p>

         <p id="ex2">This paragraph goes from left to right. The cursor moves
         from left to write when you type more information on the page!</p>
    </div>
</body>

Avec ce CSS d’accompagnement :

 .ex1 {
    direction: rtl;
}

#ex2 {
    direction: ltr;
}

Le résultat final ressemblera à quelque chose comme ceci :

text-direction aligne le texte dans différentes directions

5. Décoration du texte

Le décoration du texte définit l’apparence des lignes décoratives sur le texte. Il s’agit d’une abréviation de text-decoration-line, texte-décoration-couleur, style de décoration du texteet épaisseur de la décoration du texte . Si vous ne souhaitez pas que cette propriété s’applique aux éléments comportant des liens, utilisez la propriété text-decoration : none;

Il est préférable d’éviter de souligner un texte normal, car ce style indique généralement un lien. L’illustration suivante montre quelques exemples dans le code :

 <body>
    <h1>Overline text decoration</h1>

    <h2>Line-through text decoration</h2>

    <h3>Underline text decoration</h3>

    <p class="ex">Overline and underline text decoration.</p>

    <p><a href="default.asp">This is a link</a></p>
</body>

Vous pouvez appliquer divers effets de décoration avec cette feuille de style CSS :

 h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

p.ex {
    text-decoration: overline underline;
}

a {
    text-decoration: none;
}

Et ils s’afficheront comme suit :

effet de décoration du texte sur le texte

6. Transformation du texte

Le transformation du texte La propriété text-transform spécifie le type de casse dans lequel les lettres apparaissent. Il peut s’agir de majuscules ou de minuscules. Vous pouvez également l’utiliser pour mettre en majuscule la première lettre de chaque mot :

L’exemple suivant montre comment le faire en code :

 <body>
    <h1>Examples of text-transform property</h1>

    <p class="uppercase">This sentence is in uppercase.</p>

    <p class="lowercase">This sentence is in lower case.</p>

    <p class="capitalize">Capitalize this text.</p>
</body>

Le fichier CSS :

 p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Avec le résultat suivant :

la transformation de texte change le texte en différents cas

7. Espacement des lettres

Le espacement des lettres spécifie l’espace entre les lettres d’un texte. L’exemple suivant illustre comment spécifier différents styles d’espacement.

 <body>
    <h1>Examples of Letter-spacing</h1>

    <h2>This is heading 1</h2>

    <h3>This is heading 2</h3>
</body>

Utilisez des pixels, ou d’autres unités de mesure, dans votre fichier CSS :

 h2 {
    letter-spacing: 7px;
}

h3 {
    letter-spacing: -2px;
}

Le texte qui en résultera sera étiré ou compressé :

l'espacement des lettres permet de modifier l'espacement du texte

8. Espacement des mots

Le espacement des mots La propriété word-spacing spécifie l’espace entre les mots d’un texte. Les navigateurs disposent d’une longueur standard pour l’espace entre les mots, mais vous pouvez définir la vôtre. L’exemple suivant illustre comment augmenter ou réduire l’espace entre les mots :

 <body>
    <h1>Examples of the Word-spacing Property</h1>

    <p>Normal word spacing.</p>

    <p class="ex1">Large word spacing.</p>

    <p class="ex2">Small word spacing.</p>
</body>

En utilisant ce CSS :

 p.ex1 {
    word-spacing: 1rem;
}

p.ex2 {
    word-spacing: -0.3rem;
}

Vous pouvez clairement voir l’effet de l’espacement des mots :

effet de l'espacement des mots sur le texte9. Hauteur de ligne

La hauteur de ligne spécifie l’espacement entre les lignes d’un paragraphe. La hauteur de ligne standard et par défaut dans la plupart des navigateurs est d’environ 110% à 120%. Le code suivant illustre comment la modifier :

 <body>
    <h1>Using line-height</h1>

    <p>
        Standard line-height.

        Standard line-height.

    </p>

    <p class="small">
        Small small line-height.

        Small line-height

    </p>

    <p class="big">
        Bigger line-height.

        Bigger line-height.

    </p>
</body>

En utilisant le CSS suivant :

 p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}

Vous pouvez voir les résultats entre chaque ligne de chaque paragraphe :

effet de la propriété lineheight sur le texte10. Ombre du texte

Le ombre du texte La propriété text-shadow applique des ombres au texte. Vous devez spécifier l’ombre horizontale et l’ombre verticale. L’ombre du texte peut inclure la couleur et le rayon de flou. Illustrons cela avec le code suivant :

 <body>
    <h1>Examples of Text-shadow effect.</h1>

    <h1 class="ex1">Text-shadow with color</h1>

    <h1 class="ex2">Text-shadow with blur effect.</h1>
</body>

Avec ce CSS :

 h1 {
    text-shadow: 2px 2px;
}

.ex1 {
    text-shadow: 2px 2px orange;
}

.ex2 {
    text-shadow: 2px 2px 10px red;
}

produira des effets inhabituels et intéressants :

effet d'ombre sur le texte

Pourquoi apprendre les propriétés de style de texte CSS ?

CSS est l’épine dorsale de la conception moderne des sites web. Que ce soit sous sa forme vanille ou dans des frameworks, la fonction de base des propriétés CSS est la même. La maîtrise des propriétés de mise en forme du texte vous permet de créer des interfaces utilisateur attrayantes et lisibles.

La dernière version de CSS, CSS3, introduit de nouveaux concepts allant des animations aux mises en page à colonnes multiples. Ces concepts facilitent la création d’applications et de documents professionnels.