Utilisez une feuille de style CSS pour mettre en couleur le texte de votre page web, l'aligner et lui appliquer d'autres propriétés de style dans Dreamweaver.
Image abstraite figurant des joueurs de didjeridoo avec du texte flottant dans un ciel coloré.

 

Suivez le tutoriel Typographie et le web pour savoir comment améliorer la typographie de vos pages.

Lorsque vous configurez la structure HTML de votre texte, une police est définie par défaut. L'ajout de styles CSS peut considérablement améliorer la hiérarchie, la lisibilité et l'aspect visuel de vos maquettes.

Illustration avant et après montrant l’utilisation de CSS pour styliser le texte.

Avant de commencer

Téléchargez et enregistrez les fichiers du projet. Ouvrez style-text.html dans Dreamweaver et affichez styles.css  en mode Fractionner. Redimensionnez la fenêtre d'affichage en direct de sorte que le texte apparaisse à droite de l'image de Saturne.

Faites défiler le contenu de la fenêtre de code jusqu'à la mention /* Start Here */.

CSS ouvert dans Dreamweaver en mode Fractionner.

Modification de la taille du texte

Pour agrandir le titre h1, ajoutez une propriété font-size sous le sélecteur h1. L'élément <h1> permet de créer le titre principal de la page.

CSS

h1 {
    margin: 0;
    font-size: 48px;
}

La taille de texte de l’en-tête h1 est agrandie à 48 px.

Changement de police

La police par défaut des pages HTML est généralement Times New Roman. Pour la modifier, il suffit d'ajouter une propriété font-family. Vous pouvez spécifier plusieurs polices en les séparant par une virgule. Le navigateur web affichera alors la première police de la liste disponible sur l'ordinateur de l'utilisateur. Pensez à ajouter systématiquement "sans-serif" ou "serif" à la fin de votre liste pour que le navigateur puisse choisir la meilleure correspondance en fonction des polices disponibles.

CSS

h1 {
   ...
    font-size: 48px;
    font-family: Gotham, Tahoma, sans-serif;
}

La famille de police de l’en-tête h1 est remplacée par les options sans empattements.

Modification de l'alignement du texte

Par défaut, un texte est toujours justifié à gauche, mais vous pouvez modifier son alignement en ajoutant une propriété text-align. Vous avez la possibilité de centrer un texte, de le justifier ou de l'aligner à droite ou à gauche. Ajoutez la propriété text-align: center; aux sélecteurs h1 et h2. L'élément <h2> sert à créer un sous-titre sur la page.

CSS

h1 {
    ...
    font-family: Gotham, Tahoma, sans-serif;
    text-align: center;
h2 {
    ...
    color: #282828;
    text-align: center;
}

Les en-têtes h1 et h2 sont remplacés par le centrage.

Modification de la couleur du texte

Par défaut, le texte s'affiche en noir, mais vous pouvez modifier la couleur du titre h1 en ajoutant une propriété color et en définissant une valeur hexadécimale. Après avoir tapé " color:", vous verrez apparaître un menu contextuel. Double-cliquez sur l'option Color, puis sélectionnez la pipette dans le menu qui s'affiche. Cliquez sur la zone rouge-orange de la palette pour sélectionner la couleur, puis appuyez sur la touche Entrée. La valeur hexadécimale correspondant au rouge-orange sera automatiquement ajoutée. Vous pouvez également saisir manuellement un code hexadécimal. N'oubliez pas de fermer la propriété par un point-virgule !

CSS

h1 {
    ...
    text-align: center;
    color: #F47A53;
}  

La couleur de l’en-tête h1 est remplacée par une couleur orange à l’aide de l’outil Pipette.
La couleur de l’en-tête h1 est remplacée par une couleur orange à l’aide d’un code hexadécimal.

Texte en italique

Vous pouvez utiliser la propriété font-style pour mettre du texte en italique. Mettez en italique le sous-titre h2 en ajoutant la propriété italic.

CSS

h2 {
    …
    text-align: center;
    font-style: italic;
}  

Le style de police de l’en-tête h2 est remplacé par l’italique.

Modification de l'épaisseur de la police

Vous pouvez ajouter une propriété font-weight pour épaissir ou désépaissir le texte. L'épaisseur du texte est spécifiée par des multiples de 100, 100 correspondant à un trait ultra-fin et 900 à un trait très épais. Utilisez cette propriété pour réduire l'épaisseur du sous-titre h2.

CSS

h2 {
    …
    font-style: italic;
    font-weight: 300;
}  

L’épaisseur de police de l’en-tête h2 est définie sur 300.

Ajout d'autres propriétés utiles

Text-transform permet de mettre un texte en majuscules ou en minuscules. Letter-spacing sert à augmenter l'espace horizontal entre les lettres contrôlées par un sélecteur. Testez ces sélecteurs sur l'élément h1.

CSS

h1 {
    ...
    color: #F67A53;
    text-transform: uppercase;
    letter-spacing: .08em;
}

L’en-tête h1 est mis en majuscules à l’aide d’une balise Text-transform et un interlettrage est ajouté.

Si vous examinez le sélecteur p, vous noterez la présence de la propriété line-height, qui permet de contrôler l'espace vertical entre les lignes du texte. Supprimez la propriété line-height et observez la différence au niveau de la lisibilité du texte ! Utilisez la combinaison Cmd + Z (Mac) ou Ctrl + Z (Windows) pour annuler la modification.

L’espace vertical est ajusté entre les en-têtes h1 et h2 à l’aide de la propriété line-height.

Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez examiner le résultat.

Enregistrez les fichiers pour visualiser les modifications.

Cliquez sur Fichier > Aperçu dans le navigateur et choisissez le navigateur dans lequel visualiser le texte stylisé.
10/18/2021
Cette page vous a-t-elle été utile ?