Module 4 : Premiers pas en CSS

Trois pages. Un seul HTML.

Trois rendus très différents produits à partir d'un seul et même code HTML.

Regarde bien ces trois pages. Elles n'ont rien en commun visuellement : des couleurs différentes, des tailles différentes, une ambiance différente.

Et pourtant, elles partagent exactement le même code HTML. Pas une balise de différence. Seule la feuille de style change.

C'est ça, le CSS : une couche de peinture posée par-dessus ta structure. Ton HTML dit ce que c'est, ton CSS dit à quoi ça ressemble.

Anatomie d'une règle

Le CSS a une grammaire minuscule. Une règle, c'est quatre morceaux :

Anatomie d'une règle CSS : le sélecteur, les accolades, la propriété et sa valeur.

h1 {
  color: green;
}

le sélecteur — qui je vise ? Ici, tous les titres <h1> de la page
les accolades { } — tout ce qui est à l'intérieur s'applique à la cible
la propriété color — qu'est-ce que je change ?
la valeur green — par quoi je le remplace ?

Deux signes minuscules font tout le travail : le deux-points sépare la propriété de sa valeur, le point-virgule termine la déclaration. Oublie l'un des deux et la règle est ignorée en silence — sans message d'erreur. C'est le piège n°1 des débutants, tu es prévenu.

Une feuille à part

Le CSS ne vit pas dans le fichier HTML. Il vit dans son propre fichier, en général style.css, et le HTML va le chercher avec une balise dans le <head> :

<head>
  <meta charset="UTF-8">
  <title>Mes recettes</title>
  <link rel="stylesheet" href="style.css">
</head>

La ligne surlignée fait tout le travail : c'est elle qui branche la feuille de style sur la page.

Le fichier HTML et le fichier style.css reliés par la balise link.

Pourquoi séparer ? Parce qu'un site a dix, cent, mille pages — et une seule feuille de style. Tu changes une couleur à un endroit, tout le site suit. C'est la raison d'être du CSS.

Chez Nuxy : deux onglets

Dans l'éditeur, tu vas voir deux onglets : HTML et CSS.

L'onglet CSS, c'est ton fichier style.css. Nuxy fait la liaison pour toi — tu n'as pas à écrire la balise <link> dans ces exercices. Tu écris ton CSS, il s'applique. Point.

Dans la plupart des exercices, le HTML est déjà écrit : c'est ton terrain de jeu. Ton travail, c'est la feuille de style.

Ton futur meilleur ami : F12

Un dernier truc, juste pour que tu saches qu'il existe. Sur n'importe quel site du monde : clic droit → Inspecter (ou la touche F12).

Une fenêtre s'ouvre et t'affiche le HTML de la page et tout le CSS qui s'y applique. Tu peux même modifier les valeurs en direct pour voir ce que ça donne.

On l'ouvrira pour de vrai au module 6. Pour l'instant, amuse-toi à regarder les sites que tu visites.

Au programme

Six exercices pour poser les bases, du plus simple au plus complet :

Ta première règle — sélecteur, accolades, propriété, valeur
Les couleurs — fonds, textes, et un mot sur les contrastes
La classe — le sélecteur que tu utiliseras 90 % du temps
L'id — pour la pièce unique de la page
Grouper les sélecteurs — une règle pour plusieurs cibles
Le défi : la carte du café de la gare, à mettre en beauté

Prêt ?

Tu as construit des pages. Tu vas maintenant les rendre belles. Allons-y !