Exercice 5 : Styliser un article de blog 🎨

🎯 Objectif

Créer un article sur le thème Pokémon avec un style fun et coloré. Vous devrez analyser le HTML fourni et appliquer les styles demandés en trouvant vous-même les sélecteurs appropriés.

📄 Le HTML (à créer)

Créez le fichier index.html avec le contenu suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guide du Dresseur Pokémon</title>
</head>
<body>
    <article class="pokemon-guide">
        <header class="guide-header">
            <h1>Guide du Dresseur Pokémon</h1>
            <p class="intro">
                Bienvenue dans le monde merveilleux des Pokémon ! Ce guide vous aidera à devenir 
                le meilleur dresseur. Préparez vos Poké Balls et en route pour l'aventure !
            </p>
            <p class="author-info">
                Par <span class="author">Sacha Ketchum</span> • 
                <time datetime="2025-10-28">28 octobre 2025</time>
            </p>
        </header>

        <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png" 
             alt="Pikachu" 
             class="main-image">

        <div class="guide-content">
            <h2>Les types de Pokémon</h2>
            <p>Il existe 18 types différents de Pokémon, chacun avec ses forces et faiblesses. Comprendre ces types est essentiel pour devenir un bon dresseur et remporter des combats stratégiques. Chaque type possède des avantages contre certains types et des faiblesses face à d'autres, créant ainsi un système de combat profond et tactique qui fait la richesse de l'univers Pokémon.</p>

            <h3>Types les plus populaires</h3>
            <ul>
                <li><strong>Feu</strong> : Salamèche, Dracaufeu, Pyroli</li>
                <li><strong>Eau</strong> : Carapuce, Tortank, Aquali</li>
                <li><strong>Plante</strong> : Bulbizarre, Florizarre, Phyllali</li>
                <li><strong>Électrique</strong> : Pikachu, Raichu, Voltali</li>
            </ul>

            <p class="tip">
                💡 Conseil de pro : Gardez toujours une équipe équilibrée avec différents types 
                pour être prêt à affronter n'importe quel adversaire !
            </p>

            <h2>Les Pokémon de départ</h2>
            <p>Au début de votre aventure, vous devrez choisir votre premier Pokémon parmi trois options. Ce choix est crucial car votre Pokémon de départ vous accompagnera tout au long de votre périple et deviendra souvent votre partenaire le plus fidèle. Chaque région propose ses propres Pokémon de départ, mais le principe reste le même : un Pokémon de type Feu, un de type Eau et un de type Plante.</p>

            <h3>Kanto - Région classique</h3>
            <ol>
                <li><strong>Bulbizarre</strong> (Type Plante/Poison)</li>
                <li><strong>Salamèche</strong> (Type Feu)</li>
                <li><strong>Carapuce</strong> (Type Eau)</li>
            </ol>

            <div class="info-card">
                <h4>Le saviez-vous ?</h4>
                <p>Pikachu était initialement prévu pour évoluer en Raichu dans l'anime, mais il est resté sous sa forme de base pour rester mignon et populaire auprès des fans ! Cette décision a fait de Pikachu l'un des Pokémon les plus reconnaissables au monde et la véritable mascotte de la franchise.</p>
            </div>

            <h2>Stratégies de combat</h2>
            <p>Gagner des combats ne dépend pas seulement de la force brute de vos Pokémon, mais aussi de votre capacité à élaborer des stratégies efficaces. Un bon dresseur doit savoir anticiper les mouvements de son adversaire, connaître les faiblesses des types adverses, et utiliser les capacités de son équipe de manière optimale. La préparation avant le combat est tout aussi importante que les décisions prises pendant l'affrontement.</p>

            <ul class="strategy-list">
                <li>Connaître les faiblesses de vos adversaires</li>
                <li>Utiliser des objets au bon moment</li>
                <li>Entraîner votre équipe de manière équilibrée</li>
                <li>Apprendre les meilleures capacités</li>
            </ul>

            <h2>Ressources utiles</h2>
            <ul class="resources">
                <li><a href="#">Pokédex complet</a></li>
                <li><a href="#">Carte interactive des régions</a></li>
                <li><a href="#">Calculateur de types</a></li>
                <li><a href="#">Guide des évolutions</a></li>
            </ul>
        </div>

        <footer class="guide-footer">
            <p>
                Vous voilà prêt à débuter votre aventure ! N'oubliez jamais : l'important n'est 
                pas d'être le plus fort, mais de créer des liens avec vos Pokémon. 
                Bonne chance, futur Maître Pokémon ! ⚡
            </p>
            <p class="copyright">© 2025 - Guide du Dresseur Pokémon</p>
        </footer>
    </article>
</body>
</html>

🎨 Le CSS (à créer)

Créez le fichier css/style.css et complétez les consignes suivantes.

⚠️ Important :

Analysez bien le HTML pour identifier les éléments à styliser
Trouvez les bons sélecteurs (classes, descendants, enfants, pseudo-classes...)
Cherchez comment réaliser chaque effet demandé

📍 Étape 1 : Reset et base

1.1 Reset

Réinitialisez les marges et paddings de tous les éléments, et définissez un box-sizing cohérent.

1.2 Page

La page doit avoir :
- Une police moderne et lisible
- Une hauteur de ligne confortable (environ 1.6)
- Un fond jaune très clair (#FFF9E6)
- Une couleur de texte sombre

1.3 Titres

Tous les titres (h1, h2, h3, h4) doivent avoir une couleur rouge vif (#CC0000) et être en gras.

Définissez des tailles appropriées pour chaque niveau.

1.4 Autres éléments

Les paragraphes doivent avoir un espacement en dessous
Les liens doivent être bleus (#3B4CCA), sans soulignement, et changer de couleur au survol (rouge #CC0000)
Les listes doivent avoir un décalage et un espacement
Les éléments <strong> doivent être en gras et rouges

📍 Étape 2 : Container principal

Le container principal de l'article doit :

Avoir une largeur maximale raisonnable (environ 900px)
Être centré horizontalement sur la page
Avoir un fond blanc qui contraste avec la page
Avoir un padding généreux à l'intérieur
Avoir des coins arrondis
Avoir une ombre portée pour créer de la profondeur
Avoir une bordure épaisse jaune vif (#FFCB05)

💡 Question : Quel sélecteur utiliser pour cibler ce container ?

📍 Étape 3 : En-tête de l'article

3.1 Zone d'en-tête

L'en-tête de l'article doit avoir un style particulier :

Un fond avec un dégradé rouge (de #CC0000 vers #FF6B6B)
Du texte blanc
Un padding confortable
Des coins arrondis
Une ombre pour le détacher du reste

3.2 Titre dans l'en-tête

Le titre h1 qui se trouve dans l'en-tête doit :

Être blanc (pour surcharger le rouge de base)
Être centré
Avoir une ombre de texte pour créer de la profondeur

💡 Défi : Comment appliquer un style au h1 uniquement quand il est dans l'en-tête ?

3.3 Paragraphe d'introduction

Le paragraphe d'introduction dans l'en-tête doit être légèrement plus grand que les paragraphes normaux

3.4 Informations auteur

Les informations sur l'auteur doivent :

Être plus petites (environ 14px)
Être centrées
Avoir une bordure en haut
Être légèrement espacées du reste

Le nom de l'auteur lui-même doit avoir un fond semi-transparent arrondi.

📍 Étape 4 : Image principale

L'image principale doit :
- Prendre toute la largeur disponible
- Garder ses proportions
- Avoir des coins arrondis
- Avoir une bordure jaune
- Avoir un espacement en dessous

📍 Étape 5 : Contenu de l'article

5.1 Titres h2 dans le contenu

Les titres h2 qui sont dans le contenu de l'article (pas dans l'en-tête ou le footer) doivent avoir :

Une bordure épaisse à gauche, jaune
Un padding à gauche
Un fond qui s'estompe de gauche à droite (du jaune clair vers transparent)

💡 Défi : Comment cibler les h2 uniquement dans le contenu, pas ailleurs ?

5.2 Paragraphes dans le contenu

Les paragraphes qui sont dans le contenu doivent être justifiés et avoir une couleur légèrement plus claire que le noir pur.

5.3 Encadré "Conseil"

L'encadré de conseil doit se démarquer visuellement :

Fond bleu clair (#E8F8FF)
Bordure bleue épaisse (#3B4CCA)
Coins arrondis
Padding généreux
Style italique
Ombre légère

5.4 Encadré "Le saviez-vous ?"

L'encadré "Le saviez-vous ?" doit avoir :

Un fond jaune pâle (#FFF3CD)
Une bordure pointillée jaune (#FFCB05)
Des coins arrondis
Du padding

Le titre h4 dans cet encadré doit être orange (#FF6B00).

💡 Défi : Comment cibler uniquement le h4 qui est dans cet encadré ?

5.5 Liste de stratégies

La liste de stratégies doit :

Avoir un fond gris clair
Une bordure rouge à gauche
Du padding
Des coins arrondis

5.6 Liste de ressources

La liste de ressources doit :

Avoir un fond vert clair (#E8F5E9)
Une bordure verte (#4CAF50)
Avoir les puces de liste supprimées
Avoir des bordures entre chaque élément (mais pas après le dernier)

Les liens dans cette liste doivent avoir un effet au survol (changement de couleur + léger décalage vers la droite).

💡 Défi : Comment enlever la bordure uniquement pour le dernier élément de la liste ?

5.7 Premier paragraphe du contenu

Le tout premier paragraphe du contenu (juste après l'image) doit être légèrement plus gros et plus foncé pour attirer l'attention.

💡 Défi : Comment cibler uniquement le premier paragraphe enfant direct du contenu ?

📍 Étape 6 : Pied de page

6.1 Zone de pied de page

Le pied de page de l'article doit :
- Avoir un fond avec un dégradé bleu (de #3B4CCA vers #5C6FD8)
- Du texte blanc
- Du padding
- Des coins arrondis
- Une ombre
- Être centré

6.2 Paragraphe de conclusion

Appliquer un style identique à la phrase d'introduction presente dans l'en-tête sans écrire plus de CSS.

💡 Défi : Trouver une solution technique pour mettre en place le style sur le paragraphe de conclusion

6.3 Copyright

Le texte de copyright doit être plus petit et légèrement transparent.

📍 Étape 7 : Touches finales

7.1 Effets sur les listes

Le premier élément de chaque liste <ul> dans le contenu doit être en gras et rouge
Les éléments impairs des listes <ol> dans le contenu doivent avoir un fond jaune clair

💡 Défi : Quelles pseudo-classes utiliser ?

7.2 Transitions

Ajoutez des transitions douces (0.3s) sur :
- Les liens lors du survol
- Les liens de la liste de ressources

🎨 Palette de couleurs

Utilisez ces couleurs pour rester cohérent :

Rouge Pokémon : #CC0000
Jaune Pokémon : #FFCB05
Bleu Pokémon : #3B4CCA
Fond page : #FFF9E6
Gris texte : #555
Vert : #4CAF50
Orange : #FF6B00
Bleu clair : #E8F8FF
Jaune clair : #FFF3CD

💡 Indices et questions pour vous guider

Comment centrer le container ?

Recherchez "centrer un div horizontalement CSS" - vous devrez jouer avec les marges.

Comment faire un dégradé ?

Recherchez "CSS linear-gradient" - attention à la syntaxe.

Comment cibler un élément dans un autre ?

Utilisez les sélecteurs descendants (espace) ou enfants directs (>). Quelle est la différence ?

Comment enlever les puces d'une liste ?

Recherchez la propriété list-style.

Comment cibler le dernier élément ?

Utilisez une pseudo-classe. Recherchez "CSS last-child".

Comment faire une bordure pointillée ?

Recherchez "CSS dashed border".

Comment faire une ombre ?

Recherchez "CSS box-shadow" pour les boîtes et "text-shadow" pour le texte.

Comment réutiliser un style ?

Si deux éléments doivent avoir le même style, donnez-leur la même classe dans le HTML !

🐛 Aide au débogage

Mon CSS ne s'applique pas

Avez-vous ajouté la balise <link> dans le HTML ?
Le chemin vers le fichier CSS est-il correct ?
Avez-vous sauvegardé les deux fichiers ?
Essayez de vider le cache (Ctrl+F5)

Mon sélecteur ne fonctionne pas

Utilisez F12 pour inspecter l'élément
Vérifiez l'orthographe des classes (avec ou sans le point . ?)
Votre sélecteur est-il assez spécifique ?
Y a-t-il un conflit avec un autre style ?

L'image ne s'affiche pas

Vérifiez votre connexion Internet (l'image vient d'une API externe)
Copiez-collez l'URL dans votre navigateur pour tester

Je ne sais pas comment faire X

Relisez le cours
Cherchez sur MDN ou Google
Utilisez F12 pour voir comment d'autres sites le font
Demandez de l'aide à vos camarades ou à l'enseignant

🎯 Compétences développées

Cet exercice vous permet de travailler :

✅ Analyse : Comprendre la structure HTML
✅ Recherche : Trouver les propriétés CSS appropriées
✅ Sélecteurs : Classes, descendants, enfants, pseudo-classes
✅ Box Model : Padding, margin, border
✅ Centrage : Techniques pour centrer des éléments
✅ Héritage : Comprendre comment les styles se propagent
✅ Surcharge : Modifier des styles hérités
✅ Réutilisation : Utiliser la même classe pour plusieurs éléments
✅ Organisation : Structurer son CSS proprement
✅ Autonomie : Résoudre des problèmes par la recherche

Bon courage, futur Maître CSS ! ⚡🎮