Les langages Projet : un site complet La mise en forme (CSS)

Habiller la page

La structure est posée ; les exercices de ce chapitre écrivent la feuille style.css du festival. Elle s'applique à la page complète, visible dans l'aperçu.

La charte dans des variables

:root {
    --accent: #e4572e;
    --fond: #fffaf2;
}
.entete { background-color: var(--accent); }

Changer l'identité du site, c'est changer deux lignes.

La barre de navigation : flex

.navigation {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

Les cartes : une grille qui s'adapte

.programme {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 700px) {
    .programme { grid-template-columns: repeat(2, 1fr); }
}

Une colonne sur téléphone, deux sur un écran large : on écrit d'abord pour le petit écran, puis on enrichit.

Les états : des classes que le JavaScript posera

.cache { display: none; }
.filtres .actif { background-color: var(--accent); color: #ffffff; }

Ces règles ne s'appliquent à rien tant que personne n'ajoute les classes : c'est le JavaScript qui le fera, au chapitre suivant.

4 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

Les couleurs du festival facile lecon a valider
La barre de navigation facile lecon a valider
Des cartes qui s adaptent moyen lecon a valider
Les états de la page moyen lecon a valider