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

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.

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

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

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

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

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

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

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

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.

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.