Les bases du CSS : lier une feuille de style et écrire des règles

Jusqu’ici, votre page ressemble à un document des années 1990 : texte noir sur fond blanc, polices par défaut, blocs empilés. C’est normal, le HTML décrit le contenu et sa structure, pas son apparence. L’apparence est le domaine du CSS (Cascading Style Sheets, « feuilles de style en cascade »). Dans cette leçon, vous allez lier une feuille de style au portfolio de Camille, écrire vos premières règles et voir la page se transformer.

Ce que fait le CSS

CSS est un langage de règles : chaque règle dit « tels éléments doivent avoir telle apparence ». Couleurs, polices, marges, positions, tailles, animations : tout se règle en CSS. Le grand avantage est la séparation des rôles : le HTML reste propre et centré sur le sens, et une seule feuille de style peut habiller des dizaines de pages. Changer la couleur principale du site se fait alors en une ligne, au lieu de modifier chaque page.

Trois façons d’ajouter du CSS

Il existe trois manières d’associer du style à une page. Une seule est recommandée.

1. Le style en ligne (à éviter)

L’attribut style place les règles directement dans la balise :

<p style="color: darkgreen;">Texte vert</p>

C’est rapide pour un test, mais ingérable à grande échelle : le style est dispersé, impossible à réutiliser, et il l’emporte sur toutes les autres règles.

2. L’élément style dans le head

<head>
  <style>
    p { color: darkgreen; }
  </style>
</head>

Pratique pour une page unique, mais le style n’est pas partageable avec les autres pages.

3. Le fichier externe (la méthode à retenir)

On écrit le CSS dans un fichier .css, puis on le relie à la page avec l’élément link dans le head. Le navigateur télécharge la feuille une fois et la réutilise pour toutes les pages qui la référencent.

<head>
  <meta charset="UTF-8">
  <title>Camille Morel – Photographe</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Ici, rel="stylesheet" explique la nature de la ressource et href donne son chemin relatif (vous avez appris à les écrire au chapitre précédent). Créez le fichier css/style.css dans votre dossier de projet.

L’anatomie d’une règle CSS

h1 {
  color: #1d4e5f;
  font-size: 2.5rem;
}

• h1 est le sélecteur : il désigne les éléments concernés ;
• les accolades délimitent le bloc de déclarations ;
• color: #1d4e5f; est une déclaration, composée d’une propriété (color), de deux-points, d’une valeur (#1d4e5f) et d’un point-virgule final.

Le point-virgule sépare les déclarations : en oublier un est l’une des causes les plus fréquentes de style qui « ne marche pas ». Un indice : la ligne suivante ne s’applique pas non plus.

Vos premières règles pour le portfolio

Ouvrez css/style.css et écrivez :

/* Réglages généraux de la page */
body {
  font-family: system-ui, sans-serif;
  color: #222222;
  background-color: #fafaf7;
  line-height: 1.6;
}

h1 {
  color: #1d4e5f;
  font-size: 2.5rem;
}

h2 {
  color: #1d4e5f;
  border-bottom: 2px solid #e0a96d;
}

a {
  color: #1d4e5f;
}

Enregistrez, rafraîchissez : la page a déjà une toute autre allure. Les lignes entre /* et */ sont des commentaires : le navigateur les ignore, ils vous servent de repères.

Les propriétés que vous rencontrerez le plus souvent

Il existe plusieurs centaines de propriétés : inutile de les connaître par cœur. La documentation MDN, que vous pouvez consulter à tout moment, décrit chacune d’elles avec des exemples et la liste des valeurs possibles.

Où placer la balise link, et dans quel ordre ?

La balise link se place toujours dans le head. Le navigateur télécharge la feuille avant d’afficher le contenu, afin d’éviter un flash de page « nue » qui change brutalement d’aspect. Si vous reliez plusieurs feuilles, l’ordre compte : à spécificité égale, les règles de la dernière feuille l’emportent sur les précédentes. Pour ce premier site, une seule feuille, style.css, suffira largement.

Un détail qui évite bien des soucis : le chemin de href est toujours relatif à la page HTML qui contient la balise, et non à la feuille de style. Depuis index.html, vous écrivez css/style.css. À l’intérieur de la feuille, en revanche, les chemins vers les images partent du dossier css, d’où le ../images/… vu au chapitre précédent.

Lire et corriger un style qui ne marche pas

Quand une règle semble ne rien faire, procédez avec méthode :

1. vérifiez que la feuille est bien chargée (onglet Réseau, statut 200) ;
2. dans l’inspecteur, sélectionnez l’élément : votre règle apparaît-elle dans le panneau des styles ?
3. si elle est barrée, une autre règle l’emporte (nous verrons pourquoi à la leçon suivante) ;
4. si elle n’apparaît pas du tout, cherchez une faute de frappe dans le sélecteur ou une accolade oubliée plus haut dans le fichier ;
5. si elle apparaît avec un point d’exclamation orange, la propriété ou la valeur est invalide : vérifiez l’orthographe.

Le CSS est indulgent : une déclaration invalide est simplement ignorée, sans bloquer le reste. C’est pratique, mais cela veut dire que les erreurs sont silencieuses. Une accolade fermante oubliée est plus gênante : la règle suivante risque d’être ignorée elle aussi.

Bonnes habitudes dès le départ

• Une déclaration par ligne, indentée de deux espaces ;
• un point-virgule après chaque déclaration, même la dernière ;
• un commentaire pour séparer les grandes parties de la feuille (général, en-tête, projets, pied de page) ;
• des noms de classes en minuscules, avec des tirets, qui décrivent le rôle plutôt que l’apparence (.carte-projet plutôt que .cadre-bleu).

À vous de jouer

Reliez une feuille de style à votre index.html, puis écrivez des règles qui :

1. changent la police et la couleur de fond du body ;
2. donnent une couleur et une taille particulières au h1 ;
3. ajoutent une ligne sous chaque h2 ;
4. centrent le texte du footer.

Ensuite, ajoutez volontairement une faute (par exemple colour: red;) et observez comment l’inspecteur la signale.

body {
  font-family: Georgia, serif;
  background-color: #f6f1e9;
  color: #2b2b2b;
}

h1 {
  color: #7a3b1d;
  font-size: 2.75rem;
}

h2 {
  border-bottom: 3px solid #c98b52;
}

footer {
  text-align: center;
}

Dans la leçon suivante, vous apprenez à cibler précisément les éléments à styler, et à comprendre quelle règle gagne en cas de conflit.