Référence
CSS Visuelle

<p class="rouge">Texte rouge</p>
<p class="bleu">Texte bleu</p>
<p class="vert">Texte vert</p>

<!-- <p> = paragraphe -->

.rouge { color: #e63946; }
.bleu  { color: #3b82f6; }
.vert  { color: #22c55e; }

/* formats de couleur acceptés :
   #e63946   → hexadécimal
   rgb(230, 57, 70) → rgb
   red       → nom anglais */

<p class="petit">Note de bas de page</p>
<p class="corps">Corps courant</p>
<h2 class="sous-titre">Sous-titre</h2>
<h1 class="grand-titre">Titre</h1>

<!-- h1 à h6 = niveaux de titre -->

.petit       { font-size: 12px; }
.corps       { font-size: 16px; }
.sous-titre  { font-size: 24px; }
.grand-titre {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

<p class="fin">300 — fin</p>
<p class="normal-w">400 — normal</p>
<p class="semi-gras">600 — semi-gras</p>
<p class="gras">800 — très gras</p>

.fin       { font-weight: 300; }
.normal-w  { font-weight: 400; }
.semi-gras { font-weight: 600; }
.gras      { font-weight: 800; }

/* La police doit proposer
   la graisse demandée.
   bold = 700, normal = 400. */

<p class="police-sans">
  Le vif renard…
</p>
<p class="police-serif">
  Le vif renard…
</p>
<p class="police-mono">
  Le vif renard…
</p>

.police-sans {
  font-family: Arial, sans-serif;
}
.police-serif {
  font-family: Georgia, serif;
}
.police-mono {
  font-family: 'Courier New', monospace;
}
/* Le 2ᵉ terme = police de secours
   si la 1ère est introuvable */

<p class="aligne-gauche">
  Aligné à gauche
</p>
<p class="aligne-centre">
  Centré
</p>
<p class="aligne-droite">
  Aligné à droite
</p>

.aligne-gauche {
  text-align: left;
}
.aligne-centre {
  text-align: center;
}
.aligne-droite {
  text-align: right;
}
/* left est le défaut.
   justify = texte justifié
   comme dans un journal. */

<p class="interligne-serre">
  Première ligne…
</p>
<p class="interligne-normal">
  Première ligne…
</p>
<p class="interligne-large">
  Première ligne…
</p>

.interligne-serre  {
  line-height: 1.1;
}
.interligne-normal {
  line-height: 1.6;
}
.interligne-large  {
  line-height: 2.2;
}
/* Sans unité = multiple de
   font-size. 1.6 est le standard
   pour un texte confortable. */

<p class="tracking-serre">
  Texte serré
</p>
<p class="tracking-large">
  Texte aéré
</p>
<p class="tracking-caps">
  Titre en majuscules
</p>

.tracking-serre {
  letter-spacing: -0.03em;
}
.tracking-large {
  letter-spacing: 0.12em;
}
.tracking-caps {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
}
/* em = relatif à font-size */

<p class="souligne">
  Texte souligné
</p>
<p class="barre">
  Texte barré
</p>
<!-- <a> = lien, souligné par défaut -->
<a class="lien-propre" href="#">
  Lien propre
</a>

.souligne {
  text-decoration: underline;
}
.barre {
  text-decoration: line-through;
}
.lien-propre {
  text-decoration: none;
}
/* none = enlève le soulignement
   Très utile pour les <a>
   dans les menus de navigation */

<div class="carte">
  Contenu de la carte
</div>

<!-- <div> = boîte générique,
     la balise la plus utilisée
     pour structurer une page -->

.carte {
  border: 2px solid #1a1714;
  /* bordure visible */

  padding: 16px;
  /* espace entre bord et contenu
     — espace INTÉRIEUR */

  margin: 16px;
  /* repousse les voisins
     — espace EXTÉRIEUR */
}

<div class="carte">Contenu</div>

<button class="btn-pad">Bouton</button>

<div class="centree">centré</div>

.carte   { padding: 16px; }

/* 2 valeurs : haut/bas | gauche/droite */
.btn-pad { padding: 8px 24px; }

/* margin: 0 auto = centrage horizontal */
.centree {
  width: 140px;
  margin: 0 auto;
}

/* côtés séparés */
margin-top: 32px;
padding-left: 16px;

<div class="largeur-fixe"></div>
<div class="largeur-moitie"></div>
<div class="largeur-pleine"></div>

.largeur-fixe   { width: 80px; }
.largeur-moitie { width: 50%; }
.largeur-pleine { width: 100%; }

/* limiter la largeur maximum */
max-width: 800px;

/* height = même logique
   Par défaut height: auto
   = s'adapte au contenu */

<div class="bord-solid">solid</div>
<div class="bord-tirets">dashed</div>
<div class="bord-points">dotted</div>
<h2 class="bord-dessous">
  Titre souligné
</h2>

/* épaisseur   style    couleur */
.bord-solid  {
  border: 2px solid #1a1a1a;
}
.bord-tirets {
  border: 2px dashed #3b82f6;
}
.bord-points {
  border: 2px dotted #e91e63;
}
.bord-dessous {
  border-bottom: 3px solid #c95c22;
}
/* border: none; → supprimer */

<div class="coins-carres"></div>
<div class="coins-ronds"></div>
<div class="cercle"></div>
<button class="pilule"></button>

.coins-carres {
  border-radius: 0;
}
.coins-ronds {
  border-radius: 14px;
}
.cercle {
  width: 56px; height: 56px;
  border-radius: 50%;
  /* width = height pour un cercle */
}
.pilule {
  border-radius: 999px;
}

<!-- Ce code va dans le CSS,
     tout en haut, pour s'appliquer
     à l'ensemble du projet. -->

/* À COLLER EN HAUT DE CHAQUE PROJET */
*, *::before, *::after {
  box-sizing: border-box;
}

/* L'étoile * cible TOUS les éléments.
   Avec border-box : width inclut
   déjà le padding et la border.
   Sans ça, les tailles deviennent
   impossibles à calculer. */

<div class="fond-bleu"></div>
<div class="fond-rose"></div>
<div class="fond-semi"></div>

.fond-bleu {
  background-color: #3b82f6;
}
.fond-rose {
  background-color: #e91e63;
}
/* rgba : rouge vert bleu + alpha
   alpha : 0 (invisible) → 1 (plein) */
.fond-semi {
  background-color: rgba(59, 130, 246, 0.2);
}

<div class="degrade-1"></div>
<div class="degrade-2"></div>
<div class="degrade-3"></div>

/* linéaire : direction, départ, arrivée */
.degrade-1 {
  background: linear-gradient(
    to right, #3b82f6, #e91e63
  );
}
.degrade-2 {
  background: linear-gradient(
    135deg, #f9e2af, #c95c22
  );
}
/* radial : du centre vers l'extérieur */
.degrade-3 {
  background: radial-gradient(
    circle, #93c5fd, #1e3a8a
  );
}

<div class="hero">
  Texte par-dessus l'image
</div>

<!-- Ou une vraie balise image -->
<img
  src="photo.jpg"
  alt="Description"
/>

.hero {
  background-image: url('photo.jpg');

  background-size: cover;
  /* cover = remplit sans déformer
     contain = tout visible
     100% = étire (souvent moche) */

  background-position: center;
  /* center / top / bottom
     left / right / top left… */

  background-repeat: no-repeat;
  /* désactive la répétition */
}

<div class="opaque">1.0</div>
<div class="mi-opaque">0.5</div>
<div class="peu-opaque">0.2</div>

.opaque    { opacity: 1;   }
.mi-opaque { opacity: 0.5; }
.peu-opaque{ opacity: 0.2; }

/* Attention : opacity rend transparent
   TOUT l'élément — texte inclus.
   Pour juste le fond :
   background: rgba(0,0,0, 0.5)
   
   opacity: 0 = invisible MAIS
   occupe toujours de la place */

<!-- block : <div> <p> <h1>… -->
<div class="el-block">A</div>
<div class="el-block">B</div>

<!-- inline : <span> <a>… -->
<p>Texte <span class="el-inline">
  span
</span> continu.</p>

<!-- inline-block : côte à côte -->
<span class="el-inline-block">A</span>
<span class="el-inline-block">B</span>

.el-block {
  display: block;
  /* défaut pour div, p, h1… */
}
.el-inline {
  display: inline;
  /* défaut pour span, a, strong… */
}
.el-inline-block {
  display: inline-block;
  /* côte à côte + accepte
     width, height, padding */
}
/* display: none → invisible
   ET retiré de la page */

<div class="parent-relatif">

  <span class="enfant-relatif">
    relative
  </span>

  <span class="enfant-absolu">
    absolute
  </span>

</div>

.parent-relatif {
  position: relative;
  /* référence pour les absolute */
}
.enfant-relatif {
  position: relative;
  top: 8px;
  left: 8px;
  /* décalé depuis sa position */
}
.enfant-absolu {
  position: absolute;
  bottom: 10px;
  right: 10px;
  /* collé en bas à droite
     du parent-relatif */
}

<nav class="barre-nav">
  Menu
</nav>

<h2 class="titre-collant">
  Titre
</h2>

.barre-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  /* reste en haut même si
     on scrolle */
}
.titre-collant {
  position: sticky;
  top: 0;
  /* colle au bord quand
     il l'atteint au scroll */
}
/* z-index : qui est devant */
z-index: 100;

<!-- Le parent = conteneur -->
<div class="conteneur-flex">
  <div class="enfant-a">A</div>
  <div class="enfant-b">B</div>
  <div class="enfant-c">C</div>
</div>

/* Sur le PARENT */
.conteneur-flex {
  display: flex;
  gap: 8px;
}

/* Les ENFANTS */
.enfant-a { background: #3b82f6; }
.enfant-b { background: #e91e63; }
.enfant-c { background: #22c55e; }

<div class="jc-debut">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
<!-- Même structure HTML pour
     jc-milieu, jc-fin,
     jc-entre et jc-egal -->

.jc-debut  { display: flex; justify-content: flex-start; }
.jc-milieu { display: flex; justify-content: center; }
.jc-fin    { display: flex; justify-content: flex-end; }
.jc-entre  { display: flex; justify-content: space-between; }
.jc-egal   { display: flex; justify-content: space-evenly; }

<div class="ai-haut">
  <div class="fi-court">A</div>
  <div class="fi-grand">B</div>
  <div class="fi-court">C</div>
</div>
<!-- Même structure pour
     ai-milieu et ai-bas -->

.ai-haut   {
  display: flex;
  align-items: flex-start;
}
.ai-milieu {
  display: flex;
  align-items: center;
}
.ai-bas {
  display: flex;
  align-items: flex-end;
}
/* Centrer dans les 2 axes : */
display: flex;
justify-content: center;
align-items: center;

<div class="avec-gap">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<div class="avec-wrap">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
</div>

.avec-gap {
  display: flex;
  gap: 16px;
  /* espace entre les enfants */
}
.avec-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* wrap = passe à la ligne
     si pas assez de place.
     Par défaut : nowrap. */
}

<div class="conteneur-parts">
  <div class="part-2">flex: 2</div>
  <div class="part-1">flex: 1</div>
  <div class="part-1">flex: 1</div>
</div>

.conteneur-parts {
  display: flex;
}
.part-2 { flex: 2; }
/* prend 2 parts de l'espace */
.part-1 { flex: 1; }
/* prend 1 part de l'espace */

/* Exemple : sidebar + contenu
   .sidebar { flex: 1; }  → 25%
   .contenu { flex: 3; }  → 75% */

<div class="flex-rangee">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<div class="flex-colonne">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.flex-rangee {
  display: flex;
  flex-direction: row;
  /* → c'est le défaut */
}
.flex-colonne {
  display: flex;
  flex-direction: column;
  /* ↓ les enfants s'empilent */
}
/* row-reverse ← et column-reverse ↑
   existent aussi */

<div class="ombre-legere">
  Contenu
</div>
<div class="ombre-carte">
  Carte
</div>
<div class="ombre-coloree">
  Colorée
</div>

/* décalX décalY flou couleur */
.ombre-legere {
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.ombre-carte {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.ombre-coloree {
  box-shadow: 0 4px 20px rgba(59,130,246,.5);
}
/* inset = ombre vers l'intérieur
   box-shadow: inset 0 3px 8px rgba(0,0,0,.2) */

<button class="curseur-main">
  Bouton
</button>

<button class="curseur-interdit">
  Désactivé
</button>

<div class="curseur-texte">
  Zone de saisie
</div>

.curseur-main {
  cursor: pointer;
  /* main — cliquable
     Les <a> l'ont par défaut */
}
.curseur-interdit {
  cursor: not-allowed;
  /* cercle barré */
}
.curseur-texte {
  cursor: text;
  /* I-beam comme dans un éditeur */
}
/* cursor: default → flèche normal
   cursor: grab    → main ouverte */

<button class="btn-base">
  Sans transition
</button>

<button class="btn-anime">
  Avec transition
</button>

.btn-base {
  background: #3b82f6;
  /* PAS de transition */
}
.btn-base:hover { background: #e91e63; }

.btn-anime {
  background: #3b82f6;
  transition: background 0.3s ease,
              transform  0.3s ease;
}
.btn-anime:hover {
  background: #e91e63;
  transform: scale(1.06);
}
/* :hover = quand la souris
   est posée sur l'élément */

<div class="boite-base">A</div>
<div class="zoom">A</div>
<div class="rotation">A</div>
<div class="decalage">A</div>
<div class="inclinaison">A</div>

.zoom        { transform: scale(1.4); }
.rotation    { transform: rotate(20deg); }
.decalage    { transform: translateY(-16px); }
.inclinaison { transform: skewX(18deg); }

/* combiner : */
transform: scale(1.05) rotate(3deg);

/* Astuce : centrage absolu parfait */
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);