CSS — Styliser le web

Section 11.1.10 : CSS — Styliser le web

🎯 Objectif pédagogique

Comprendre et écrire du CSS pour styliser une page web. Vous serez capable d'appliquer des couleurs, typographies, espacements et mises en page basiques à votre HTML. Le CSS transforme un squelette HTML en un design professionnel.

De la structure au style

Marc a ouvert son portfolio HTML dans le navigateur. C'est fonctionnel mais... hideux. Du texte Times New Roman noir sur fond blanc, collé au bord de l'écran, sans aucune hiérarchie visuelle. Le HTML définit le quoi — le CSS définit le comment ça apparaît.

CSS (Cascading Style Sheets) est le langage qui stylise le web. Chaque site que vous trouvez beau utilise du CSS.

3 façons d'ajouter du CSS

<!-- 1. CSS externe (recommandé) -->
<link rel="stylesheet" href="style.css">

<!-- 2. CSS interne (dans <head>) -->
<style>
  body \{ font-family: sans-serif; \}
</style>

<!-- 3. CSS inline (à éviter) -->
<p style="color: red;">Texte rouge</p>

Utilisez toujours le CSS externe — séparation des responsabilités.

Sélecteurs CSS

/* Sélecteur d'élément */
h1 \{ color: #111; \}               /* Tous les h1 */
p \{ line-height: 1.6; \}           /* Tous les paragraphes */

/* Sélecteur de classe (le plus utilisé) */
.hero \{ text-align: center; \}     /* <div class="hero"> */
.btn-primary \{ background: #0891B2; \}

/* Sélecteur d'ID (unique) */
#header \{ position: fixed; \}      /* <header id="header"> */

/* Combinaisons */
.card p \{ color: #666; \}          /* Les p DANS .card */
.card > h2 \{ font-size: 1.5rem; \} /* h2 enfant DIRECT de .card */
.card:hover \{ transform: scale(1.02); \} /* Au survol */

/* Pseudo-classes */
a:hover \{ color: #0891B2; \}       /* Lien survolé */
input:focus \{ border-color: blue; \} /* Champ actif */
li:first-child \{ font-weight: bold; \} /* Premier élément */

Box Model — La brique fondamentale

Chaque élément HTML est une boîte (box) composée de 4 couches :

.card \{
  /* Content */
  width: 300px;
  
  /* Padding (espace interne) */
  padding: 20px;            /* Les 4 côtés */
  padding: 20px 30px;       /* Vertical | Horizontal */
  padding: 10px 20px 30px 40px; /* Haut | Droite | Bas | Gauche */
  
  /* Border */
  border: 1px solid #E2DFD8;
  border-radius: 8px;       /* Coins arrondis */
  
  /* Margin (espace externe) */
  margin: 16px;             /* Espace entre les éléments */
  margin: 0 auto;           /* Centrer horizontalement */
\}

/* IMPORTANT : box-sizing */
* \{ box-sizing: border-box; \} /* Padding inclus dans la largeur */

Couleurs et typographie

/* Couleurs */
color: #0891B2;                    /* Hex */
color: rgb(8, 145, 178);          /* RGB */
color: rgba(8, 145, 178, 0.8);   /* RGB + transparence */
color: hsl(187, 91%, 36%);       /* Teinte, Saturation, Luminosité */
background-color: #F5F3EF;        /* Fond */

/* Typographie */
font-family: 'Inter', sans-serif;  /* Police + fallback */
font-size: 16px;                   /* Taille (ou 1rem) */
font-weight: 400;                  /* 100-900 (400=normal, 700=bold) */
line-height: 1.6;                  /* Interligne (1.5-1.8 pour le texte) */
text-align: center;                /* Alignement */
letter-spacing: -0.02em;           /* Espacement des lettres */
text-transform: uppercase;         /* MAJUSCULES */
text-decoration: none;             /* Supprimer le soulignement */

Unités CSS

Exercice : styliser le portfolio

Créez style.css :

/* Reset et base */
* \{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
\}

body \{
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #F5F3EF;
\}

/* Navigation */
nav \{
  background: #fff;
  padding: 1rem 2rem;
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid #E2DFD8;
\}

nav a \{
  text-decoration: none;
  color: #666;
  font-weight: 500;
\}

nav a:hover \{
  color: #0891B2;
\}

/* Sections */
section \{
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1rem;
\}

h1 \{
  font-size: 2.5rem;
  color: #111;
  margin-bottom: 1rem;
\}

h2 \{
  font-size: 1.8rem;
  color: #111;
  margin-bottom: 1rem;
  padding-top: 2rem;
\}

/* Bouton */
.btn \{
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #0891B2;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
\}

.btn:hover \{
  background: #0e7490;
\}

/* Footer */
footer \{
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  border-top: 1px solid #E2DFD8;
  color: #999;
\}

🏋️ Exercice pratique (25 minutes)

1. →Créez le fichier style.css ci-dessus
2. →Liez-le à votre index.html : <link rel="stylesheet" href="style.css">
3. →Ouvrez avec Live Server et observez la transformation
4. →Expérimentez : changez les couleurs, les tailles, les marges
5. →Ajoutez un état :hover sur les liens de navigation

Marc : "C'est comme passer d'un rapport brut à un rapport Final Cut. Le contenu est le même, mais la présentation change tout."