📘 Module 3 — CSS

« Mesurer, nuancer et donner du poids aux mots »

Avant d’aménager la scène du crime, il faut savoir mesurer les distances, choisir la lumière, et donner du poids à chaque mot.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Comprendre les différences entre unités absolues et relatives
Choisir les bonnes unités pour un design responsive
Maîtriser les systèmes de couleurs CSS
Utiliser des fonctions CSS dynamiques modernes
Contrôler l’apparence du texte avec précision
Comprendre les valeurs globales et l’héritage CSS

🧭 3.1 — Unités absolues vs unités relatives

Fixer les distances… ou s’adapter au terrain

En CSS, presque tout se mesure. Mais toutes les unités ne racontent pas la même histoire.

✔ Unités absolues — Immobiles, prévisibles

Elles ne dépendent pas du contexte.

Unité	Description
`px`	Pixel (la plus utilisée)
`cm`, `mm`, `in`	Centimètres, millimètres, pouces
`pt`, `pc`	Points typographiques

div {
  width: 200px;
}

➡️ Avantage : précis ➡️ Inconvénient : peu flexible, peu responsive

✔ Unités relatives — S’adapter à l’environnement

Elles dépendent :

du parent
de la racine (html)
ou du viewport

Unité	Référence
`%`	Taille du parent
`em`	Taille de police du parent
`rem`	Taille de la racine
`vw`	1% de la largeur écran
`vh`	1% de la hauteur écran

p {
  font-size: 1.5rem;
}

div {
  width: 50%;
}

➡️ Parfait pour le responsive ➡️ rem = cohérence globale ➡️ vw / vh = plein écran, landing pages

🎨 3.2 — Couleurs CSS

La lumière change tout

La couleur influence :

la lisibilité
l’émotion
la hiérarchie visuelle

CSS propose plusieurs systèmes.

✔ Hexadécimal — Le classique

color: #3498db;

✔ RGB / RGBA — Avec transparence

color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.5);

✔ HSL / HSLA — Lisible pour l’humain

color: hsl(204, 70%, 53%);
color: hsla(204, 70%, 53%, 0.4);

➡️ Très pratique pour ajuster rapidement :

la teinte
la luminosité
le contraste

✔ Mots-clés CSS

color: red;
background: transparent;

Simple, mais limité.

🧮 3.3 — Fonctions CSS dynamiques

Calculer avant de tirer

▶ `calc()`

width: calc(100% - 50px);
font-size: calc(1rem + 2vw);

▶ `min()`

width: min(400px, 80%);

▶ `max()`

width: max(300px, 50%);

▶ `clamp()` — L’arme parfaite

font-size: clamp(1rem, 2vw, 2rem);

➡️ Jamais trop petit ➡️ Jamais trop grand ➡️ Toujours adaptable

🔤 3.4 — Typographie

Chaque mot a un poids

Police

body {
  font-family: "Roboto", Arial, sans-serif;
}

Taille

p {
  font-size: 1rem;
}

Graisse

h1 {
  font-weight: 700;
}

Interlignage

p {
  line-height: 1.6;
}

Styles & variantes

h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Autres propriétés clés :

font-style
text-decoration
letter-spacing
text-transform

🧬 3.5 — Valeurs globales

Qui hérite de quoi ?

▶ `inherit`

p {
  color: inherit;
}

➡️ Hérite du parent

▶ `initial`

div {
  display: initial;
}

➡️ Valeur par défaut CSS

▶ `revert`

button {
  all: revert;
}

➡️ Retour au style navigateur

🗂️ Conclusion — Tout est question de dosage

Mesures, couleurs, typographie… ce sont les fondations invisibles d’une interface réussie.

Un bon design ne crie jamais. Il respire, il s’adapte, et il tient debout.

🔗 Slug

module-3-css-valeurs-unites-couleurs-et-typographie

Verdict final 🕶️

✔ Le mélange est logique ✔ Le chapitre devient cohérent avec ce titre ✔ Parfaitement placé avant le Box Model

Module 3 — Mesurer, nuancer et donner du poids aux mots