HTML 5 - 4.4 : Le style du texte et des couleurs

Le style du texte en CSS offre plusieurs propriétés pour contrôler l'apparence des caractères. La propriété font-family définit la police : font-family: verdana, geneva, tahoma, sans-serif; utilise Verdana si disponible, sinon Geneva, puis Tahoma, ou enfin une police sans-serif générique. La propriété font-size définit la taille (en pixels, em, ou autres unités). La propriété font-weight contrôle l'épaisseur : normal ou bold pour des variantes courantes.

L'alignement du texte se gère avec text-align. Les valeurs courantes sont left, center, right, et justify (justifier le texte sur toute la largeur). La propriété color définit la couleur du texte. On peut utiliser des noms de couleur en anglais (green, magenta), des codes hexadécimaux (par exemple #FF0000 pour le rouge), ou des valeurs RGB (par exemple rgb(255, 0, 0)).

Exemple complet : h1 { font-family: arial; font-size: 40px; color: white; margin-bottom: 0; } crée un titre Arial blanc de 40px sans marge inférieure. On peut combiner plusieurs propriétés pour créer des styles texte cohérents et lisibles sur tout le site. Un padding ou une marge additionnelle peut être ajouté pour isoler le texte visuellement.

En résumé

Ce cours couvre les propriétés CSS essentielles pour styliser le texte et les couleurs en HTML5. On apprend à modifier la police avec font-family, la taille avec font-size, le poids avec font-weight, et à aligner le texte avec text-align. On découvre aussi comment changer les couleurs en utilisant les noms de couleurs anglais, les codes hexadécimaux RGB, ou le sélecteur couleur du navigateur.

Points clés

• Utiliser font-family pour spécifier la police d'écriture avec plusieurs fallback (Verdana, Geneva, Tahoma, sans-serif)
• Modifier la taille du texte avec font-size en pixels, points ou autres unités de mesure
• Contrôler le poids du texte avec font-weight (normal, gras, etc.)
• Aligner le texte avec text-align (center, justify, etc.) et ajouter des marges pour l'espacement
• Changer les couleurs du texte avec les noms de couleurs en anglais, codes RGB hexadécimaux (ex: 888), ou le sélecteur couleur visuel du navigateur

Questions fréquentes

Comment utiliser plusieurs polices comme fallback en CSS?

Utiliser la propriété font-family avec plusieurs polices séparées par des virgules (ex: font-family: Verdana, Geneva, Tahoma, sans-serif). Le navigateur utilisera la première police disponible.

Quels formats de couleur puis-je utiliser pour styliser le texte?

Trois formats : les noms de couleurs en anglais (magenta, green, etc.), les codes RGB hexadécimaux (ex: 888 pour du gris), ou le sélecteur couleur visuel intégré au navigateur.

Comment justifier le texte tout en le maintenant bien espacé?

Utiliser text-align: justify et ajouter une marge à droite (ex: margin-right: 20px) pour éviter que le texte soit trop collé au bord droit.