Close
Exercice 1 : Appliquer des Styles de Base
Exercice 2 : Utiliser des Classes pour Styliser
Exercice 3 : Styliser des Listes
Exercice 4 : Créer une Mise en Page avec Flexbox
Exercice 5 : Utiliser le Positionnement CSS
Exercice 6 : Créer des Boutons Stylisés
Exercice 7 : Créer un Menu de Navigation Horizontal
Exercice 8 : Utiliser des Sélecteurs Combinés
Objectif : Apprendre à appliquer des styles de base à des éléments HTML.
Consigne : Créez une page HTML avec un titre, un paragraphe, et appliquez les styles suivants :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Styles de Base</title>
</head>
<body>
<h1>Titre Rouge</h1>
<p>Ce paragraphe est en bleu avec une taille de police de 18px.</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
font-size: 18px;
}h1 et p ciblent respectivement le titre et le paragraphe, et les styles sont appliqués directement via les propriétés CSS. Objectif : Apprendre à utiliser des classes pour appliquer des styles à plusieurs éléments.
Consigne : Créez deux paragraphes et appliquez une classe qui change leur couleur de fond en jaune et leur couleur de texte en noir.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Classes CSS</title>
</head>
<body>
<p class="highlight">Premier paragraphe avec un fond jaune.</p>
<p class="highlight">Deuxième paragraphe avec un fond jaune.</p>
</body>
</html>
.highlight {
background-color: yellow;
color: black;
}.highlight est utilisée pour styliser les paragraphes avec un fond jaune et un texte noir.background-color: yellow; applique un fond jaune.color: black; rend le texte noir.
.highlight sur plusieurs éléments (dans ce cas, deux paragraphes) peuvent partager les mêmes styles, ce qui permet une gestion plus centralisée et réutilisable des styles. Objectif : Apprendre à styliser des listes HTML.
Consigne : Créez une liste non ordonnée et appliquez les styles suivants :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Styliser une Liste</title>
</head>
<body>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
ul {
list-style-type: disc;
list-style-position: inside;
color: green;
font-family: Arial, sans-serif;
}ul : Cible les éléments de liste non ordonnée <ul>.list-style-type: disc; définit le style des puces (ici, des disques pleins).list-style-position: inside; fait en sorte que les puces soient à l’intérieur du cadre du texte.color: green; applique une couleur verte au texte des éléments de la liste.font-family: Arial, sans-serif; utilise la police Arial pour le texte de la liste. Objectif : Apprendre les bases de Flexbox pour aligner des éléments.
Consigne : Créez trois div dans un conteneur, et utilisez Flexbox pour les aligner horizontalement avec un espacement égal entre eux.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mise en Page avec Flexbox</title>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}Classe .container :
.box) de manière horizontale.display: flex; active le modèle Flexbox.justify-content: space-between; répartit les boîtes uniformément avec un espace égal entre elles.
Classe .box :
width: 100px; height: 100px; fixe la taille de chaque boîte à 100×100 pixels.background-color: lightblue; colore le fond des boîtes en bleu clair.text-align: center; centre le texte horizontalement.line-height: 100px; centre le texte verticalement en utilisant la hauteur de ligne égale à la hauteur de la boîte. Objectif : Apprendre les différents types de positionnement CSS.
Consigne : Créez une div et placez-la absolument dans le coin inférieur droit de la page.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Positionnement CSS</title>
</head>
<body>
<div class="positioned-box">Box Positionnée</div>
</body>
</html>
.positioned-box {
width: 150px;
height: 150px;
background-color: coral;
position: absolute;
bottom: 0;
right: 0;
}position: absolute; permet de positionner l’élément en dehors du flux normal du document.bottom: 0; right: 0; place la boîte dans le coin inférieur droit de son conteneur parent (ou de la fenêtre si aucun parent n’est positionné).width: 150px; height: 150px; définit la taille de la boîte à 150×150 pixels.background-color: coral; applique une couleur de fond corail. Objectif : Apprendre à styliser des boutons avec CSS.
Consigne : Créez un bouton et appliquez les styles suivants :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Boutons Stylisés</title>
</head>
<body>
<button class="btn">Cliquez-moi</button>
</body>
</html>
.btn {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: green;
}Classe .btn :
background-color: blue; applique un fond bleu au bouton.color: white; rend le texte du bouton blanc.padding: 10px 20px; ajoute un espacement interne (10 pixels en haut et en bas, 20 pixels à gauche et à droite).border: none; retire toute bordure autour du bouton.cursor: pointer; change le curseur en une main lorsqu’on survole le bouton, indiquant qu’il est cliquable.
Pseudo-classe :hover :
background-color: green; change la couleur de fond en vert lorsque l’utilisateur passe la souris sur le bouton. Objectif : Apprendre à créer un menu de navigation horizontal.
Consigne : Créez un menu de navigation horizontal avec trois liens. Chaque lien doit être stylisé avec un padding et une couleur de fond différente.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu de Navigation</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
nav ul li {
margin: 0;
}
nav ul li a {
display: block;
padding: 10px 20px;
color: white;
text-decoration: none;
background-color: #444;
}
nav ul li a:hover {
background-color: #555;
}Sélecteur nav ul :
list-style-type: none; supprime les puces par défaut des éléments de la liste.padding: 0; margin: 0; retire les marges et les espacements internes pour permettre un alignement parfait.display: flex; transforme la liste en une rangée horizontale.
Sélecteur nav ul li a :
display: block; fait en sorte que les liens soient traités comme des blocs, occupant toute la zone de leur conteneur.padding: 10px 20px; ajoute de l’espacement autour du texte pour une meilleure lisibilité.color: white; rend le texte des liens blanc.text-decoration: none; supprime le soulignement par défaut des liens.background-color: #444; applique un fond gris foncé aux liens.
Pseudo-classe :hover :
background-color: #555; assombrit le fond des liens lorsque l’utilisateur passe la souris dessus. Objectif : Apprendre à utiliser des sélecteurs CSS combinés pour styliser des éléments spécifiques.
Consigne : Créez trois paragraphes et appliquez les styles suivants :
div doivent avoir une bordure.<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sélecteurs Combinés</title>
</head>
<body>
<p>Premier paragraphe rouge.</p>
<div>
<p>Paragraphe avec une bordure.</p>
<p>Dernier paragraphe vert.</p>
</div>
</body>
</html>
p:first-of-type {
color: red;
}
p:last-of-type {
color: green;
}
div > p {
border: 1px solid black;
padding: 10px;
} Pseudo-classe :first-of-type :
p:first-of-type cible le premier paragraphe dans son conteneur et le colore en rouge.
Pseudo-classe :last-of-type :
p:last-of-type cible le dernier paragraphe dans son conteneur et le colore en vert.
Sélecteur div > p :
div et leur applique une bordure noire avec un padding de 10 pixels. Objectif : Apprendre à styliser des tableaux en CSS.
Consigne : Créez un tableau avec trois colonnes et deux lignes. Appliquez les styles suivants :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau Stylisé</title>
</head>
<body>
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
<th>En-tête 3</th>
</tr>
<tr>
<td>Données 1</td>
<td>Données 2</td>
<td>Données 3</td>
</tr>
</table>
</body>
</html>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: lightgray;
}Sélecteur table :
width: 100%; fait en sorte que le tableau occupe toute la largeur de son conteneur.border-collapse: collapse; fusionne les bordures adjacentes des cellules pour une apparence plus nette.
Sélecteur th, td :
border: 1px solid black; ajoute une bordure noire autour des cellules.padding: 10px; ajoute un espacement interne pour rendre le texte plus lisible.
Sélecteur th :
background-color: lightgray; applique un fond gris clair aux en-têtes du tableau. Objectif : Apprendre à utiliser CSS Grid pour créer des mises en page complexes.
Consigne : Créez une carte de profil avec une image, un nom, et une description. Utilisez CSS Grid pour structurer la carte.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Carte de Profil avec CSS Grid</title>
</head>
<body>
<div class="profile-card">
<img src="profile.jpg" alt="Photo de profil">
<div class="info">
<h2>John Doe</h2>
<p>Développeur Web</p>
</div>
</div>
</body>
</html>
.profile-card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
width: 400px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}
.profile-card img {
width: 100%;
border-radius: 50%;
}
.profile-card .info {
display: flex;
flex-direction: column;
justify-content: center;
}
.profile-card h2 {
margin: 0;
font-size: 24px;
color: #333;
}
.profile-card p {
margin: 5px 0 0;
color: #777;
}Classe .profile-card :
display: grid; grid-template-columns: 1fr 2fr; crée une grille avec deux colonnes : une pour l’image et une pour les informations. La colonne de l’image occupe 1 part, tandis que celle des informations en occupe 2.gap: 10px; ajoute un espace de 10 pixels entre les colonnes.width: 400px; fixe la largeur totale de la carte à 400 pixels.padding: 20px; ajoute un espacement interne de 20 pixels tout autour de la carte.border: 1px solid #ccc; applique une bordure grise claire autour de la carte.box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1); ajoute une ombre portée légère pour donner un effet de profondeur.
Classe .profile-card img :
width: 100%; fait en sorte que l’image occupe toute la largeur de sa colonne.border-radius: 50%; applique un effet de bordure arrondie pour que l’image devienne circulaire.
Classe .profile-card .info :
display: flex; flex-direction: column; justify-content: center; utilise Flexbox pour centrer verticalement les éléments textuels dans la colonne d’informations.
Classe .profile-card h2 :
margin: 0; font-size: 24px; color: #333; enlève les marges par défaut, augmente la taille de la police et applique une couleur gris foncé au titre.
Classe .profile-card p :
margin: 5px 0 0; color: #777; réduit les marges au-dessus du paragraphe et applique une couleur gris moyen. 