CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 2 · Exercice de TD
Une lettrine
Sélecteurs · niveau 2
Énoncé
Dans la page « Notre histoire » (un <article> : un titre <h1> puis deux paragraphes), donner au premier paragraphe une lettrine : première lettre en Georgia, trois fois plus grande, grasse, bleu nuit ; et mettre sa première ligne en petites capitales (font-variant: small-caps). Le second paragraphe ne doit pas changer.
Corrigé
body {
font-family: system-ui, sans-serif;
color: #222;
background-color: #faf8f5;
}
h1 {
font-family: Georgia, serif;
color: #1f3a68;
}
/* Seul le premier paragraphe qui suit le titre */
h1 + p::first-letter {
font-family: Georgia, serif;
font-size: 3em;
font-weight: bold;
color: #1f3a68;
}
h1 + p::first-line {
font-variant: small-caps;
letter-spacing: 0.05em;
}h1 + p ne désigne que le paragraphe qui suit le titre ; le second paragraphe suit un paragraphe et n'est pas concerné.
100 % gratuit
La suite du chapitre est sur Adloun
- 11 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.