Couleur, Taille et Police de Caractères

La couleur, la taille et la police de caractères sont des aspects fondamentaux de la mise en forme du texte en CSS. Maîtriser ces propriétés permet de créer des designs visuellement attractifs et adaptés à l'esthétique de votre site web.

1. Couleur du Texte (color)

La propriété color permet de définir la couleur du texte.

body {
    color: #333; /* Couleur grise pour le texte du corps du document */
}
 
h1 {
    color: #0066cc; /* Couleur bleue pour les titres de niveau 1 */
}
 
.highlight {
    color: #ff0000; /* Couleur rouge pour les éléments avec la classe "highlight" */
}

• Explication : Utilisation de la propriété color pour définir différentes couleurs de texte pour le corps du document, les titres <h1>, et les éléments avec la classe "highlight".

2. Taille de la Police (font-size)

La propriété font-size permet de définir la taille de la police.

p {
    font-size: 16px; /* Taille de police de 16 pixels pour les paragraphes */
}
 
h2 {
    font-size: 20px; /* Taille de police de 20 pixels pour les titres de niveau 2 */
}
 
.large-text {
    font-size: 24px; /* Taille de police plus grande (24 pixels) pour les éléments avec la classe "large-text" */
}

• Explication : Utilisation de la propriété font-size pour ajuster la taille de la police pour différents éléments.

3. Police de Caractères (font-family)

La propriété font-family permet de définir la police de caractères utilisée.

body {
    font-family: 'Helvetica', sans-serif; /* Police principale pour le corps du document avec une alternative sans empattement */
}
 
code {
    font-family: 'Courier New', monospace; /* Police spécifique pour les éléments <code> avec une police à largeur fixe */
}

• Explication : Utilisation de la propriété font-family pour définir la police de caractères pour le corps du document et les éléments <code>.

4. Gras (font-weight)

La propriété font-weight permet de définir l'épaisseur de la police, y compris le style gras.

strong {
    font-weight: bold; /* Texte en gras pour les éléments <strong> */
}
 
.light {
    font-weight: lighter; /* Texte plus léger pour les éléments avec la classe "light" */
}

• Explication : Utilisation de la propriété font-weight pour définir le style gras pour certains éléments.

Conclusion

En combinant judicieusement la couleur, la taille et la police de caractères, vous pouvez créer une hiérarchie visuelle sur votre site web et améliorer la lisibilité. Expérimentez avec ces propriétés pour définir un style textuel qui correspond à l'esthétique de votre design.