Couleurs et typographie

Donner vie à ta page

Tu sais structurer du HTML et relier du CSS. On passe maintenant aux couleurs et à la typographie — ce qui donne vraiment du caractère à une page.

Ces deux éléments font 80% de l'identité visuelle d'un site. Change la couleur et la police — l'ambiance change complètement.

Les couleurs en CSS

CSS accepte plusieurs formats pour une couleur. Comme écrire un nombre en chiffres ou en lettres — même chose, notation différente.

p {
  /* 1. Nom anglais — simple mais limité (~150 couleurs) */
  color: red;
  color: navy;
  color: cornflowerblue;

  /* 2. Hexadécimal — le plus courant, millions de couleurs */
  color: #09183a;   /* bleu marine foncé */
  color: #0052e0;   /* bleu vif */
  color: #ffffff;   /* blanc — raccourci : #fff */
  color: #000000;   /* noir — raccourci : #000 */

  /* 3. RGB — rouge, vert, bleu de 0 à 255 */
  color: rgb(9, 24, 58);

  /* 4. RGBA — comme RGB + transparence de 0 (invisible) à 1 (opaque) */
  color: rgba(9, 24, 58, 0.5);   /* 50% transparent */
  color: rgba(0, 0, 0, 0.15);   /* noir très transparent */
}

Couleur du texte et de fond

Les deux propriétés les plus utilisées :

• color — couleur du texte.
• background-color — couleur du fond.

/* body = toute la page — bonne pratique de définir les couleurs de base ici */
body {
  color: #1a2744;             /* texte bleu foncé */
  background-color: #f4f6fb;  /* fond gris très clair */
}

h1 {
  color: #09183a;  /* titre encore plus sombre */
}

.badge {
  background-color: #0052e0;  /* fond bleu */
  color: #ffffff;              /* texte blanc */
}

La typographie : contrôler le texte

La typographie, c'est l'art de choisir les polices. En CSS, tu contrôles tout l'aspect du texte.

body {
  /* Police de caractères — avec police de secours */
  font-family: 'Arial', sans-serif;

  /* Taille de base de tout le texte */
  font-size: 16px;

  /* Hauteur de ligne — l'espace entre les lignes */
  /* 1.6 = 1.6 × la taille de police = très lisible */
  line-height: 1.6;
}

h1 {
  /* 2.5rem = 2.5 fois la taille de base (16px × 2.5 = 40px) */
  font-size: 2.5rem;

  /* Épaisseur du texte — de 100 (très fin) à 900 (très gras) */
  font-weight: 800;

  /* Espace entre les lettres — légèrement négatif pour les titres */
  letter-spacing: -0.03em;

  /* Alignement du texte : left, center, right, justify */
  text-align: center;
}

p {
  font-style: italic;       /* texte en italique */
  text-decoration: underline; /* soulignement */
  text-transform: uppercase; /* tout en majuscules */
}

Les propriétés clés :

• font-family — la police. Liste séparée par des virgules. Si la première n'est pas disponible, le navigateur essaie la suivante. sans-serif est un type générique — police sans fioritures.
• font-size — la taille. En px (fixe) ou rem (relatif).
• font-weight — l'épaisseur. 400 = normal, 700 = gras, 900 = très gras. Tu peux écrire bold à la place de 700.
• line-height — l'espacement entre les lignes. Entre 1.5 et 1.8, c'est confortable.
• text-align — l'alignement. left par défaut. center pour les titres. Évite justify — difficile à lire sur écran.

Les unités de mesure CSS

En CSS, on précise toujours l'unité avec les nombres (sauf 0 et line-height). Les principales unités :

• px — pixels. Taille fixe. 16px sera toujours 16px, quels que soient les réglages.
• rem — relatif à la taille de base du navigateur (16px par défaut). 1rem = 16px, 2rem = 32px. Si l'utilisateur agrandit son texte dans ses réglages, rem s'adapte aussi. Préfère rem pour les textes.
• em — relatif à la taille du parent. Peut devenir confus.
• % — pourcentage du parent. width: 50% = moitié de la largeur du parent.
• vw / vh — pourcentage de l'écran. 100vw = pleine largeur d'écran.

Google Fonts : des centaines de polices gratuites

Les polices par défaut sur un ordinateur sont limitées (Arial, Times New Roman…). Pour des polices plus modernes, importe une Google Font. C'est gratuit. Ton site aura la même apparence sur tous les ordinateurs.

Va sur fonts.google.com, choisis une police, et Google te donne le code à coller dans ton <head>.

<!-- Étape 1 : importer la police depuis Google -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=optional" rel="stylesheet">

body {
  /* 'Inter' en premier, 'sans-serif' si ça ne charge pas */
  font-family: 'Inter', sans-serif;
}