1.1 Couleur
CSS (Cascading Style Sheets) offre de nombreuses propriétés pour styliser le texte. Parmi elles, les propriétés
clés sont color, font-size et font-weight. Ces propriétés permettent de
contrôler la couleur du texte, sa taille et l'épaisseur de la police respectivement. Examinons chacune de ces
propriétés en détail.
La propriété color définit la couleur du texte. Elle peut être définie à l'aide de différents formats de couleur, y compris les noms de couleurs, les valeurs hexadécimales, RGB, RGBA, HSL et HSLA.
Exemples d'utilisation
1. Noms de couleurs :
p {
color: red;
}
2. Valeurs hexadécimales :
p {
color: #ff0000;
}
3. RGB et RGBA :
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Rouge transparent */
}
4. HSL et HSLA :
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Rouge transparent */
}
Exemple d'utilisation en HTML :
p {
color: #3498db; /* Bleu */
}
<body>
<p>Ce texte sera bleu.</p>
</body>
1.2 Propriété font-size
La propriété font-size définit la taille du texte. La valeur peut être spécifiée dans différentes unités
telles que les pixels (px), en relatif (em, rem, %),
en unités dérivées des pixels (mm, cm, pt, pc), vw
et vh (viewport width et viewport height), entre autres.
Exemples d'utilisation
1. Pixels :
p {
font-size: 16px;
}
2. Relatif :
%, em, rem
p {
font-size: 150%; /* 150% de la taille de police de base */
font-size: 1.5em; /* 1.5 fois la taille de police de base */
font-size: 1.5rem; /* taille relative à la taille de police de l'élément <html> */
}
3. Unités liées au viewport :
p {
font-size: 2vw; /* 2% de la largeur du viewport */
font-size: 2vh; /* 2% de la hauteur du viewport */
}
Exemple d'utilisation en HTML :
p {
font-size: 18px; /* Taille de texte de 18 pixels */
}
<body>
<p>Ce texte aura une taille de 18 pixels.</p>
</body>
1.3 Propriété font-weight
La propriété font-weight définit l'épaisseur du texte. Les valeurs peuvent être définies comme mots
clés (normal, bold, bolder, lighter) ou comme valeurs numériques
de 100 à 900, où 400 correspond à normal et 700
correspond à bold.
Exemples d'utilisation
1. Mots clés :
p {
font-weight: bold;
}
2. Valeurs numériques :
p {
font-weight: 300; /* Texte léger */
font-weight: 700; /* Équivalent à bold */
}
Exemple d'utilisation en HTML :
p {
font-weight: 700; /* Texte en gras */
}
<body>
<p>Ce texte sera en gras.</p>
</body>
GO TO FULL VERSION