Aller au contenu

Correction des exercices - CSS

Exercice 1 : Premiers styles

Fichier style.css :

/* Couleur de fond de la page */
body {
    background-color: #f0f0f0;
}

/* Titres h1 en bleu et centrés */
h1 {
    color: blue;
    text-align: center;
}

/* Paragraphes en Arial, taille 16px */
p {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

Fichier HTML associé :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice 1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Mon titre principal</h1>
    <p>Ceci est un paragraphe de texte pour tester mes premiers styles CSS.</p>
    <p>Voici un deuxième paragraphe.</p>
</body>
</html>

Points importants : - #f0f0f0 est un gris très clair en hexadécimal - sans-serif est une police de secours si Arial n'est pas disponible - Les commentaires en CSS s'écrivent entre /* et */

Exercice 2 : Les classes

/* Classe pour texte important */
.important {
    color: red;
    font-weight: bold;
}

/* Classe pour encadrer un élément */
.encadre {
    border: 2px solid black;
    padding: 10px;
}

/* Classe pour coins arrondis */
.arrondi {
    border-radius: 15px;
}

Exemple d'utilisation en HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="important">Ce texte est important !</p>

    <p class="encadre">Ce texte est encadré.</p>

    <p class="encadre arrondi">Ce texte est encadré avec des coins arrondis.</p>

    <div class="important encadre arrondi">
        On peut combiner plusieurs classes sur un même élément !
    </div>
</body>
</html>

Points importants : - Les classes commencent par un point . en CSS - On peut appliquer plusieurs classes à un élément en les séparant par des espaces - font-weight: bold met le texte en gras - padding ajoute un espace intérieur entre le contenu et la bordure

Exercice 3 : Navigation

Fichier style.css :

/* Reset des marges par défaut de la liste */
nav ul {
    list-style: none;      /* Supprime les puces */
    margin: 0;
    padding: 0;
    display: flex;         /* Affichage horizontal */
    background-color: #333;
}

/* Style des éléments de liste */
nav li {
    margin: 0;
}

/* Style des liens */
nav a {
    display: block;
    color: white;
    text-decoration: none;  /* Supprime le soulignement */
    padding: 15px 20px;
}

/* Effet au survol */
nav a:hover {
    background-color: #555;
    color: #ffd700;         /* Couleur dorée */
}

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="produits.html">Produits</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Points importants : - list-style: none supprime les puces de la liste - display: flex sur le <ul> met les <li> en ligne - display: block sur les liens permet d'appliquer padding correctement - :hover est une pseudo-classe qui s'active au survol de la souris

Exercice 4 : Carte de présentation

Fichier style.css :

/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

/* Style de la carte */
.carte {
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;  /* Pour que l'image respecte le border-radius */
}

/* Image dans la carte */
.carte img {
    width: 100%;
    height: 200px;
    object-fit: cover;  /* L'image remplit l'espace sans déformation */
}

/* Contenu de la carte */
.carte-contenu {
    padding: 15px;
}

.carte-contenu h2 {
    color: #333;
    margin-bottom: 10px;
}

.carte-contenu p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Bouton stylisé */
.bouton {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.bouton:hover {
    background-color: #0056b3;
}

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Carte de présentation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="carte">
        <img src="photo.jpg" alt="Photo de profil">
        <div class="carte-contenu">
            <h2>Jean Dupont</h2>
            <p>
                Développeur web passionné par les nouvelles technologies.
                J'aime créer des sites web modernes et accessibles.
            </p>
            <a href="#" class="bouton">En savoir plus</a>
        </div>
    </div>
</body>
</html>

Points importants : - box-shadow crée une ombre (décalage-X, décalage-Y, flou, couleur) - rgba(0, 0, 0, 0.2) est du noir avec 20% d'opacité - overflow: hidden cache ce qui dépasse (ici, les coins de l'image) - object-fit: cover permet à l'image de remplir son conteneur sans déformation - cursor: pointer change le curseur en main sur le bouton

Exercice 5 : Centrage Flexbox

Fichier style.css :

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Le body prend toute la hauteur de l'écran */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;  /* Centrage horizontal */
    align-items: center;      /* Centrage vertical */
    background-color: #2c3e50;
}

/* L'élément à centrer */
.boite {
    background-color: #3498db;
    color: white;
    padding: 40px 60px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Centrage Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="boite">
        Je suis parfaitement centré !
    </div>
</body>
</html>

Points importants : - min-height: 100vh fait que le body prend au minimum toute la hauteur de la fenêtre - vh signifie "viewport height" (1vh = 1% de la hauteur de la fenêtre) - display: flex active le mode Flexbox - justify-content: center centre sur l'axe principal (horizontal par défaut) - align-items: center centre sur l'axe secondaire (vertical par défaut)

Exercice 6 : Mise en page complète

Fichier style.css :

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* ============= HEADER ============= */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    z-index: 1000;  /* S'assure que le header est au-dessus */
}

header h1 {
    display: inline-block;
    font-size: 24px;
}

/* ============= NAVIGATION ============= */
nav {
    background-color: #34495e;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 25px;
}

nav a:hover {
    background-color: #2c3e50;
}

/* ============= CONTENU PRINCIPAL ============= */
.conteneur {
    display: flex;
    margin-top: 120px;  /* Espace pour header + nav fixes */
    min-height: calc(100vh - 120px - 60px);  /* Hauteur moins header et footer */
}

/* Contenu principal (70%) */
main {
    flex: 7;  /* 70% de l'espace */
    padding: 20px;
    background-color: #fff;
}

main h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

main p {
    margin-bottom: 15px;
}

/* Barre latérale (30%) */
aside {
    flex: 3;  /* 30% de l'espace */
    padding: 20px;
    background-color: #ecf0f1;
    border-left: 1px solid #bdc3c7;
}

aside h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}

aside ul {
    list-style: none;
}

aside li {
    margin-bottom: 10px;
}

aside a {
    color: #3498db;
    text-decoration: none;
}

aside a:hover {
    text-decoration: underline;
}

/* ============= FOOTER ============= */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
    height: 60px;
}

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mise en page complète</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mon Site Web</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Projets</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <div class="conteneur">
        <main>
            <h2>Bienvenue sur mon site</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
            </p>

            <h2>Mes projets récents</h2>
            <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.
            </p>
        </main>

        <aside>
            <h3>Liens utiles</h3>
            <ul>
                <li><a href="#">Documentation</a></li>
                <li><a href="#">Tutoriels</a></li>
                <li><a href="#">Ressources</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>

            <h3>Catégories</h3>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Python</a></li>
            </ul>
        </aside>
    </div>

    <footer>
        <p>&copy; 2024 - Mon Site Web - Tous droits réservés</p>
    </footer>
</body>
</html>

Points importants : - position: fixed fixe le header en haut de la page - z-index contrôle l'ordre d'empilement (plus grand = au-dessus) - flex: 7 et flex: 3 créent une proportion 70/30 - calc() permet de faire des calculs (ex: 100vh - 120px) - margin-top sur le conteneur compense la hauteur du header fixe

Auteur : Florian Mathieu

Licence CC BY NC

Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.