MODULE H02

CSS Fondamentaux

Maîtrisez les Cascading Style Sheets — sélecteurs, box model, Flexbox, Grid, variables et responsive design.

Durée ~4h 10 exercices Mini-projet Playground QCM 10 questions

1. Introduction au CSS

CSS (Cascading Style Sheets) est le langage qui donne l'apparence aux pages HTML. Si HTML est le squelette d'une page, CSS en est l'habillage : couleurs, tailles, polices, espacements, mises en page…

Sans CSS, toutes les pages web ressembleraient à un document texte brut. C'est CSS qui transforme une page ordinaire en une interface visuelle moderne.

Le trio du Web : HTML = structure (le contenu) | CSS = apparence (les couleurs, tailles…) | JavaScript = comportement (les actions)

La syntaxe CSS : sélecteur + propriétés

Une règle CSS se compose d'un sélecteur (ce qu'on cible) et d'un bloc de propriétés (ce qu'on change).

/* sélecteur  { propriété: valeur; } */

h1 {
  color: #3b82f6;       /* couleur du texte en bleu */
  font-size: 2rem;      /* taille de la police */
}

p {
  color: #64748b;       /* texte gris pour les paragraphes */
  line-height: 1.7;     /* hauteur de ligne (confort de lecture) */
}

body {
  background-color: #f8fafc;   /* fond de la page en gris très clair */
  font-family: Arial, sans-serif;
}

Exemples pratiques

Voici comment changer les couleurs et le fond sur des éléments concrets :

/* ── Changer la couleur d'un titre ── */
h1 { color: #e11d48; }        /* rouge */
h2 { color: #7c3aed; }        /* violet */

/* ── Changer la couleur d'un paragraphe ── */
p { color: #374151; }         /* gris foncé */

/* ── Changer la couleur de fond ── */
body { background-color: #fef9c3; }   /* fond jaune pâle */
h1   { background-color: #1e293b; }   /* fond sombre derrière le titre */

/* ── Cibler une classe (.nom) ── */
.important { color: #dc2626; font-weight: bold; }

/* ── Cibler un identifiant (#id) ── */
#header { background-color: #0f172a; color: white; }

💡 class vs id : utilisez .ma-classe pour cibler plusieurs éléments qui partagent le même style, et #mon-id pour un élément unique sur la page. En pratique, on utilise presque toujours des classes.

Les 3 façons d'intégrer le CSS

<!-- ✅ 1. Feuille externe — recommandé (fichier style.css séparé) -->
<link rel="stylesheet" href="style.css">

<!-- ⚠️ 2. Balise style dans le <head> — pratique pour tester -->
<style>
  h1 { color: #3b82f6; }
  p  { color: #64748b; }
</style>

<!-- 🚫 3. Style inline — priorité maximale, à éviter -->
<p style="color: red; font-weight: bold;">Texte rouge</p>

Pour ce cours, utilisez toujours la feuille externe (style.css lié dans votre HTML) — c'est la méthode professionnelle qui sépare clairement le contenu de l'apparence.

2. Sélecteurs CSS

/* ── Sélecteurs de base ── */
*         { box-sizing: border-box; }      /* Universel */
p         { color: gray; }                /* Élément */
.card     { padding: 1rem; }              /* Classe */
#header   { position: sticky; }          /* ID */
a[href]   { color: blue; }               /* Attribut */
a[href^="https"] { color: green; }       /* Attribut commence par */
a[href$=".pdf"]  { color: red; }         /* Attribut finit par */

/* ── Combinateurs ── */
div p      { color: gray; }    /* Descendant */
div > p    { color: gray; }    /* Enfant direct */
h2 + p     { color: red; }     /* Frère adjacent */
h2 ~ p     { color: red; }     /* Tous les frères suivants */

/* ── Pseudo-classes ── */
a:hover        { text-decoration: underline; }
a:focus        { outline: 2px solid blue; }
input:checked  { accent-color: green; }
li:first-child { font-weight: bold; }
li:last-child  { border-bottom: none; }
li:nth-child(2n)   { background: #f0f0f0; }  /* Pairs */
li:nth-child(odd)  { background: white; }     /* Impairs */
p:not(.special)    { color: gray; }

/* ── Pseudo-éléments ── */
p::first-line    { font-weight: bold; }
p::first-letter  { font-size: 2em; }
.btn::before     { content: '→ '; }
.btn::after      { content: ' ←'; }
input::placeholder { color: #999; }

Performance Préférez les classes aux sélecteurs d'éléments. Évitez les sélecteurs descendants trop profonds comme div ul li a span.

3. Cascade & Spécificité

Quand plusieurs règles s'appliquent au même élément, CSS détermine laquelle prend le dessus selon :

/* ── Ordre de priorité (du plus faible au plus fort) ── */
/* 1. Styles du navigateur (user-agent) */
/* 2. Feuille externe */
/* 3. Style <style> dans le head */
/* 4. Style inline */
/* 5. !important */

p { color: blue; }
p { color: red; }   /* Gagne — plus tardif dans le fichier */

/* ── Spécificité (0, 0, 0, 0) ── */
/*  (importance, IDs, classes/pseudo/attr, éléments/pseudo-éléments) */
*             /* 0,0,0,0 */
p             /* 0,0,0,1 */
.card         /* 0,0,1,0 */
p.card        /* 0,0,1,1 */
#header       /* 0,1,0,0 */
style=""      /* 1,0,0,0 */

/* Exemple de conflit */
.nav a { color: blue; }          /* 0,0,1,1 */
nav a { color: red; }            /* 0,0,0,2 — perd */
.nav .link { color: green; }     /* 0,0,2,0 — gagne */

/* Héritage */
body { font-family: Arial; }     /* Hérité par tous les descendants */
p { color: inherit; }            /* Forcer l'héritage */
p { color: initial; }            /* Valeur initiale du navigateur */

Évitez !important Il rend le CSS impossible à maintenir. Préférez augmenter la spécificité de votre sélecteur.

4. Box Model

Chaque élément HTML est une boîte rectangulaire composée de 4 zones :

/* ── Box Model ── */
.box {
  /* Content */
  width: 300px;
  height: 200px;

  /* Padding (espace intérieur) */
  padding: 20px;                      /* tous les côtés */
  padding: 10px 20px;                 /* haut/bas | gauche/droite */
  padding: 5px 10px 15px 20px;        /* top right bottom left (horaire) */

  /* Border */
  border: 2px solid #333;
  border-radius: 8px;                 /* coins arrondis */
  border-top: 3px dashed red;

  /* Margin (espace extérieur) */
  margin: 1rem auto;                  /* centrer un bloc */
  margin-top: 0;

  /* Box sizing */
  box-sizing: border-box;             /* width inclut padding et border */
}

/* ── Largeur totale d'un élément ── */
/* content-box (défaut) : width + padding + border */
.default { box-sizing: content-box; width: 300px; padding: 20px; /* = 340px total */ }
/* border-box (recommandé) : width = total */
.better  { box-sizing: border-box;  width: 300px; padding: 20px; /* = 300px total */ }

/* ── Reset global recommandé ── */
*, *::before, *::after { box-sizing: border-box; }

Conseil Appliquer box-sizing: border-box globalement — c'est la pratique standard dans tous les frameworks modernes.

5. Couleurs & Typographie

/* ── Formats de couleur ── */
color: red;                    /* Nom */
color: #ff0000;                /* Hex */
color: #f00;                   /* Hex raccourci */
color: rgb(255, 0, 0);         /* RGB */
color: rgba(255, 0, 0, 0.5);   /* RGB + transparence */
color: hsl(0, 100%, 50%);      /* Teinte, Saturation, Luminosité */
color: hsla(0, 100%, 50%, 0.5);

/* ── Gradients ── */
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, red, orange, yellow, green, blue);
background: radial-gradient(circle, #fff 0%, #000 100%);

/* ── Typographie ── */
p {
  font-family: 'Segoe UI', Arial, sans-serif;  /* fallback chain */
  font-size: 1rem;            /* 16px par défaut */
  font-size: clamp(1rem, 2.5vw, 1.5rem);  /* fluid typography */
  font-weight: 400;           /* normal: 100-900 */
  font-style: italic;
  font-variant: small-caps;
  line-height: 1.6;           /* 1.5-1.8 pour corps de texte */
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  text-align: left | center | right | justify;
  text-decoration: underline | line-through | none;
  text-transform: uppercase | lowercase | capitalize;
  text-indent: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;           /* combiné avec text-overflow */
}

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body { font-family: 'Inter', sans-serif; }

6. Display & Positionnement

/* ── Display ── */
display: block;          /* Prend toute la largeur, nouvelle ligne */
display: inline;         /* Dans le flux, pas de width/height */
display: inline-block;   /* Dans le flux, accepte width/height */
display: none;           /* Caché, ne prend pas de place */
display: flex;           /* Flexbox container */
display: grid;           /* Grid container */

/* ── Position ── */
position: static;        /* Défaut, dans le flux */
position: relative;      /* Décalé par rapport à sa position normale */
position: absolute;      /* Relatif au premier ancêtre positionné */
position: fixed;         /* Relatif à la fenêtre (sticky header) */
position: sticky;        /* Relative puis fixed au seuil */

.sticky-header {
  position: sticky;
  top: 0;                /* Seuil de déclenchement */
  z-index: 100;
}

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* ou inset: 0 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

/* Centrage absolu */
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── z-index ── */
/* Ne fonctionne que sur les éléments positionnés (pas static) */
.modal      { z-index: 1000; }
.tooltip    { z-index: 500; }
.dropdown   { z-index: 200; }
.header     { z-index: 100; }

7. Flexbox

Flexbox est un modèle de layout unidimensionnel (une ligne OU une colonne).

/* ── Container flex ── */
.container {
  display: flex;

  /* Direction */
  flex-direction: row;            /* → défaut */
  flex-direction: column;         /* ↓ */
  flex-direction: row-reverse;    /* ← */

  /* Retour à la ligne */
  flex-wrap: wrap;               /* autorisé */
  flex-wrap: nowrap;             /* défaut */

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

  /* Alignement axe transversal (vertical si row) */
  align-items: stretch;          /* défaut — remplit la hauteur */
  align-items: flex-start;       /* haut */
  align-items: center;           /* centré */
  align-items: flex-end;         /* bas */
  align-items: baseline;         /* aligné sur la ligne de texte */

  /* Espacement */
  gap: 1rem;
  gap: 1rem 2rem;  /* row-gap column-gap */
}

/* ── Items flex ── */
.item {
  flex: 1;                       /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 200px;               /* taille fixe 200px */
  flex-grow: 2;                  /* prend 2× plus d'espace disponible */
  flex-shrink: 0;                /* ne rétrécit pas */
  flex-basis: 300px;             /* taille de base */
  align-self: flex-end;          /* remplace align-items pour cet item */
  order: -1;                     /* change l'ordre visuel */
}

/* ── Patterns courants ── */

/* Centrage parfait */
.center { display: flex; justify-content: center; align-items: center; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* Cards égales */
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card  { flex: 1 1 280px; }  /* min 280px, croît si possible */

8. CSS Grid

Grid est un modèle de layout bidimensionnel (lignes ET colonnes).

/* ── Container grid ── */
.grid {
  display: grid;

  /* Colonnes */
  grid-template-columns: 200px 1fr 1fr;     /* 3 colonnes : fixe + 2 flexibles */
  grid-template-columns: repeat(3, 1fr);    /* 3 colonnes égales */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* responsive */

  /* Lignes */
  grid-template-rows: auto;                 /* hauteur automatique */
  grid-template-rows: 80px 1fr 60px;        /* header + contenu + footer */

  /* Espacement */
  gap: 1rem;
  column-gap: 2rem;
  row-gap: 1rem;

  /* Template nommé */
  grid-template-areas:
    "header header header"
    "sidebar main    main"
    "footer  footer footer";
}

/* ── Placement des items ── */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Placement manuel */
.item {
  grid-column: 1 / 3;          /* colonnes 1 à 3 */
  grid-column: 1 / -1;         /* toute la largeur */
  grid-row: 2 / 4;             /* lignes 2 à 4 */
  grid-column: span 2;         /* s'étend sur 2 colonnes */
}

/* ── Layout classique ── */
.page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
  gap: 0;
}

/* ── Responsive auto-fill ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Flexbox vs Grid Flexbox pour 1 dimension (nav, boutons, alignement). Grid pour 2 dimensions (mise en page, grille de cartes, tableau complexe).

9. Variables CSS (Custom Properties)

/* ── Déclaration dans :root (scope global) ── */
:root {
  /* Couleurs */
  --color-primary:   #3b82f6;
  --color-secondary: #64748b;
  --color-bg:        #f8fafc;
  --color-text:      #1e293b;

  /* Typographie */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height: 1.6;

  /* Espacement */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Effets */
  --border-radius: 8px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
}

/* ── Utilisation ── */
.btn {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: opacity var(--transition);
}

/* ── Override local ── */
.card-dark {
  --color-bg: #1e293b;
  --color-text: #f8fafc;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── Thème sombre avec media query ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #0f172a;
    --color-text: #f1f5f9;
  }
}

/* ── Fallback ── */
color: var(--color-primary, #3b82f6);  /* valeur par défaut si non définie */

10. Responsive & Media Queries

/* ── Mobile First (recommandé) ── */
/* Styles de base pour mobile */
.container { padding: 1rem; }
.card { width: 100%; }
.nav { display: none; }

/* Tablette (min-width = à partir de) */
@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 1100px; margin: 0 auto; }
  .cards { display: grid; grid-template-columns: repeat(2, 1fr); }
  .nav { display: flex; }
}

/* Desktop */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .sidebar { display: block; }
}

/* ── Unités relatives ── */
rem  /* relatif à font-size de  (16px) */
em   /* relatif à font-size de l'élément parent */
vw   /* 1% de la largeur de la fenêtre */
vh   /* 1% de la hauteur de la fenêtre */
%    /* relatif à l'élément parent */

/* ── Fonctions CSS utiles ── */
width: min(100%, 1100px);               /* prend le plus petit */
width: max(300px, 50%);                 /* prend le plus grand */
font-size: clamp(1rem, 2.5vw, 1.5rem);  /* min, idéal, max */

/* ── Images responsives ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Autres media queries ── */
@media (orientation: landscape) { ... }
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media print { .no-print { display: none; } }

Breakpoints courants 480px (mobile L), 768px (tablette), 1024px (desktop), 1280px (large). Mobile first = styles par défaut pour mobile, media queries pour agrandir.