Ton premier CSS : la page prend des couleurs

Découvre le langage CSS, et regarde ton site web ne plus ressembler à quelque chose de 1995.

Montre-moi : c’est quoi le CSS

HTML est le squelette de la page. Le CSS est ses vêtements : couleurs, polices, tailles, espacement. Il s’écrit dans un fichier séparé et ressemble à ça :

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Lis-le à voix haute comme ça : « Chaque titre h1, colorie-le bleu foncé. Chaque paragraphe p, fais-le de 18 pixels et gris foncé. »

Chaque règle a trois parties :

un sélecteur (h1) – quoi la règle s’applique,
une propriété (color) – quoi on change,
une valeur (darkblue) – en quoi on le change.

Deux-points séparent la propriété et la valeur, et chaque ligne se termine par un point-virgule. Attention à ces points-virgules – un oublié est l’erreur CSS la plus courante au monde.

Le connecter : parle à ta page de ton CSS

À l’intérieur de ton dossier my-website, crée un nouveau fichier appelé style.css.
Ajoute cette ligne à l’intérieur du <head> de chaque une de tes pages HTML :
```
<link rel="stylesheet" href="style.css">
```
Ça dit : « Tu trouveras le look de cette page dans le fichier style.css. »
Teste que ça marche – mets quelque chose d’impossible à rater dans style.css :
```
body {
  background-color: yellow;
}
```
Enregistre, actualise la page. Tout est jaune ? Ça marche ! (Tu peux supprimer le jaune maintenant.)

Les couleurs en CSS

Tu peux écrire les couleurs comme des mots anglais (red, darkblue, lightgray, tomato, gold…) ou plus précisément comme un code commençant par un dièse : #1d4ed8 est bleu, #16a34a est vert. Mélange n’importe quelle couleur sur htmlcolorcodes.com.

À toi 💪

Habille ton site web avec ses premières couleurs. Dans style.css, définis :

la couleur de fond de toute la page (body),
la couleur de tes titres (h1, h2),
la taille et la couleur de tes paragraphes (p).

Solutions – bien sûr, n’hésite pas à ajuster les couleurs :

🏫 Site web d'école – solution

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Le bleu convient bien à un site d’école – il inspire confiance (c’est pour ça que les banques l’utilisent aussi !).

🙋 Site web personnel – solution

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Un site personnel peut être plus audacieux – l’orange chaleureux dit « cet endroit est vivant ».

🌍 Journal de voyage – solution

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Vert comme les forêts et les prairies – parfait pour un journal de voyage.

⚽ Site web de club – solution

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Le meilleur choix, ce sont les couleurs de ton club – tu joues en rouge ? Alors rouge !

⚠️

Règle de lisibilité : texte foncé sur fond clair (ou l’inverse). Jaune clair sur blanc, c’est illisible. Quand tu n’es pas sûr(e), demande à quelqu’un : « Tu peux lire ça confortablement ? »

✅

Vérifie : Ton site web a ses propres couleurs – et comme ton CSS vit dans un fichier lié à chaque page, toutes tes pages ont été colorées d’un coup. Plutôt malin, non ?

Ce que tu retiens de cette leçon

CSS = le look. Il s’écrit dans un fichier style.css, connecté avec une balise <link> dans <head>.
La règle : selector { property: value; } – et n’oublie pas les points-virgules.
Un fichier CSS habille tout ton site web d’un coup.