CodeAcademy - Cours CSS

1. Introduction au CSS

CSS (Cascading Style Sheets) est le langage utilisé pour styliser les éléments HTML. Il contrôle les couleurs, les polices, les espacements, la mise en page et bien plus encore. CSS sépare le contenu (HTML) de la présentation (CSS).

Les trois méthodes d'application

Il existe trois façons d'appliquer du CSS à vos pages web : en ligne, dans un bloc interne, ou dans un fichier externe.

/* Méthode 1 : Inline (dans l'attribut style) */
p {
    color: red;
}

/* Méthode 2 : Internal (dans une balise <style>) */
p {
    color: blue;
    font-size: 16px;
}

/* Méthode 3 : External (fichier .css séparé) */
p {
    color: green;
    font-size: 18px;
    line-height: 1.6;
}

Inline CSS

Le style est appliqué directement sur l'élément via l'attribut style. Pratique pour un style unique, mais à éviter globalement car cela mélange structure et présentation.

<p style="color: red; font-size: 20px;">
    Texte rouge et gros
</p>

CSS interne

Les styles sont placés dans une balise <style> dans le <head> du document. Utile pour une seule page.

<head>
    <style>
        h1 {
            color: navy;
        }
        p {
            line-height: 1.5;
        }
    </style>
</head>

CSS externe (recommandé)

Les styles sont dans un fichier séparé (.css) lié via la balise <link>. C'est la méthode recommandée pour la maintenance et la réutilisabilité.

<head>
    <link rel="stylesheet" href="style.css">
</head>

La spécificité (Specificity)

Lorsque plusieurs règles ciblent le même élément, CSS utilise un système de spécificité pour déterminer quelle règle s'applique. L'ordre de priorité est :

Inline (1000) > #id (100) > .class (10) > element (1)
!important force une déclaration (à éviter autant que possible)
À spécificité égale, la dernière déclaration l'emporte

/* Spécificité : 1 (element) */
p { color: blue; }

/* Spécificité : 10 (class) - gagne */
.texte { color: red; }

/* Spécificité : 100 (id) - gagne encore */
#titre { color: green; }

2. Les sélecteurs

Les sélecteurs CSS permettent de cibler les éléments HTML auxquels appliquer des styles. Plus le sélecteur est précis, plus la règle est spécifique.

Sélecteur d'élément

Cible directement tous les éléments d'un type donné.

/* Cible tous les paragraphes */
p {
    color: black;
}

/* Cible tous les titres h2 */
h2 {
    font-size: 24px;
}

/* Cible toutes les images */
img {
    max-width: 100%;
}

Sélecteur de classe (.)

Cible tous les éléments possédant une classe donnée. Un élément peut avoir plusieurs classes.

.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

.texte-rouge {
    color: red;
}

<!-- HTML -->
<div class="card texte-rouge">Contenu</div>

Sélecteur d'identifiant (#)

Cible un élément unique grâce à son attribut id. Un id doit être unique dans la page.

#header {
    background: navy;
    color: white;
}

#bouton-unique {
    cursor: pointer;
}

Sélecteur universel (*)

Cible tous les éléments de la page. Souvent utilisé pour le reset CSS.

/* Reset des marges et paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Combinateurs

Les combinateurs créent des relations entre les sélecteurs.

/* Descendant (espace) - tous les <p> dans .container */
.container p {
    margin-bottom: 10px;
}

/* Enfant direct (>) - uniquement les <p> enfants directs */
.container > p {
    font-weight: bold;
}

/* Frère adjacent (+) - le <p> juste après un <h2> */
h2 + p {
    font-size: 18px;
}

/* Frères généraux (~) - tous les <p> après un <h2> */
h2 ~ p {
    color: gray;
}

Pseudo-classes

Les pseudo-classes ciblent un état ou une position spécifique d'un élément.

a:hover {
    color: red;
}

a:visited {
    color: purple;
}

input:focus {
    border-color: blue;
    outline: none;
}

li:first-child {
    font-weight: bold;
}

li:last-child {
    margin-bottom: 0;
}

li:nth-child(odd) {
    background: #f5f5f5;
}

li:nth-child(3n) {
    color: blue;
}

Pseudo-éléments

Les pseudo-éléments créent des éléments virtuels pour cibler une partie du contenu.

/* Ajoute du contenu avant l'élément */
.titre::before {
    content: "★ ";
    color: gold;
}

/* Ajoute du contenu après l'élément */
.lien::after {
    content: " ↗";
    font-size: 12px;
}

/* Cible la première lettre */
p:first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    margin-right: 10px;
}

/* Cible la première ligne */
p:first-line {
    font-variant: small-caps;
}

3. Les couleurs et backgrounds

CSS offre de nombreux formats pour définir les couleurs et les arrière-plans. Comprendre ces formats est essentiel pour créer des designs harmonieux.

Les formats de couleurs

/* Nom de couleur */
.rouge { color: red; }

/* Code hexadécimal */
.bleu { color: #3498db; }
.noir-court { color: #000; }

/* RGB (Red, Green, Blue) */
.vert-rgb { color: rgb(46, 204, 113); }

/* RGBA avec transparence */
.semi-transparent { color: rgba(0, 0, 0, 0.5); }

/* HSL (Hue, Saturation, Lightness) */
.hsl { color: hsl(210, 80%, 50%); }

/* HSLA avec transparence */
.hsla { color: hsla(340, 80%, 50%, 0.7); }

La propriété background-color

.carte {
    background-color: #f8f9fa;
}

.en-tete {
    background-color: rgba(52, 152, 219, 0.9);
}

Background image

.banner {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Les dégradés (gradients)

/* Dégradé linéaire */
.degrade-1 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Dégradé linéaire vertical */
.degrade-2 {
    background: linear-gradient(to bottom, white, #3498db);
}

/* Dégradé radial */
.degrade-3 {
    background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}

/* Dégradé avec arrêts multiples */
.degrade-4 {
    background: linear-gradient(to right, red, orange, yellow, green, blue, violet);
}

La propriété opacity

.image-transparent {
    opacity: 0.5;  /* De 0 (invisible) à 1 (opaque) */
}

.hover-opaque:hover {
    opacity: 1;
}

4. La typographie

La typographie est un élément fondamental du design web. CSS contrôle la police, la taille, l'espacement et la décoration du texte.

Les propriétés de police

body {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.italique {
    font-style: italic;
}

.gras {
    font-weight: 700;
}

.etroit {
    letter-spacing: -0.02em;
}

.large {
    letter-spacing: 0.1em;
}

Les propriétés de texte

.centre {
    text-align: center;
}

.droite {
    text-align: right;
}

.justifie {
    text-align: justify;
}

.souligne {
    text-decoration: underline;
}

.barre {
    text-decoration: line-through;
}

.majuscules {
    text-transform: uppercase;
}

.minuscules {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.ombre {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Les polices web (@font-face)

Vous pouvez charger des polices personnalisées avec @font-face ou utiliser Google Fonts.

/* Charger une police personnalisée */
@font-face {
    font-family: 'MaPolice';
    src: url('fonts/ma-police.woff2') format('woff2'),
         url('fonts/ma-police.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.texte-custom {
    font-family: 'MaPolice', sans-serif;
}

Les unités de police

px : Pixels fixes, ne s'adaptent pas au zoom.
em : Multiplicateur par rapport au parent.
rem : Multiplicateur par rapport à la racine (<html>).
% : Pourcentage par rapport au parent.
vw / vh : Pourcentage de la largeur/hauteur de la fenêtre.

5. Le modèle de boîte

Chaque élément HTML est une boîte rectangulaire composée de marge, bordure, remplissage et contenu. Comprendre ce modèle est la base de tout layout CSS.

box-sizing: border-box

Par défaut, width et height ne comprennent que le contenu. Avec border-box, padding et border sont inclus dans la taille totale.

/* Reset pour toute la page */
* {
    box-sizing: border-box;
}

.boite {
    width: 300px;        /* Largeur totale */
    padding: 20px;       /* Inclus dans les 300px */
    border: 2px solid black; /* Inclus dans les 300px */
}

Les marges (margin)

.element {
    /* Toutes les marges */
    margin: 20px;

    /* Haut droite bas gauche */
    margin: 10px 20px 10px 20px;

    /* Haut/bas gauche/droite */
    margin: 10px 20px;

    /* Centrer horizontalement */
    margin: 0 auto;

    /* Marges individuelles */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Le remplissage (padding)

.carte {
    padding: 20px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-left: 30px;
}

La bordure (border)

.encadre {
    border: 2px solid #333;
    border-radius: 8px;
}

.cercle {
    border-radius: 50%;
}

.bordures-colorees {
    border-top: 3px solid red;
    border-bottom: 3px solid blue;
    border-left: 1px dashed gray;
}

.outline-custom {
    outline: 2px solid blue;
    outline-offset: 4px;
}

Les dimensions

.boite-responsive {
    width: 100%;
    max-width: 1200px;
    min-width: 320px;
    height: auto;
    min-height: 100vh;
}

6. Display et Position

Les propriétés display et position contrôlent comment les éléments sont affichés et positionnés dans la page. Ce sont les piliers de la mise en page CSS.

Les valeurs de display

/* Bloc : prend toute la largeur disponible */
.bloc {
    display: block;
}

/* Inline : ne prend que la largeur du contenu */
.en-ligne {
    display: inline;
}

/* Inline-block : inline mais avec padding/margin possibles */
.en-ligne-bloc {
    display: inline-block;
    padding: 10px 20px;
}

/* None : masque l'élément complètement */
.masque {
    display: none;
}

/* Flex : mise en page flexible (voir leçon 7) */
.flex-container {
    display: flex;
}

/* Grid : mise en page en grille (voir leçon 8) */
.grid-container {
    display: grid;
}

Les valeurs de position

/* Statique : flux normal (par défaut) */
.statique {
    position: static;
}

/* Relatif : décalé par rapport à sa position normale */
.relatif {
    position: relative;
    top: 10px;
    left: 20px;
}

/* Absolu : positionné par rapport au parent positionné */
.parent {
    position: relative;
}

.enfant-absolu {
    position: absolute;
    top: 0;
    right: 0;
}

/* Fixe : fixé par rapport à la fenêtre du navigateur */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Sticky : reste visible au scroll jusqu'à un seuil */
.sticky-nav {
    position: sticky;
    top: 0;
}

Le z-index

La propriété z-index contrôle l'ordre d'empilement des éléments positionnés.

.overlay {
    position: absolute;
    z-index: 10;    /* Devant */
}

.background {
    position: absolute;
    z-index: 1;     /* Derrière */
}

7. Flexbox

Flexbox est un modèle de mise en page unidimensionnel qui permet de aligner et répartir facilement les éléments dans un conteneur, que ce soit en ligne ou en colonne.

Le conteneur flex

.flex-container {
    display: flex;

    /* Direction des éléments */
    flex-direction: row;           /* row | row-reverse | column | column-reverse */

    /* Alignement horizontal (axe principal) */
    justify-content: center;     /* flex-start | flex-end | center | space-between | space-around | space-evenly */

    /* Alignement vertical (axe croisé) */
    align-items: center;         /* flex-start | flex-end | center | stretch | baseline */

    /* Espacement entre les éléments */
    gap: 20px;

    /* Gestion du retour à la ligne */
    flex-wrap: wrap;              /* nowrap | wrap | wrap-reverse */
}

Les éléments flex (enfants)

.flex-item {
    /* Ordre d'apparissance */
    order: 1;

    /* Capacité à grandir */
    flex-grow: 1;

    /* Capacité à rétrécir */
    flex-shrink: 0;

    /* Taille de base */
    flex-basis: 200px;

    /* Raccourci pour les 3 propriétés ci-dessus */
    flex: 1 0 200px;

    /* Alignement individuel (écrase align-items) */
    align-self: flex-end;
}

/* Exemple : carte qui prend toute la place */
.carte-pleine {
    flex: 1 1 100%;
}

/* Exemple : sidebar fixe + contenu flexible */
.layout {
    display: flex;
}
.sidebar {
    flex: 0 0 250px;
}
.contenu {
    flex: 1 1 auto;
}

Exemples pratiques

/* Centrer un élément parfaitement */
.centrer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Barre de navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

/* Grille de cartes responsive */
.cartes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.carte {
    flex: 1 1 300px;
}

8. CSS Grid

CSS Grid est un système de mise en page bidimensionnel qui permet de créer des mises en page complexes avec des lignes et des colonnes. C'est l'outil le plus puissant pour les mises en page avancées.

Le conteneur Grid

.grid-container {
    display: grid;

    /* Définir les colonnes */
    grid-template-columns: 200px 1fr 200px;

    /* Définir les lignes */
    grid-template-rows: auto 1fr auto;

    /* Espacement */
    gap: 20px;
    row-gap: 20px;
    column-gap: 30px;
}

La unité fr et les fonctions

.grille {
    display: grid;

    /* fr = fraction de l'espace disponible */
    grid-template-columns: 1fr 2fr 1fr;

    /* repeat() : répéter un motif */
    grid-template-columns: repeat(3, 1fr);

    /* auto-fit : colonnes qui s'adaptent */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    /* auto-fill : similaire à auto-fit */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Placement des éléments

.header {
    grid-column: 1 / -1;        /* Première à dernière colonne */
    grid-row: 1;
}

.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

.contenu {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.footer {
    grid-column: 1 / -1;
}

grid-template-areas

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

9. Les transitions et animations

CSS permet de créer des animations fluides et des transitions douces pour enrichir l'expérience utilisateur sans JavaScript.

Les transitions

.bouton {
    background: #3498db;
    color: white;
    transition: all 0.3s ease;
}

.bouton:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Transition spécifique */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Avec délai */
.delayed {
    transition: opacity 0.5s ease 0.2s; /* delay = 0.2s */
}

Les propriétés transition

transition-property : La propriété à animer (all, transform, opacity...).
transition-duration : La durée (0.3s, 300ms).
transition-timing-function : La courbe (ease, linear, ease-in-out).
transition-delay : Le délai avant le démarrage.

Les transforms

.element {
    transition: transform 0.3s ease;
}

.element:hover {
    /* Rotation */
    transform: rotate(45deg);

    /* Agrandissement */
    transform: scale(1.2);

    /* Déplacement */
    transform: translate(10px, -20px);

    /* Inclinaison */
    transform: skew(10deg, 5deg);

    /* Combiner plusieurs transforms */
    transform: rotate(5deg) scale(1.1) translateX(10px);
}

Les animations (@keyframes)

/* Définir l'animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Appliquer l'animation */
.animated {
    animation: slideIn 0.5s ease forwards;
}

.spinner {
    animation: spin 1s linear infinite;
}

.card-hover {
    animation: pulse 2s ease-in-out infinite;
}

Les propriétés d'animation

animation-name : Le nom du @keyframes.
animation-duration : La durée totale.
animation-timing-function : La courbe d'accélération.
animation-delay : Le délai avant le lancement.
animation-iteration-count : Nombre de répétitions (infinite).
animation-direction : normal, reverse, alternate.
animation-fill-mode : forwards (garde l'état final), backwards.

10. Les media queries

Les media queries permettent d'appliquer des styles différents selon les caractéristiques de l'appareil (largeur, hauteur, type d'affichage). C'est le fondement du design responsive.

Syntaxe de base

/* Appliquer quand l'écran fait au moins 768px */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Appliquer quand l'écran fait au maximum 576px */
@media (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
}

Types de media

/* Écran (par défaut) */
@media screen {
    body { font-size: 16px; }
}

/* Impression */
@media print {
    body { font-size: 12pt; }
    .no-print { display: none; }
}

/* Min et max combinés */
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar { display: none; }
}

/* Plusieurs media queries */
@media (min-width: 576px) {
    .col-sm { flex: 0 0 50%; }
}
@media (min-width: 768px) {
    .col-md { flex: 0 0 33.33%; }
}
@media (min-width: 992px) {
    .col-lg { flex: 0 0 25%; }
}

Breakpoints standards

Mobile : max-width: 576px
Tablette : min-width: 576px et max-width: 768px
Desktop : min-width: 768px et max-width: 992px
Grand écran : min-width: 992px et max-width: 1200px
Très grand écran : min-width: 1200px

Patterns responsive

/* Mobile First : styles par défaut = mobile */
.grid {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Cacher sur mobile, afficher sur desktop */
.sidebar { display: none; }

@media (min-width: 992px) {
    .sidebar { display: block; }
}

/* Redimensionner les polices */
body { font-size: 14px; }

@media (min-width: 768px) {
    body { font-size: 16px; }
}

@media (min-width: 1200px) {
    body { font-size: 18px; }
}

11. Les variables CSS et calc()

Les variables CSS (propriétés personnalisées) et les fonctions mathématiques rendent votre CSS plus maintenable, flexible et puissant.

Déclarer des variables CSS

/* Déclaration globale dans :root */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --border-radius: 8px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* Utilisation avec var() */
body {
    color: var(--text-color);
    background: var(--bg-color);
    font-family: var(--font-primary);
}

.bouton {
    background: var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Valeur par défaut avec la 2ème arg de var() */
.element {
    color: var(--custom-color, black);
}

La fonction calc()

.sidebar {
    /* Mélange des unités différentes */
    width: calc(100% - 300px);
}

.espacement {
    margin: calc(var(--spacing-md) * 2);
}

.largeur {
    width: calc(100vw - 40px);
    max-width: calc(100% - 2rem);
}

.position {
    top: calc(50% - 100px);
    left: calc(50% - 150px);
}

Les fonctions min(), max(), clamp()

.titre {
    /* min() : prend la plus petite valeur */
    font-size: min(4vw, 32px);
}

.conteneur {
    /* max() : prend la plus grande valeur */
    width: max(80%, 600px);
}

.texte {
    /* clamp(min, preferred, max) : la plus intelligente */
    font-size: clamp(16px, 2.5vw, 24px);
    line-height: clamp(1.4, 1.5, 1.8);
    padding: clamp(1rem, 3vw, 3rem);
}

.responsive-box {
    /* clamp() pour les dimensions */
    width: clamp(300px, 50%, 800px);
    height: clamp(200px, 30vh, 500px);
}

Thème sombre avec variables

:root {
    --bg: #ffffff;
    --text: #333333;
    --card-bg: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a2e;
        --text: #e0e0e0;
        --card-bg: #16213e;
    }
}

body {
    background: var(--bg);
    color: var(--text);
}

.card {
    background: var(--card-bg);
}

12. Projet final

Vous avez appris toutes les bases du CSS ! Il est temps de les mettre en pratique en créant une landing page responsive complète en utilisant Grid, Flexbox, animations, variables et media queries.

Ce que vous devez intégrer

Une barre de navigation responsive avec Flexbox
Un section hero avec dégradé et animation d'entrée
Un grid de cartes avec auto-fit et minmax()
Un footer avec CSS Grid
Des variables CSS pour les couleurs et espacements
Des transitions au survol des cartes et boutons
Des media queries pour mobile/tablette/desktop
La fonction clamp() pour la typographie
box-sizing: border-box global
Un thème clair/sombre avec prefers-color-scheme

Template de base

/* style.css */

:root {
    --primary: #667eea;
    --secondary: #764ba2;
    --text: #333;
    --bg: #ffffff;
    --card-bg: #f8f9fa;
    --radius: 8px;
    --shadow: 0 4px 20px rgba(0,0,0,0.1);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
}

/* NAV */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing) 5%;
}

/* HERO */
.hero {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    text-align: center;
    padding: clamp(4rem, 10vh, 8rem) 5%;
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CARDS GRID */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 4rem 5%;
}

.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* FOOTER */
footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 3rem 5%;
    background: #2d3436;
    color: white;
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #e0e0e0;
        --bg: #1a1a2e;
        --card-bg: #16213e;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 1rem; }
}

Conseils pour réussir

Commencez par le HTML, puis ajoutez le CSS progressivement.
Utilisez les variables CSS pour maintenir un design cohérent.
Testez sur mobile dès le début (mobile-first).
Utilisez les DevTools du navigateur pour déboguer.
Expérimentez avec les animations pour rendre la page vivante.
Vérifiez l'accessibilité : contraste, Tailles lisibles, focus visible.