Sélecteurs CSS & Flexbox — Cours CSS

CSS (Cascading Style Sheets) permet de styliser les pages HTML. On décrit où appliquer un style (le sélecteur) et quoi appliquer (les propriétés et leurs valeurs).

NB : Les blocs de code ci-dessous sont en CSS/HTML pur.
Les rendus visuels (les petites démos) sont du HTML qui peut recevoir tes classes site (ex. bg-primary, bg-secondary, etc.) côté Astro/Tailwind uniquement pour l’aperçu.

1) Cibler un élément : 3 façons essentielles

1. Par type de balise — cible toutes les balises d’un même nom (p, h1, a, …).
2. Par identifiant — cible un élément unique portant id="...".
3. Par classe — cible un ou plusieurs éléments portant class="...".

Code (CSS + HTML)

/* Sélecteur de type */
p { color: #333; }

/* Sélecteur d'ID */
#entete { background: #f0f8ff; padding: 1rem; }

/* Sélecteur de classe */
.carte { border: 1px solid #ccc; padding: .5rem; border-radius: .5rem; }

<div id="entete">Je suis l'entête (ID unique)</div>
<p>Paragraphe 1 (tous les &lt;p&gt; deviennent gris foncé).</p>
<p class="carte">Paragraphe 2 dans une "carte".</p>

Rendu visuel (HTML d’exemple — couleurs du site)

2) Sélecteur vs Propriétés : bien comprendre

• Sélecteur : indique où s’applique le style (ex. p, #entete, .carte, nav ul li a…).
• Propriétés : indiquent quoi changer (ex. color, background, padding, font-size…).
• Valeurs : précisent comment (ex. color: red;, padding: 8px;).

Code (CSS + HTML)

/* Sélecteur = .bouton | Propriétés = background, color, padding, border-radius, border */
.bouton {
  background: #007bff;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: .5rem;
  border: none;
  cursor: pointer;
}
.bouton:hover { background: #0065d1; }

<button class="bouton">Bouton stylisé</button>

Rendu visuel (HTML d’exemple — couleurs du site)

3) Combinateurs utiles : descendant & enfant direct

• Descendant (espace) A B : cible tout B à l’intérieur de A (peu importe la profondeur).
• Enfant direct (>) A > B : cible uniquement les B enfants directs de A.

Code (CSS + HTML)

/* Tout lien à l'intérieur d'un .carte, même profondément imbriqué */
.carte a { color: #0056b3; text-decoration: underline; }

/* Seulement les <li> qui sont enfants directs d'un <ul> sous .menu */
.menu > ul > li { list-style: "• "; padding-left: .25rem; }

<div class="carte">
  <p>Un <a href="#">lien</a> stylisé.</p>
  <div><span>Imbrication profonde avec <a href="#">un autre lien</a>.</span></div>
</div>

<nav class="menu">
  <ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
  </ul>
  <div>
    <ul>
      <li>(Non ciblé par .menu > ul > li)</li>
    </ul>
  </div>
</nav>

Rendu visuel (HTML d’exemple — couleurs du site)

4) Flexbox pas à pas (en CSS pur)

Flexbox facilite la mise en page 1D (lignes ou colonnes). On l’active avec display: flex sur le conteneur.

4.1 Avant / après display: flex

Code (sans flex)

<section class="boites">
  <div class="b">A</div>
  <div class="b">B</div>
  <div class="b">C</div>
</section>

.boites .b {
  display: inline-block;
  width: 60px; height: 60px;
  background: #eaeaea; border: 1px solid #ccc;
  margin: .25rem; text-align: center; line-height: 60px; border-radius: .5rem;
}

Rendu sans flex (HTML d’exemple — couleurs du site)

Code (avec flex)

.boites-flex { display: flex; gap: .5rem; }
.boites-flex .b {
  width: 60px; height: 60px;
  background: #eaeaea; border: 1px solid #ccc;
  text-align: center; line-height: 60px; border-radius: .5rem;
}

<section class="boites-flex">
  <div class="b">A</div>
  <div class="b">B</div>
  <div class="b">C</div>
</section>

Rendu avec flex (HTML d’exemple — couleurs du site)

4.2 Axe principal & axe transversal

• Axe principal : flex-direction (row par défaut → horizontal).
• Axe transversal : perpendiculaire à l’axe principal.

Code (CSS + HTML)

.ligne { display: flex; flex-direction: row; gap: .5rem; }
.colonne { display: flex; flex-direction: column; gap: .5rem; }

<div class="ligne">
  <div class="b">1</div><div class="b">2</div><div class="b">3</div>
</div>
<div class="colonne">
  <div class="b">1</div><div class="b">2</div><div class="b">3</div>
</div>

Flex direction : Row

Flex direction : Column

4.3 justify-content (axe principal)

Valeurs fréquentes : flex-start, center, flex-end, space-between, space-around, space-evenly.

Code (CSS + HTML)

.demo-justify { display: flex; gap: .5rem; padding: .5rem; border: 1px dashed #ddd; background: #f9f9f9; }
.jc-start   { justify-content: flex-start; }
.jc-center  { justify-content: center; }
.jc-end     { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around  { justify-content: space-around; }
.jc-evenly  { justify-content: space-evenly; }
.demo-justify .b { width:60px; height:60px; border:1px solid #ccc; text-align:center; line-height:60px; border-radius:.5rem; background:#eaeaea; }

<div class="demo-justify jc-start"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>
<div class="demo-justify jc-center"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>
<div class="demo-justify jc-end"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>
<div class="demo-justify jc-between"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>
<div class="demo-justify jc-around"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>
<div class="demo-justify jc-evenly"><div class="b">A</div><div class="b">B</div><div class="b">C</div></div>

Justify-Content : flex-start

Justify-Content : center

Justify-Content : flex-end

Justify-Content : space-between

Justify-Content : space-around

Justify-Content : space-evenly

4.4 align-items (axe transversal)

Valeurs : stretch (défaut), flex-start, center, flex-end, baseline.

Code (CSS + HTML)

.wrap { display:flex; gap:.5rem; height:100px; border:1px dashed #ddd; padding:.5rem; background:#f9f9f9; }
.wrap .b { width:60px; border:1px solid #ccc; text-align:center; border-radius:.5rem; background:#eaeaea; }
.ai-stretch  { align-items: stretch; }
.ai-start    { align-items: flex-start; }
.ai-center   { align-items: center; }
.ai-end      { align-items: flex-end; }
.ai-baseline { align-items: baseline; }

<div class="wrap ai-stretch">
  <div class="b" style="height:40px;line-height:40px;">A</div>
  <div class="b" style="height:60px;line-height:60px;">B</div>
  <div class="b" style="height:80px;line-height:80px;">C</div>
</div>

<div class="wrap ai-start">
  <div class="b" style="height:40px;line-height:40px;">A</div>
  <div class="b" style="height:60px;line-height:60px;">B</div>
  <div class="b" style="height:80px;line-height:80px;">C</div>
</div>

<div class="wrap ai-center">
  <div class="b" style="height:40px;line-height:40px;">A</div>
  <div class="b" style="height:60px;line-height:60px;">B</div>
  <div class="b" style="height:80px;line-height:80px;">C</div>
</div>

<div class="wrap ai-end">
  <div class="b" style="height:40px;line-height:40px;">A</div>
  <div class="b" style="height:60px;line-height:60px;">B</div>
  <div class="b" style="height:80px;line-height:80px;">C</div>
</div>

<div class="wrap ai-baseline">
  <div class="b" style="height:40px; line-height:40px; font-size:12px;">A</div>
  <div class="b" style="height:60px; line-height:60px; font-size:24px;">B</div>
  <div class="b" style="height:80px; line-height:80px; font-size:16px;">C</div>
</div>

align-items: stretch

align-items: flex-start

align-items: center

align-items: flex-end

align-items: baseline

4.5 flex-direction, gap, flex-wrap

Code (CSS + HTML)

.demo-flex { display:flex; gap:.5rem; border:1px dashed #ddd; padding:.5rem; margin-bottom:.5rem; }
.row { flex-direction: row; }
.column { flex-direction: column; }
.nowrap { flex-wrap: nowrap; }
.wrapit { flex-wrap: wrap; }
.demo-flex .b {
  width: 120px; height: 60px;
  background:#eaeaea; border:1px solid #ccc; text-align:center; line-height:60px; border-radius:.5rem;
}

<div class="demo-flex row nowrap">
  <div class="b">1</div><div class="b">2</div><div class="b">3</div>
</div>
<div class="demo-flex column nowrap">
  <div class="b">1</div><div class="b">2</div><div class="b">3</div>
</div>
<div class="demo-flex row wrapit">
  <div class="b">1</div><div class="b">2</div><div class="b">3</div><div class="b">4</div>
</div>

No wrap

Wrap

4.6 Exemple synthèse : display:flex + justify-content + align-items

Code (CSS + HTML)

.synthese {
  display: flex;                 /* activer flex */
  flex-direction: row;           /* axe principal horizontal */
  justify-content: space-between;/* répartir sur l'axe principal */
  align-items: center;           /* centrer sur l'axe transversal */
  gap: 1rem;
  padding: 1rem;
  background: #f6f9fc;
  border: 1px solid #e5eaf0;
  border-radius: .75rem;
}
.synthese .item {
  width: 120px; height: 60px;
  background: #eaeaea;
  border: 1px solid #ccc;
  text-align: center; line-height: 60px; border-radius: .5rem; font-weight: 600;
}

<section class="synthese">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</section>

Aligné verticalement et horizontalement

5) Résumé rapide

• Sélecteur = où appliquer (type, #id, .classe, combinateurs A B, A > B…).
• Propriétés = quoi appliquer (color, padding, background, …).
• Flexbox = mise en page 1D : activer avec display:flex, piloter l’axe avec flex-direction,
  distribuer sur l’axe principal avec justify-content, aligner sur l’axe transversal avec align-items, gérer l’espace avec gap, retourner à la ligne avec flex-wrap.

Mini-fiche Flex (valeurs clés)

• display: flex | inline-flex
• flex-direction: row | row-reverse | column | column-reverse
• justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
• align-items: stretch | flex-start | center | flex-end | baseline
• gap: <longueur>
• flex-wrap: nowrap | wrap | wrap-reverse

6) Atelier : expérimentez

1. Créez trois boîtes.
2. Ajoutez display: flex sur le parent.
3. Testez toutes les valeurs de justify-content et align-items.
4. Alternez flex-direction.
5. Ajoutez gap et testez flex-wrap.

Code de départ (CSS + HTML)

<section class="stage">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</section>

/* Styles de base */
.stage { border:1px dashed #ddd; padding:.5rem; margin:.5rem 0; }

/* Activez/désactivez progressivement ces lignes : */
/* .stage { display:flex; } */
/* .stage { display:flex; justify-content:center; } */
/* .stage { display:flex; justify-content:space-between; align-items:center; } */
/* .stage { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; } */

.box {
  width: 80px; height: 60px; line-height: 60px;
  text-align:center; border:1px solid #ccc; background:#eaeaea; border-radius:.5rem;
  font-weight:600;
}