Un peu de CSS (Cascading Style Sheets)¶
Le CSS permet de styliser les pages HTML : couleurs, polices, marges, bordures, disposition, etc. Il sépare la structure (HTML) de la présentation (CSS), ce qui facilite la maintenance et la réutilisation des styles.
Il n’y a rien à installer. Le CSS est assimilable à un fichier texte.
Exemple simple de style intégré :¶
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p>Voici un paragraphe stylisé avec du CSS.</p>
</body>
</html>Exercice¶
Solution to Exercise 1 #
Fichier produit.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fiche produit</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Fiche produit</h1>
<img src="https://via.placeholder.com/200" alt="Produit" class="produit-img">
<p class="nom">Nom : Montre connectée</p>
<p class="description">Une montre élégante avec suivi de santé, notifications et autonomie longue durée.</p>
<p class="prix">Prix : 129,99 €</p>
</div>
</body>
</html>Fichier style.css :
body {
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
text-align: center;
}
.container {
margin-top: 50px;
}
h1 {
color: #2c3e50;
}
.produit-img {
width: 200px;
transition: transform 0.3s, box-shadow 0.3s;
}
.produit-img:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.nom, .description, .prix {
font-size: 18px;
margin: 10px 0;
}
.prix {
font-weight: bold;
color: #27ae60;
}