Chapitre 3 : Couleurs, unités et texte
Apprenez à maîtriser les couleurs, les unités et les propriétés de texte en CSS pour créer des designs harmonieux et accessibles.
1. Les couleurs en CSS
Le CSS propose plusieurs manières d'indiquer une couleur :
- Nom de couleur :
red,blue,gold… - Code hexadécimal :
#ff0000,#333333 - RGB :
rgb(255, 0, 0) - RGBA (avec transparence) :
rgba(255, 0, 0, 0.5) - HSL :
hsl(120, 100%, 50%)
p {
color: #006699;
background-color: rgba(255, 255, 0, 0.2);
}
color: #006699;
background-color: rgba(255, 255, 0, 0.2);
}
2. Les unités CSS
Les unités permettent d'exprimer tailles, espacements, dimensions, etc.
2.1 Unités absolues
px(pixels)cm,mm,in(impression)
2.2 Unités relatives
%: relatif au parentem: relatif à la taille de la police actuellerem: relatif à la taille de la racine (html)vw,vh: % de la largeur ou hauteur de la fenêtre
h1 {
font-size: 2rem;
margin-bottom: 1em;
}
font-size: 2rem;
margin-bottom: 1em;
}
3. Le texte en CSS
On peut facilement personnaliser l'apparence du texte avec CSS.
3.1 Propriétés de police
font-family: police utiliséefont-size: taille du textefont-weight: gras (ex :normal,bold)font-style:italic,normal
p {
font-family: Arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
}
font-family: Arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
}
3.2 Alignement et style du texte
text-align:left,center,right,justifytext-transform:uppercase,lowercase,capitalizetext-decoration:none,underline,line-through
h2 {
text-transform: uppercase;
text-align: center;
text-decoration: underline;
}
text-transform: uppercase;
text-align: center;
text-decoration: underline;
}
4. Bonnes pratiques
- Utiliser des unités relatives pour la mise en page responsive
- Utiliser une police de secours :
font-family: 'Roboto', Arial, sans-serif - Contraster suffisamment le texte avec le fond pour l'accessibilité
5. À éviter
- Utiliser uniquement des pixels pour tout
- Choisir une police illisible ou trop fantaisie
- Oublier les variantes de taille pour le mobile
6. Exercice pratique
Objectif : Styliser un bloc de texte avec couleurs et unités adaptées.
Consignes :
- Créer un fichier HTML avec un titre et 2 paragraphes
- Utiliser une police personnalisée et une taille en
em - Colorer le fond du paragraphe avec une couleur claire
- Aligner le texte en
justify
Exemple de correction :
<style>
body {
font-family: 'Georgia', serif;
font-size: 1.1em;
}
h1 {
color: #6a0080;
text-align: center;
}
p {
background-color: #f7f0ff;
padding: 1em;
text-align: justify;
}
</style>
body {
font-family: 'Georgia', serif;
font-size: 1.1em;
}
h1 {
color: #6a0080;
text-align: center;
}
p {
background-color: #f7f0ff;
padding: 1em;
text-align: justify;
}
</style>
7. À retenir
- CSS permet un contrôle précis de l'apparence du texte
- Les couleurs peuvent être exprimées de plusieurs manières
- Les unités relatives facilitent le responsive design