0Pricing
Frontend Academy · Leçon

Couleurs, typographie et modèle de boîte

Appliquez des couleurs avec des valeurs hexadécimales, rgb et hsl, choisissez des polices, définissez les tailles et hauteurs de ligne, puis utilisez les marges, bordures et espacements pour organiser les éléments.

Couleurs, typographie et modèle de boîte est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Valeurs de couleur CSS

CSS prend en charge plusieurs formats de couleur. Utilisez celui qui est le plus clair dans votre contexte : les codes hexadécimaux pour les couleurs d’une marque, hsl() pour modifier facilement les couleurs, rgb() pour les valeurs générées par programmation et les couleurs nommées pour réaliser rapidement un prototype.

color: #2b6cb0;              /* hex */
color: rgb(43, 108, 176);    /* rgb */
color: hsl(212, 61%, 43%);   /* hsl */
color: royalblue;            /* named */
color: rgba(0,0,0,0.5);      /* rgba with alpha */

Couleurs et images d’arrière-plan

Définissez l’arrière-plan des éléments avec background-color. Utilisez background-image avec des dégradés ou des URL. La forme abrégée background combine la couleur, l’image, la position, la taille et la répétition dans une seule déclaration.

background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;

Propriétés des polices

Contrôlez la typographie avec : font-family (famille de polices), font-size (em, rem, px), font-weight (100–900), font-style (italique), line-height (ratio de lisibilité) et letter-spacing (espacement des caractères).

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a202c;
}

Propriétés du texte

Autres styles de texte : text-align (gauche, centré, droite, justifié), text-decoration (souligné, barré, aucun), text-transform (majuscules, première lettre en majuscule), text-overflow: ellipsis pour tronquer le texte.

h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

rem, em et px

px est une unité absolue. em est relatif à la propre taille de police de l’élément (et se transmet en cascade). rem est relatif à la taille de police racine (ce qui le rend prévisible). Utilisez rem pour la plupart des dimensions afin de respecter les préférences de l’utilisateur en matière de taille de police.

html { font-size: 16px; }  /* 1rem = 16px */
.card { padding: 1.5rem; }  /* 24px */
.small { font-size: 0.875rem; } /* 14px */

Le modèle de boîte

Chaque élément HTML est une boîte rectangulaire composée de quatre couches : le contenu (les dimensions réelles de l’élément), le remplissage intérieur (l’espace à l’intérieur de la bordure), la bordure et la marge (l’espace à l’extérieur de la bordure).

/* Total width = content + padding + border */
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px;
}

box-sizing: border-box

Par défaut (content-box), le remplissage intérieur et la bordure s’ajoutent à la largeur déclarée. Avec box-sizing: border-box, le remplissage intérieur et la bordure sont inclus dans la largeur déclarée — ce qui correspond presque toujours à ce que vous souhaitez.

/* Apply globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Now width: 200px includes padding and border */
.card {
  width: 200px;
  padding: 20px; /* doesn't add to width */
}

Fusion des marges

Les marges verticales entre des éléments de type bloc adjacents fusionnent : seule la marge la plus grande s’applique. Les marges d’un parent et de son premier ou dernier enfant fusionnent également. Les enfants de Flexbox et de Grid ne fusionnent pas leurs marges.

Forme abrégée de padding

La forme abrégée padding: top right bottom left définit tous les côtés. Deux valeurs définissent les dimensions verticale et horizontale. Trois définissent les dimensions supérieure, horizontale et inférieure.

padding: 16px;              /* all sides */
padding: 8px 16px;          /* top/bottom  left/right */
padding: 8px 16px 24px;     /* top  left/right  bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */

Propriétés des bordures

Définissez les bordures avec la forme abrégée border: width style color. Pour les côtés individuels : border-top, etc. Utilisez border-radius pour arrondir les coins. outline est similaire, mais n’affecte pas la mise en page.

.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
button:focus {
  outline: 2px solid #3182ce;
  outline-offset: 2px;
}

Dépassement

overflow: hidden découpe le contenu qui dépasse la taille de l’élément. overflow: scroll ajoute des barres de défilement. overflow: auto ajoute des barres de défilement uniquement lorsque cela est nécessaire. Utilisez overflow-x et overflow-y pour contrôler les axes indépendamment.

Vérification rapide

Avec box-sizing: border-box et width: 300px; padding: 20px; border: 2px solid, quelle est la largeur totale affichée de l’élément ?

Récapitulatif : couleurs, typographie et modèle de boîte

Définissez les couleurs avec hex, rgb ou hsl. Appliquez les polices avec la famille, la taille, l’épaisseur et la hauteur de ligne. Chaque élément est une boîte : contenu + remplissage intérieur + bordure + marge. Activez globalement box-sizing: border-box pour obtenir des dimensions prévisibles.

Questions Fréquemment Posées

La leçon « Couleurs, typographie et modèle de boîte » est-elle gratuite ?

Oui — le texte complet de « Couleurs, typographie et modèle de boîte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Couleurs, typographie et modèle de boîte » ?

Appliquez des couleurs avec des valeurs hexadécimales, rgb et hsl, choisissez des polices, définissez les tailles et hauteurs de ligne, puis utilisez les marges, bordures et espacements pour organise… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Couleurs, typographie et modèle de boîte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Sélecteurs et cascade
  2. Couleurs, typographie et modèle de boîte
  3. Bases de display : block, inline, flex, grid
  4. Positionnement : relative, absolute, fixed, sticky
← Retour à Frontend Academy