Depuis le guide 3, mon-premier-site ne contient qu'un fichier index.html réduit à l'essentiel. Vous savez maintenant poser une question à l'Agent, lui donner du contexte, lire un diff et utiliser Tab. Ce guide rassemble ces compétences pour construire la vraie première version de ce site : une structure un peu plus complète, et une feuille de style.

L'état de départ

Ouvrez index.html et vérifiez son état actuel : le titre doit afficher « Bienvenue sur mon site », suite au guide 8. Le projet ne contient encore aucun fichier CSS.

Demander une structure un peu plus complète

Ouvrez le panneau Agent avec Ctrl+I, et formulez une demande qui applique toute la méthode vue jusqu'ici : fichier précis, résultat attendu, limite claire.

« Dans @index.html, ajoute sous le titre un court paragraphe de présentation, puis crée un nouveau fichier style.css avec une règle simple pour la couleur de fond de la page et une pour la couleur du titre. Relie ce fichier à index.html avec une balise link. Explique d'abord ton plan avant de l'appliquer. »

Cette demande touche deux fichiers à la fois, l'un existant et l'un à créer : c'est volontairement un peu plus ambitieux que les toutes petites tâches des guides précédents, mais elle reste précisément délimitée.

Lire le plan avant d'accepter quoi que ce soit

Puisque vous avez demandé un plan avant l'action, lisez-le entièrement avant de continuer. Il doit mentionner explicitement les deux fichiers concernés, index.html et style.css, et décrire ce qui va changer dans chacun. Si quelque chose vous semble aller au-delà de ce que vous avez demandé, dites-le avant de laisser l'Agent poursuivre.

Relire le diff sur les deux fichiers

Une fois le plan validé, Cursor propose généralement une revue distincte pour chaque fichier concerné. Passez en revue index.html en premier : le nouveau paragraphe doit apparaître sous le titre, sans qu'aucune autre ligne existante ne change. Passez ensuite en revue style.css, entièrement nouveau cette fois : toutes ses lignes doivent apparaître comme ajoutées, ce qui est normal pour un fichier qui vient d'être créé.

Vérifier que style.css est bien relié

Ouvrez index.html et repérez la balise <link> dans la section <head> : elle doit référencer style.css par son nom exact. Sans cette ligne, votre feuille de style existerait bien sur le disque, mais ne serait jamais appliquée par le navigateur.

Tester dans le navigateur

Ouvrez index.html dans un navigateur. Le fond de page et la couleur du titre doivent refléter les règles ajoutées dans style.css, et le nouveau paragraphe doit apparaître sous le titre. Si la couleur de fond n'apparaît pas, vérifiez en premier la balise link : c'est la cause la plus fréquente d'une feuille de style qui semble « ne rien faire ».

Bon réflexe

Pour une tâche qui touche plusieurs fichiers à la fois, demandez systématiquement un plan avant l'exécution, comme dans ce guide. Cela vous donne l'occasion de corriger une mauvaise interprétation avant qu'elle ne se traduise en modifications réelles sur plusieurs fichiers d'un coup.

Vérifiez que vous avez compris

Vous ouvrez index.html dans votre navigateur juste après avoir accepté les deux fichiers, mais la couleur de fond ne s'affiche pas. Le fichier style.css existe pourtant bien, avec la bonne règle dedans. Quelle est la première chose à vérifier ?

La présence et l'exactitude de la balise <link> dans index.html. Un fichier CSS qui existe sur le disque mais n'est pas correctement référencé depuis la page HTML n'aura strictement aucun effet visuel, même si son contenu est parfaitement correct.

Chapitre terminé