10.3: CSS: exercice
On veut obtenir l'affichage suivant:
en utilisant le HTML suivant.
<!DOCTYPE html>
<html>
<head>
<title>Premiers pas CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="essai3.css">
</head>
<body>
<h1>Un essai avec des styles</h1>
<h2>Titre de la 1ere section</h2>
<p>bla bla bla bla bla</p>
<h2>Titre de la 2eme section</h2>
<p>bli bli bli bli bli</p>
<h2>Titre de la 3eme section</h2>
<p>Qu'est qu'on s'amuse!</p>
<h2>Titre de la 4eme section</h2>
<p>abc def ghi jkl mno</p>
</body>
</html>
Copiez cet HTML dans un fichier, sans le modifier et écrivez le fichier essai3.css pour obtenir EXACTEMENT l'affichage souhaité.
Indications:
Faites particulièrement attention aux espacements (padding, margin).
Les éléments "block" (h1,h2,p,...) couvrent, par défaut, une ligne horizontale entière. Par défaut, ça ne se voit pas, mais ça devient visible quant vous ajoutez une bordure. Pour les titres h2, imposez une largeur (width) de 20em (20 fois la taille d'une lettre "M").
Rappel:
