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.

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.

Pour agrandir le titre h1, ajoutez une propriété font-size sous le sélecteur h1. L'élément

permet de créer le titre principal de la page.

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.

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

sert à créer un sous-titre sur la page.

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 !

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.

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.

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.

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.