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.
Mise en forme du texte d'une page web avec CSS

 

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

Mise en forme du texte d'une page web avec CSS

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

Ouverture du fichier style-text.html

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;
}

Modification de la taille du texte

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;
}

Changement de police

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;
}

Modification de l'alignement du texte

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;
}  

Modification de la couleur du texte
Modification de la couleur du texte

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;
}  

Texte en 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;
}  

Modification de l'épaisseur de la police

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;
}

Ajout d'autres propriétés utiles

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.

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.

Aperçu dans le navigateur
04/13/2018
Cette page vous a-t-elle été utile ?