Historique des conversations
Chargement...
Chapitre 4 : Styliser le texte
1. Modifier la police (font-family)
On peut appliquer une ou plusieurs polices à un texte avec font-family.
body {
font-family: Arial, Helvetica, sans-serif;
}Il est recommandé d’indiquer une ou deux polices alternatives au cas où la première ne serait pas disponible.
2. Taille du texte (font-size)
Tu peux utiliser différentes unités comme px, em ou rem :
h1 {
font-size: 32px;
}
p {
font-size: 1.2em;
}3. Gras, italique, majuscule
font-weight: épaisseur (ex:normal,bold, ou400,700)font-style:normalouitalictext-transform:uppercase,lowercase,capitalize
strong {
font-weight: bold;
}
em {
font-style: italic;
}
h2 {
text-transform: uppercase;
}4. Couleur et alignement du texte
p {
color: #333;
text-align: justify;
}text-align peut prendre les valeurs : left, right, center, justify.
5. Espacement entre lettres, lignes, mots
line-height: hauteur de ligneletter-spacing: espacement entre lettresword-spacing: espacement entre mots
p {
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
}6. Décoration et ombres
text-decoration:none,underline,line-through, etc.text-shadow: ajouter une ombre au texte
a {
text-decoration: none;
}
h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}Conclusion
Tu sais maintenant comment styliser un texte de manière professionnelle avec CSS. Ces propriétés sont essentielles pour rendre ton site agréable à lire et à parcourir. Dans le prochain chapitre, nous verrons comment gérer les boîtes CSS : marges, bordures, espacements…
Évaluation des acquis
Correction immédiate
Quiz du chapitre 4
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Alignement du texte
Atelier #1Centre tout le texte à l'intérieur d'un <div>.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
div {
text-align: center;
}
#2 — Décoration de texte
Atelier #2Enlève le soulignement par défaut des liens <a>.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
a {
text-decoration: none;
}
#3 — Transformation de texte
Atelier #3Affiche tous les titres <h2> en majuscules.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
h2 {
text-transform: uppercase;
}
#4 — Espacement des lignes
Atelier #4Donne un interligne de 1.6 à tes paragraphes.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
p {
line-height: 1.6;
}
#5 — Famille de polices
Atelier #5Utilise la police 'Arial' ou à défaut 'sans-serif' pour le body.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
body {
font-family: Arial, sans-serif;
}