Et si vous mettiez du CSS dans vos géocaches ?

Vous avez une idée pour une nouvelle géocache ! Vous allumez votre ordinateur, vous vous connectez à Geocaching.com, vous entrez votre texte de description et… il ne manquerait pas quelque chose ?

Mais oui, un peu de couleur. Vous ajoutez donc deux smileys « sourire », un gros texte rouge pétant, et le tour est joué ! Bravo, vous avez maintenant un descriptif un peu moins terne !

OK, mais si vous faisiez autrement ? Si votre descriptif prenait l’apparence d’une conversation par SMS, d’un terminal de hacker, d’un tableau d’aéroport ou d’un décor de jeu vidéo ?

Vous allez me dire que tout cela peut se faire avec une image. Certes. Mais ici, nous allons le faire avec classe : nous allons le faire avec du CSS. Et non, ce n’est pas un gros mot.

Le résultat : une description mise en scène, avec du vrai texte que vos visiteurs peuvent toujours sélectionner et copier. Et je vous ai préparé un petit « atelier » avec une cinquantaine de bases que vous pouvez adapter sans rien connaître à la programmation. Accéder directement à l’atelier CSS →

Avant les explications techniques, on parle de quoi ?

Vous pouvez transformer votre listing en BD :

Ou donner à votre listing une enseigne au néon :

Ou transformer votre listing en explorateur de fichiers :

Dans tous ces cas, les phrases sont du texte, pas des lettres dessinées dans une image. Vous pouvez les remplacer par votre histoire, votre consigne ou votre énigme. Le tout sans image à héberger.

Ces trois ambiances donnent une idée du principe. On peut aussi jouer avec une ambiance de Noël, un billet de train ou un terminal d’ordinateur. Le décor change ; le texte reste utilisable.

Vous voulez surtout voir les résultats et les utiliser ? Choisissez un modèle dans l’atelier, adaptez votre texte et récupérez le code à coller dans votre description. Aucune connaissance en programmation nécessaire pour commencer.

Attention, il est fortement recommandé d’utiliser un ordinateur ou une tablette pour l’atelier. A défaut utilisez votre téléphone en mode paysage. Sinon, du fait des contraintes de WordPress sur téléphone, les graphismes de certains modèles vont être décalés.

Choisir un modèle dans l’atelier CSS →

Vous préférez comprendre comment cela fonctionne ? Ouvrons le capot ensemble.

Ajouter facilement un modèle à votre description

Pour commencer, voici le trajet le plus court entre « c’est joli » et « c’est dans ma cache » :

1 — Choisissez un modèle dans l’atelier et adaptez son texte et sa forme à votre géocache.

2 — Copiez le code du résultat avec « Copier le HTML », ou sauvegardez-le avec « Télécharger en .html ». Pour reprendre la personnalisation plus tard ou sur un autre appareil, utilisez aussi « Enregistrer mes réglages (.json) ». Le fichier .html conserve le résultat ; le fichier .json permet de recharger vos réglages dans l’atelier.

3 — Sur Geocaching.com, créez une nouvelle géocache ou modifiez la description d’une cache existante. Cliquez sur « Source » et collez le code à l’endroit voulu. Avant de remplacer une description existante, gardez une copie de son code.

4 — Enregistrez, puis vérifiez la description sur Geocaching.com, sur ordinateur puis sur téléphone. Dans l’application officielle, regardez aussi la vue web de la description.

L’aperçu de l’atelier montre le rendu dans votre navigateur, pas le résultat du traitement de Geocaching.com. Vérifiez toujours la description après enregistrement sur le site.

Si vous collez le code dans la vue habituelle de l’éditeur, vous risquez de voir les instructions s’afficher comme du texte. Un terminal couvert de balises, c’est très « hacker », mais ce n’était pas tout à fait le projet.

Et voilà, ce n’est pas compliqué ! Vous pouvez vous arrêter là, mais je vous encourage tout de même à lire la suite. Elle vous aidera à comprendre les modèles, à les modifier plus finement et à savoir pourquoi certaines idées fonctionnent… et d’autres beaucoup moins.

Créer votre modèle avec une IA

Vous avez une idée de décor bien à vous ? Copiez ce prompt dans votre assistant IA, puis décrivez votre ambiance et ajoutez votre texte. Il rassemble les contraintes et les techniques testées.

Voir et personnaliser le prompt

Adaptez les champs entre crochets ici, ou après collage dans votre IA. Tu m’aides à créer une description de géocache pour Geocaching.com, en français, sous forme d’un fragment HTML avec CSS en ligne. Je débute : je veux un résultat lisible, facile à modifier et prêt à coller dans le mode Source de l’éditeur. MON PROJET – Ambiance ou objet à imiter : [ex. conversation SMS, carnet d’explorateur, terminal rétro…] – Titre de la cache : [à compléter] – Texte, consignes et indices à mettre en scène : [coller mon texte ici] – Couleurs et préférences : [à compléter, ou laisse-moi une proposition] – Modèle de départ facultatif : [coller son HTML si j’en ai un] Si les champs indispensables sont encore vides, pose au maximum trois questions courtes avant de produire le code. Si je fournis un modèle, conserve sa structure et adapte-le sans réinventer inutilement son montage. PRÉSERVER MON CONTENU Conserve exactement les coordonnées, nombres, codes, lettres et indices fournis. Ne résous pas l’énigme et n’invente ni coordonnées réelles, ni informations d’accès ou de sécurité. Demande mon accord avant de modifier un texte dont la formulation peut participer à l’énigme. Pour un contenu manquant, utilise un repère explicite entre crochets. CONTRAINTES POUR LE HTML PRODUIT 1. Fournis seulement le fragment de description : pas de document complet avec html, head ou body. Utilise des éléments simples (div, p, span, br, listes, tableaux si nécessaires). 2. Tous les styles doivent être dans les attributs style, délimités par des guillemets doubles. Aucun JavaScript, gestionnaire d’événement, script, iframe, formulaire, feuille de style externe ou bloc style. N’utilise pas de bibliothèque, de police à télécharger ni de ressource externe. 3. N’ajoute pas de fichier image ni de fond avec background-image:url(…). Construis le décor avec les couleurs, bordures, dégradés et ombres. 4. Évite toute apostrophe ou guillemet simple dans la valeur d’un attribut style : cela a fait perdre toute sa mise en forme à l’élément dans les essais Geocaching.com. Choisis des polices courantes sans guillemets internes, par exemple font-family:Trebuchet MS,Arial,sans-serif; ou font-family:Georgia,Times New Roman,serif;. Garde les guillemets doubles autour de style. Les apostrophes du texte français sont autorisées. 5. Privilégie le placement naturel des blocs. Pour les alignements précis qui l’exigent, des tableaux HTML simples sont possibles. Pour cette version prudente, évite flex, grid, float, position:absolute/fixed, ancres internes, infobulles title, détails dépliables et tracés ASCII dont l’alignement doit être exact. 6. Le décor doit rester statique : aucune animation, transition ou interaction programmée. Si tu représentes des touches, un écran ou un clavier, ils sont décoratifs. PALETTE OBSERVÉE DANS LES ESSAIS Couleurs et fonds explicites, padding, margin, max-width, bordures (y compris dashed), border-radius, polices courantes, taille et alignement du texte, letter-spacing, rgba(), ombres box-shadow et text-shadow simples ou multiples, dégradés linear-gradient, radial-gradient et leurs variantes répétitives ont fonctionné. Les transformations 2D rotate, scale, skew et translate, ainsi que les marges négatives, ont aussi fonctionné, mais privilégie un montage simple. Si une pile est nécessaire, transforme chaque élément frère, même avec rotate(0deg) sur les pièces droites ; à niveau d’empilement égal et sans z-index différent, le dernier dans le code passe devant. Prévois de l’espace autour des rotations. Cette liste décrit des essais réussis, pas une garantie universelle ni une liste officielle. N’annonce jamais que ton code a été testé sur Geocaching.com. LISIBILITÉ – Le texte important doit rester du vrai texte sélectionnable, dans un ordre de lecture logique. – Vise une lecture confortable sur ordinateur et sur téléphone étroit (environ 320 à 375 px). Utilise des largeurs souples, max-width et box-sizing:border-box ; évite les hauteurs fixes pour les zones de texte et toute consigne masquée par overflow:hidden. – Donne des fonds et couleurs explicites aux panneaux et cellules importants. Prévois une couleur de fond de secours sous les dégradés. – Garde des contrastes nets et une taille de texte confortable. Une information indispensable ne doit pas dépendre seulement d’une couleur ou du dessin précis d’un emoji. – Échappe correctement les caractères du texte qui seraient interprétés comme du HTML. RÉPONSE ATTENDUE 1. Un seul bloc de code HTML complet, sans morceau à assembler ni ressource à installer. 2. Au maximum cinq lignes hors du code : les endroits à personnaliser, les éléments décoratifs éventuels, puis le rappel de vérifier le résultat après enregistrement sur Geocaching.com, sur ordinateur et téléphone, et dans la vue web de l’application officielle. Avant de répondre, relis ton code pour vérifier les contraintes, les guillemets, les balises fermées et la conservation de mes indices.

La copie reprend vos modifications. Elles restent dans cette page : conservez le prompt si vous souhaitez le réutiliser.

Le contrôle final reste indispensable : vérifiez le résultat proposé par l’IA après enregistrement de votre description sur Geocaching.com, notamment sur téléphone.

Sous le capot : pourquoi cela fonctionne

Alors, prêts à découvrir ce qui se cache derrière les couleurs et les petites boîtes ?

Mais pourquoi ne pas simplement mettre une image ?

Revenons maintenant à la question : pourquoi ne pas dessiner tout cela dans une image ? C’est justement le point de départ de cet article.

Je voulais présenter le texte d’une mystery avec une mise en scène un peu graphique. Mais je voulais aussi que vous puissiez copier-coller ce texte pour travailler sur l’énigme. Parce que oui, ami géocacheur, je prends soin de vous et de votre santé mentale. Enfin… dans les limites raisonnables d’une mystery.

Une image aurait permis de dessiner presque tout ce que je voulais. En revanche, les lettres auraient été intégrées à l’image : pour les récupérer, il aurait fallu les recopier ou passer par un outil de reconnaissance de caractères.

Avec du HTML et du CSS, on peut conserver du vrai texte tout en lui donnant une apparence particulière. On peut aussi le modifier sans refaire une image entière.

Les images gardent évidemment leur intérêt pour une photo, une carte ou une illustration. Ici, nous cherchons surtout à habiller du texte.

Et pourquoi ne pas tout faire avec les boutons de l’éditeur de texte intégré à la page de publication ? Pour une description classique, ils suffisent souvent. Votre texte rouge pétant, par exemple. Mais pour construire plusieurs bulles de conversation, régler leurs espacements ou coordonner les couleurs d’un faux écran, travailler directement sur le code donne un contrôle plus précis. Et un modèle se réutilise et se modifie plus facilement que vingt minutes de clics au petit bonheur.

HTML, CSS, JavaScript… C’est du ROT13 ?

Ni du ROT13, ni du Vigenère. Ces noms désignent trois technologies que l’on retrouve sur une grande partie des sites web. Elles ont des rôles différents, mais travaillent souvent ensemble.

Pour comprendre, imaginons que vous fabriquiez une boîte pour votre prochaine cache.

Le HTML : construire la boîte

Vous assemblez vos planches, créez un emplacement pour le logbook et ajoutez un couvercle. Vous définissez ce qui existe et comment c’est organisé.

Le HTML joue ce rôle pour une page web. Son nom signifie HyperText Markup Language, que l’on peut traduire par « langage de balisage hypertexte ». Il décrit la structure du contenu : ceci est un titre, ceci est un paragraphe, ceci est une image, ceci est une liste.

Ses éléments sont délimités par des balises, reconnaissables à leurs petits chevrons : < et >.

Par exemple :

<p>Le logbook vous attend sous la troisième pierre.</p>

Le logbook vous attend sous la troisième pierre.

La balise <p> ouvre un paragraphe. La balise </p> le ferme. Entre les deux, on trouve le texte à afficher. Beaucoup de balises fonctionnent ainsi, par paires ; d’autres, comme <br> pour un saut de ligne, n’ont pas besoin d’une balise de fermeture.

Quand vous rédigez votre description avec l’éditeur de Geocaching.com, vous n’avez pas besoin d’écrire tout cela vous-même : l’éditeur produit le HTML pour vous. Cliquez sur le bouton « Source », et vous découvrirez l’envers du décor.

Votre joli paragraphe vient de révéler ses planches et ses vis.

Le CSS : sortir les pinceaux

La boîte est construite. Maintenant, vous la camouflez avec de la peinture et de la mousse… ou vous la peignez en rose fluo, selon votre conception de la discrétion.

Le CSS s’occupe de la présentation. Cascading Style Sheets signifie « feuilles de style en cascade ». Il permet notamment de régler les couleurs, les polices, les bordures et les espacements.

Le HTML dit : « Voici un paragraphe. » Le CSS ajoute : « Son texte sera vert, sur fond noir, avec un peu d’espace autour. »

Par exemple :

<p style="color:#75ef87; background-color:black; padding:12px;">
  Accès au logbook autorisé.
</p>

Accès au logbook autorisé.

Le texte est toujours du texte. Nous avons simplement ajouté des instructions pour le présenter autrement.

Quand vous changez la couleur d’un texte dans un éditeur, celui-ci peut produire ce type de mise en forme à votre place. Vous avez peut-être déjà utilisé du CSS sans le savoir. Comme Monsieur Jourdain, mais avec davantage de boîtes en plastique.

Le JavaScript : ajouter un mécanisme

Votre boîte est maintenant magnifique. Vous décidez d’ajouter un mécanisme qui propulse le logbook à la tête du géocacheur lorsqu’il ouvre le couvercle. C’est une idée discutable, mais une bonne image pour comprendre le rôle du JavaScript.

JavaScript est un langage de programmation. Dans une page web, il peut réagir aux actions du visiteur, effectuer des calculs ou modifier le contenu : vérifier une réponse, ouvrir une fenêtre, faire fonctionner un véritable terminal…

Pour nos descriptions de caches, il faudra s’en passer : nous ne disposons pas d’un espace où ajouter librement nos propres scripts. Nous ne pourrons donc pas programmer un clavier, un calcul ou un jeu dans la description. Les touches de nos faux écrans restent décoratives ; les liens ordinaires, eux, peuvent rester cliquables.

La raison de sécurité est facile à comprendre. Autoriser les visiteurs à intégrer du code actif dans les pages consultées par les autres pourrait permettre des actions malveillantes dans le contexte du site. C’est notamment le principe des attaques dites XSS. Cela ne donne pas automatiquement accès à tout l’ordinateur : le navigateur impose des limites, mais le risque pour le site et ses utilisateurs est bien réel.

Notre terminal de hacker sera donc un décor. Il pourra afficher « ACCÈS AUTORISÉ », mais ne piratera pas le Pentagone. Ni votre grille-pain.

La suite est plus technique : elle rassemble les repères utiles et les résultats de mes essais sur Geocaching.com, principalement sous forme de tableaux. Si vous préférez passer à la création, retrouvez l’atelier en fin d’article.

Trois façons d’écrire du CSS… et notre terrain de jeu

Méthode	Où sont les styles ?	Pour nos descriptions
Externe	Dans un fichier .css partagé par plusieurs pages.	Non retenue : échec dans les essais.
Interne	Dans un bloc <style> de la page.	Non retenue : échec dans les essais.
En ligne	Dans chaque élément : style="color:red;".	La méthode utilisée dans l’atelier.

Dans mes essais, seul le CSS en ligne (« inline ») a fonctionné. C’est la méthode utilisée dans l’atelier.

Lire une ligne de CSS sans sortir l’aspirine

<p style="color:#ffffff; background-color:#222222; padding:12px;">
  Ceci est un message confidentiel. Enfin, presque.
</p>

Ceci est un message confidentiel. Enfin, presque.

Dans le code	À retenir
<p>…</p>	Un paragraphe : les balises encadrent le texte.
style="…"	Les guillemets doubles délimitent les instructions CSS.
propriété:valeur;	Le deux-points relie propriété et valeur ; le point-virgule sépare les déclarations.
color:#ffffff;	Texte blanc.
background-color:#222222;	Fond gris très sombre.
padding:12px;	12 pixels CSS entre le texte et le bord intérieur.

Ces repères suffisent pour adapter un modèle. L’éditeur de description produit déjà du HTML et du CSS pour vous ; le bouton « Source » en révèle les instructions.

Du paragraphe au terminal de hacker

Un cadre sombre, une police monospace et quelques messages verts : voici un modèle à adapter, avec du texte toujours sélectionnable.

<div style="background-color:#111111; color:#75ef87; border:2px solid #444444; border-radius:8px; padding:16px; margin:16px 0; font-family:monospace;">
  <div style="color:#ffffff; border-bottom:1px solid #444444; padding-bottom:8px; margin-bottom:12px; font-weight:bold;">
    ARCHIVES DU LOGBOOK — TERMINAL 03
  </div>

  <p style="margin:0 0 8px 0;">&gt; Connexion établie.</p>
  <p style="margin:0 0 8px 0;">&gt; Dossier retrouvé : OPERATION_MOUSSE.</p>
  <p style="margin:0;">&gt; Instruction : examinez la troisième ligne.</p>
</div>

Pour changer…	Modifiez…
L’histoire	Le titre et les phrases entre les balises.
L’apparence	color, background-color, border et border-radius.
Les espaces	padding à l’intérieur ; margin à l’extérieur.
Les chevrons du texte	&lt; affiche < ; &gt; affiche >.

Changez un réglage à la fois, puis vérifiez la description enregistrée : vous saurez quel pinceau a dérapé.

Groundspeak à la douane : ce qui passe, ce qui coince

J’ai testé les techniques suivantes dans de vraies descriptions Geocaching.com. Ce bilan au 25 octobre 2026 n’est pas une liste officielle ni exhaustive. Les filtres et les affichages peuvent évoluer : partagez aussi vos réussites et vos échecs.

Côté HTML : des boîtes dans des boîtes

Élément	Usage dans les modèles
<div>	Regrouper un panneau, son titre et ses messages ; les blocs peuvent s’imbriquer.
<span>	Styler un mot ou quelques lettres dans une phrase.
<p>, <br>	Créer des paragraphes et des sauts de ligne.
<table>, <tr>, <td>	Organiser lignes et cellules : départs, labyrinthes, pixel art ou radar.

<p>Statut : <span style="color:green;">accès autorisé</span>.</p>

Statut : accès autorisé.

Ici, seul le texte du <span> devient vert. Une boîte dans une boîte : terrain connu pour un géocacheur.

Côté CSS : une palette utile, pas tout le magasin

Effet recherché	Techniques validées dans les essais	Ce qu’on en fait
Colorer et encadrer	color, background, background-color, border, border-radius	Bulles, dossiers et panneaux ; les bordures en tirets (dashed) sont aussi validées.
Régler les espaces et dimensions	padding, margin, width, height, max-width	Panneaux et cadrans ; vérifier les dimensions sur téléphone.
Modifier et aligner l’écriture	font-family, font-size, font-weight, text-align, letter-spacing	Polices courantes sans guillemets internes, grands emojis et lettres espacées.
Créer un dégradé	linear-gradient(), radial-gradient()	Crépuscule, halo de sonar et profondeur.
Dessiner un motif répétitif	repeating-linear-gradient(), repeating-radial-gradient()	Rayures, joints de mur et anneaux.
Utiliser une couleur translucide	rgba() dans une déclaration de couleur ou de fond	Un panneau qui laisse voir la couleur située derrière.
Ajouter des ombres et halos	box-shadow, text-shadow, y compris plusieurs ombres séparées par des virgules	Néon, relief et voyants lumineux.
Incliner, agrandir, déformer, décaler	transform avec rotate(), scale(), skew(), translate()	Polaroids et documents de travers.
Faire chevaucher des blocs	Marges négatives et transformations ; dans les piles simples, une transformation sur chaque élément frère, même rotate(0deg).	Post-it et documents d’enquête ; piles tournées des modèles validés.
Dessiner des cadrans	Blocs imbriqués et border-radius:50%	Radars, sonars et cercles concentriques.
Construire une grille régulière	Tableaux HTML et table-layout:fixed	Labyrinthes, pixel art, radars à points et tableaux de jeu.
Relier des documents	Tableaux, cellules et blocs colorés	Fils rouges et schémas de connexions.
Recadrer un décor	overflow:hidden	Masquer ce qui dépasse d’un cadre, sans couper une consigne.

Les dégradés : un coucher de soleil sans sortir l’appareil photo

Ce carnet utilise un dégradé linéaire, généré par le navigateur sans fichier image :

background-image:linear-gradient(90deg, #172554, #6b21a8, #9a3412);

90deg donne ici une transition de gauche à droite, du bleu nuit au violet puis à l’orange. Gardez aussi background-color:#333333; comme fond de secours.

Les dégradés radiaux et répétitifs ont aussi fonctionné dans les essais. Voici cinq rendus possibles :

Les superpositions : quelques réglages utiles

Besoin	Réglage pratique
Chevaucher des pièces	Marges négatives et transformations 2D, validées dans les modèles.
Choisir la pièce de devant	Dans une pile simple, transformez chaque élément frère : rotations voulues sur les pièces inclinées, transform:rotate(0deg); sur les pièces droites. À niveau égal, sans z-index différent, le dernier dans le code passe devant.
Éviter les morceaux coupés	Rotation et décalage visuel gardent la place d’origine. Laissez de l’air autour et testez un texte long sur téléphone.

Les techniques sur lesquelles nous ne comptons pas

Les échecs ci-dessous concernent les montages essayés sur Geocaching.com, pas tous les usages du Web.

Technique essayée	Résultat observé	Solution retenue
Apostrophe dans style	Toute la mise en forme de l’attribut disparaît.	Pour les polices courantes : font-family:Georgia,Times New Roman,serif;, sans guillemets simples autour du nom. Garder les guillemets doubles de l’attribut style.
background-image:url(...)	Image de fond absente.	Dégradés pour le décor ; <img> avec une source autorisée pour une photo.
position:absolute	Superposition recherchée non obtenue.	Marges négatives, transformations ou tableaux.
<style> et @keyframes	Styles ou animations non appliqués comme attendu. @keyframes ne se définit pas dans un attribut style.	CSS en ligne ; décors statiques.
<details> / <summary>	Panneaux dépliables inopérants.	Sections visibles.
Ancres internes	Navigation inopérante dans la description.	Titres visibles ; sommaire sans ancres.
title sur <span> / <abbr>	Infobulles absentes au survol.	Information écrite dans un cartouche.
ASCII et white-space:pre	Tracés mal alignés.	Grilles de cellules HTML.
<pre>	Fonds blancs indésirables.	Blocs <div> avec fonds et couleurs explicites.
display:flex	Certains montages tronqués ou déformés.	Tableaux pour les alignements concernés.

Une piste pour le mouvement : un GIF animé, à condition de vérifier son affichage et son hébergement sur Geocaching.com ou un domaine approuvé. Les modèles CSS de l’atelier restent statiques.

Quelques réglages qui m’ont évité des cheveux blancs

Point à surveiller	Bon réflexe
Fonds et couleurs	Les préciser aussi sur les cellules et panneaux internes, pas seulement sur le cadre extérieur.
Grilles	table-layout:fixed aide à garder des colonnes régulières ; vérifier largeur et textes longs.
Débordements	overflow:hidden recadre le décor : attention à ne pas couper une consigne.
Motifs derrière le texte	Aligner lignes et interligne, ou placer un encart opaque derrière les lettres.
Polices et emojis	Le rendu varie selon l’appareil. Prévoir une famille générique (serif, sans-serif, monospace) ; vérifier les emojis utiles à l’énigme.

Un beau décor doit aussi survivre au téléphone

Votre terminal est magnifique sur votre écran de bureau. Mais le géocacheur qui ouvre votre page au milieu des bois n’a pas forcément emporté son moniteur de 27 pouces.

Contrôle	Ce qu’il faut vérifier
Description enregistrée	Le traitement de Geocaching.com peut changer le rendu de l’atelier.
Petit écran	Texte lisible, tableaux sans débordement, messages entiers ; éviter les dimensions trop rigides.
Application officielle	Comparer la description habituelle et sa vue web, qui permet de retrouver la mise en forme HTML et les images.
Énigme	Contraste, taille des lettres, couleurs ou positions utilisées comme indices.

Conservez votre code de départ et revérifiez le résultat après chaque modification. Une difficulté d’énigme, oui ; une difficulté pour lire la consigne, beaucoup moins.

À vous de mettre la description en scène

Vous n’avez pas besoin de devenir développeur web pour commencer. Choisissez un modèle, changez quelques phrases, ajustez une couleur et regardez le résultat.

Avec un peu d’habitude, vous reconnaîtrez les conteneurs, les bordures et les espacements. Vous pourrez alors transformer une conversation, prolonger un carnet ou fabriquer votre propre document confidentiel.

Le plus intéressant n’est pas de décorer chaque centimètre de la page : c’est de donner à votre histoire ou à votre énigme une présentation qui lui correspond, tout en gardant un texte pratique à lire et à utiliser.

Alors, rendez-vous dans l’atelier CSS. Les boîtes sont prêtes, les pinceaux aussi. Il ne reste plus qu’à éviter le texte vert sur fond rouge. Enfin… je vous fais confiance. À peu près.

Choisir mon modèle dans l’atelier CSS →

---

Sources et repères techniques

1. Geocaching — centre d’aide, section « HTML in cache pages ».
2. MDN — CSS : feuilles de style en cascade.
3. MDN — JavaScript.
4. MDN — Cross-site scripting (XSS).
5. MDN — Getting started with CSS : les trois méthodes d’intégration.
6. MDN — élément <span> et référence des éléments HTML.
7. MDN — Utiliser les animations CSS.
8. Geocaching — centre d’aide, section « Web View ».
9. MDN — attribut HTML style.
10. MDN — Utiliser les dégradés CSS.
11. MDN — Propriété transform.
12. W3C — CSS Fonts : syntaxe des noms de familles.
13. W3C — CSS Transforms : rendu, place réservée et empilement.
14. MDN — Contextes d’empilement.