CSS — Le style — LearnCode

C

Cours

Comment fonctionne le CSS

Le CSS (Cascading Style Sheets) s'applique sur le HTML via des sélecteurs.

/* Syntaxe : sélecteur { propriété: valeur; } */

h1 {
  color: #1a1a1a;
  font-size: 2rem;
  font-weight: 700;
}

.carte {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
}

#contact {
  margin-top: 80px;
}

Les 3 façons de lier CSS au HTML

Fichier externe (recommandé) : <link rel="stylesheet" href="css/style.css"> dans le <head>
Balise <style> dans le <head>
Attribut style="" directement sur la balise (déconseillé)

C

Cours

Le Box Model — comprendre l'espace

Chaque élément HTML est une boîte. Cette boîte a 4 couches :

╔══════════════════════════════╗
║           MARGIN              ║  ← espace extérieur (entre les éléments)
║  ┌────────────────────────┐  ║
║  │        BORDER           │  ║  ← bordure
║  │  ┌──────────────────┐  │  ║
║  │  │     PADDING       │  │  ║  ← espace intérieur
║  │  │  ┌────────────┐  │  │  ║
║  │  │  │  CONTENT   │  │  │  ║  ← le contenu (texte, image...)
║  │  │  └────────────┘  │  │  ║
║  │  └──────────────────┘  │  ║
║  └────────────────────────┘  ║
╚══════════════════════════════╝

.boite {
  width: 300px;
  padding: 20px;          /* intérieur : haut/bas gauche/droite */
  border: 1px solid #ccc;
  margin: 40px auto;      /* extérieur : auto = centrer horizontalement */
  box-sizing: border-box; /* padding inclus dans la width — TOUJOURS activer */
}

C

Cours

Flexbox — aligner les éléments

Flexbox est la méthode moderne pour aligner et distribuer des éléments sur un axe.

.container {
  display: flex;
  justify-content: space-between; /* sur l'axe horizontal */
  align-items: center;            /* sur l'axe vertical */
  gap: 24px;                      /* espace entre les enfants */
  flex-wrap: wrap;                /* retour à la ligne si nécessaire */
}

Les valeurs de justify-content

flex-start — aligné à gauche (défaut)
flex-end — aligné à droite
center — centré
space-between — premier à gauche, dernier à droite, espacement égal entre
space-around — espacement égal autour de chaque élément

T

Astuce

Variables CSS & organisation

Les variables CSS permettent de centraliser les valeurs répétées (couleurs, espacements, polices).

/* Dans :root — disponible partout */
:root {
  --couleur-primaire: #1a1a1a;
  --couleur-accent: #e63946;
  --couleur-fond: #f8f9fa;
  --rayon-bordure: 8px;
  --ombre: 0 4px 20px rgba(0,0,0,0.08);
  --transition: 0.2s ease;
}

/* Utilisation */
.bouton {
  background-color: var(--couleur-accent);
  border-radius: var(--rayon-bordure);
  transition: all var(--transition);
}

Si tu veux changer ta couleur principale, tu ne modifies qu'une seule ligne.

C

Cours

Typographie & Google Fonts

La typographie, c'est souvent ce qui fait la différence entre un site amateur et un site pro.

Importer une Google Font

<!-- Dans le <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

/* Dans ton CSS */
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 600; }
p  { font-size: 1rem; }

/* Rem = relatif à la taille de base du navigateur (16px) */

P

Projet

Projet — Styliser la page À propos

Reprends ta page HTML de la Séquence 2 et ajoute un fichier style.css.

Ce que tu dois implémenter

Variables CSS pour les couleurs et espacements
Une Google Font de ton choix
Un header avec fond sombre, texte blanc, nav aligné avec flexbox
Les sections avec du padding confortable
Les compétences affichées sous forme de "tags" stylisés
Les projets en cartes avec ombre et border-radius
Le footer centré, fond gris clair

Ce qu'on évalue

Utilisation des variables CSS
Box model maîtrisé (pas d'espacement aléatoire)
Flexbox utilisé correctement
Rendu visuel soigné

Comment fonctionne le CSS

Les 3 façons de lier CSS au HTML

Le Box Model — comprendre l'espace

Flexbox — aligner les éléments

Les valeurs de justify-content

Variables CSS & organisation

Typographie & Google Fonts

Importer une Google Font

Projet — Styliser la page À propos

Ce que tu dois implémenter

Ce qu'on évalue

Quiz — Séquence 3