Soit le code ci-contre d’une nouvelle page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>activité3</title>
</head>
<body>
<h1>Cours en ligne</h1>
<div>
<p>HTML</p>
<p>Java script</p>
<ul>
<li>structure conditionnelle</li>
<li>structure itérative</li>
</ul>
</div>
<p>Base de données</p>
<div>
<p>Système d'exploitation</p>
</div>
</body>
</html>
Ajouter du CSS pour avoir l’aperçu de la figure suivante:

Afficher la solution
/*code css*/
body {
background-color: lightBlue;
}
div {
/* couleur d'ecriture blanche */
color: white;
/* couleur d'arrière plan violet */
background-color: purple;
/* largeur de la balise div 80% de son parent (ici body) */
width: 80%;
/*centrer les div dans leur élément parent, 0 pour top et bottom, auto pour left et right*/
margin: 0 auto;
}