Lier CSS à HTML

Tu as une maison. Il faut maintenant la décorer.

Tu sais créer du contenu HTML : titres, paragraphes, listes, liens, images. Mais tout s'affiche avec le style par défaut du navigateur — texte noir sur fond blanc. Pas très excitant.

C'est là qu'entre le CSS.

C'est quoi le CSS ?

CSS signifie Cascading Style Sheets — feuilles de style. C'est le langage qui contrôle l'apparence de ta page : couleurs, tailles, polices, espaces, mise en page…

Imagine un magazine. HTML, c'est le texte. CSS, c'est le travail du designer : la police, les couleurs, la disposition. Sans CSS, un magazine ressemble à un Word par défaut. Avec CSS, il peut ressembler à Vogue.

💡

CSS ne change pas le contenu. Il change l'apparence. Le même HTML peut avoir des centaines d'apparences différentes. Le projet CSS Zen Garden le montre : même HTML, CSS totalement différents.

La syntaxe CSS : comment ça s'écrit

Une règle CSS a trois parties : qui (le sélecteur), quoi (la propriété), comment (la valeur).

CSS

/* "p" = sélecteur : cible tous les paragraphes */
p {
  /* propriété : valeur ; */
  color: red;       /* texte en rouge */
  font-size: 18px;  /* taille 18 pixels */
}

/* Deuxième règle — cible tous les h1 */
h1 {
  color: #09183a;    /* couleur en hexadécimal (bleu foncé) */
  font-weight: 800;  /* texte très gras */
}

Ce qu'il faut retenir sur la syntaxe :

Le sélecteur dit quels éléments HTML sont concernés.
Les déclarations sont entre accolades { }.
Chaque déclaration = propriété: valeur; — deux-points, puis point-virgule.
Oublie le ; et ça peut tout casser. Erreur fréquente des débutants.
Commentaires CSS : entre /* */.

Les 3 façons d'ajouter du CSS

Il y a trois méthodes. Chacune a son usage.

1. Fichier CSS externe — la bonne méthode

Tu crées un fichier style.css séparé et tu le relies à ta page HTML. C'est la méthode à utiliser dans tous tes projets.

Un seul fichier CSS s'applique à toutes tes pages. Tu changes la couleur principale une seule fois — ça change partout automatiquement.

HTML — dans le <head>

<head>
  <meta charset="UTF-8">
  <title>Ma page</title>
  <!-- On relie le fichier CSS avec la balise link -->
  <link rel="stylesheet" href="style.css">
</head>

La balise <link> est sans fermeture. Elle va dans le <head>. rel="stylesheet" dit "c'est une feuille de style". href pointe vers le fichier CSS.

✅

Bonne pratique : crée un dossier css/ dans ton projet. Ton HTML à la racine, ton CSS dans ce dossier. <link href="css/style.css">.

2. Balise <style> dans le <head>

Tu peux écrire le CSS dans le HTML, dans une balise <style>. Utile pour tester ou pour les petits exemples. Mais si tu as plusieurs pages, tu dois recopier ce CSS dans chaque fichier. Pas pratique.

HTML

<head>
  <style>
    /* Le CSS est écrit directement ici */
    p {
      color: blue;
    }
  </style>
</head>

3. Style inline — à éviter

Tu peux ajouter du CSS directement sur une balise avec l'attribut style. C'est la méthode la moins recommandée. Difficile à maintenir, impossible à réutiliser. Ça mélange contenu et style au même endroit.

Réserve ça aux tests rapides ou aux urgences.

HTML

<!-- Style appliqué uniquement à ce paragraphe -->
<p style="color: red; font-size: 20px;">Texte rouge et grand.</p>

Les sélecteurs de base

Le sélecteur dit "à qui s'applique ce style". CSS propose plusieurs façons de cibler les éléments.

CSS

/* Sélecteur de balise — cible TOUS les <p> de la page */
p { color: gray; }

/* Sélecteur de classe — cible les éléments avec class="mon-titre" */
.mon-titre { font-size: 2rem; }

/* Sélecteur d'identifiant — cible l'élément avec id="header" */
#header { background: #09183a; }

/* Plusieurs sélecteurs à la fois (séparés par des virgules) */
h1, h2, h3 { font-weight: 700; }

Dans le HTML, tu ajoutes classes et identifiants avec les attributs class et id :

HTML — utiliser class et id

<!-- class : ciblé par .mon-titre en CSS -->
<h1 class="mon-titre">Titre stylisé par classe</h1>

<!-- id : ciblé par #header en CSS -->
<div id="header">En-tête avec fond sombre</div>

<!-- Un élément peut avoir plusieurs classes -->
<p class="texte-intro mis-en-avant">Deux classes appliquées.</p>

💡

Class vs ID : une class peut s'utiliser sur autant d'éléments que tu veux. Un id doit être unique — un seul élément par page. En pratique, utilise presque toujours des classes. Les ID sont plutôt pour les ancres (href="#section") ou JavaScript.

// à toi de jouer

Ton premier style CSS

Objectif : stylise chaque élément avec un sélecteur différent. Change la couleur du titre via le sélecteur de balise, la taille du paragraphe via une classe, et le fond du bouton via un identifiant. Essaie de changer les valeurs.

Éditeur live

HTML

CSS

Résultat

// à retenir

CSS contrôle l'apparence. HTML contrôle la structure. Ne mélange pas les deux rôles.
Méthode recommandée : fichier style.css externe, relié avec <link rel="stylesheet" href="style.css">.
Syntaxe CSS : sélecteur { propriété: valeur; } — ne jamais oublier le ;.
Sélecteur de balise : p. De classe : .ma-classe. D'identifiant : #mon-id.
Une classe peut s'utiliser plusieurs fois. Un ID est unique sur la page.
Commentaires CSS : /* comme ça */.