Introduction au CSS

Le CSS, ou Cascading Style Sheets (feuilles de style en cascade), est un langage utilisé pour définir la disposition, l'apparence et la présentation des éléments d'une page web. Développé par l'organisation W3C en 1996, il est devenu un outil indispensable pour concevoir et créer des sites web.

C'est un peu comme construire une pyramide : on agence soigneusement chaque élément pour créer un produit final à la fois fonctionnel et esthétique.

La pierre brute et les murs peints

Imagine un temple juste après la fin des travaux. Les murs sont debout, les salles sont à leur place, mais partout on voit de la pierre grise et brute. Une page écrite uniquement en HTML ressemble à cela : la structure est prête, avec des titres, des paragraphes et des listes, mais tout est en texte noir sur fond blanc.

Chaque navigateur web possède son propre jeu de styles par défaut qui détermine l'apparence des différents éléments d'une page. C'est pourquoi les titres de différents niveaux ont des tailles de police différentes sur une page.

C'est là que commence la magie du CSS. À l'aide du code, nous pouvons modifier l'apparence de notre page - changer les couleurs, les tailles, les polices, les marges, les arrière-plans et bien d'autres éléments pour que notre page ressemble exactement à ce que nous voulons. Le CSS, c'est la peinture et l'or que les peintres étalaient sur les murs du temple : le HTML dit ce qu'est un élément, et le CSS dit à quoi il doit ressembler.

Néanmoins, tout comme la construction d'une pyramide, le CSS a ses défis. Différents navigateurs peuvent interpréter certains styles différemment, ce qui peut conduire à des résultats inattendus. C'est pourquoi il est important d'apprendre les bonnes pratiques et les techniques permettant d'éviter ce genre de problèmes.

Malgré ces défis, apprendre le CSS est un processus passionnant et créatif : nous créons des sites web qui sont beaux, fonctionnels et agréables pour les utilisateurs.

Pourquoi « en cascade » ?

Plusieurs styles peuvent atteindre le même élément en même temps : le style par défaut du navigateur et tes règles, et parfois plusieurs de tes règles qui ne sont pas d'accord entre elles. Les styles s'écoulent comme l'eau sur les marches d'une cascade, et certains en écrasent d'autres. Des règles claires décident lequel l'emporte - tu les découvriras dans la leçon sur la cascade.

Où écrit-on le CSS ?

Tu peux écrire des styles dans l'attribut style d'un élément, dans une balise <style> dans la section <head>, ou dans un fichier séparé avec l'extension .css, relié au HTML. Le fichier séparé est le choix le plus courant, car une seule feuille de style peut décorer plusieurs pages à la fois. Tu découvriras ces trois façons en détail dans la leçon sur la création d'un projet HTML/CSS.

Qu'apprendras-tu dans ce module ?

• comment se construit une règle CSS et comment fonctionnent les sélecteurs : de balise, de classe, d'identifiant et d'autres plus avancés,
• comment définir les couleurs, les arrière-plans et les polices,
• ce qu'est le modèle de boîte (box model) : les espacements intérieurs, les bordures et les marges,
• comment les éléments se placent côte à côte ou les uns sous les autres (display et le flottement),
• comment positionner les éléments et les superposer,
• comment fonctionnent les pseudo-classes et les pseudo-éléments, et pour finir les filtres et les transformations.

Comment le navigateur traite-t-il le CSS ?

Lorsque tu ouvres une page web, le navigateur effectue plusieurs étapes avant que tu ne voies le résultat final. Tu peux comparer cela au processus de construction d'une pyramide - chaque étape est essentielle :

1. Analyse du HTML et du CSS - le navigateur lit le code HTML et CSS et en analyse la structure.
2. Construction du DOM et du CSSOM - à partir du HTML, le DOM (Document Object Model) est créé, et à partir du CSS, le CSSOM (CSS Object Model). Ce sont deux « plans de construction » que le navigateur combine en un seul ensemble.
3. Création de l'arbre de rendu (Render Tree) - le navigateur combine le DOM avec le CSSOM pour créer un arbre de rendu. Celui-ci détermine quels éléments seront visibles et quels styles leur attribuer.
4. Layout (positionnement) - le navigateur calcule les positions et les dimensions de chaque élément de la page.
5. Paint (rendu) - enfin, le navigateur dessine les pixels à l'écran, créant ce que tu vois.

Ce processus se déroule à une vitesse fulgurante - en millisecondes ! Mais le comprendre t'aidera à écrire un CSS plus efficace.

Un premier aperçu du CSS

Dans la prochaine leçon, tu décortiqueras ta première règle CSS : le sélecteur qui désigne un élément et les déclarations entre accolades qui disent quoi changer. Pour l'instant, il suffit de voir le CSS en action.

Dans l'éditeur ci-dessous, le même HTML reçoit son apparence du fichier style.css. Change la couleur du titre ou du fond et regarde le navigateur repeindre la page aussitôt :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <title>Premier CSS</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <h1>Le temple de Karnak</h1>
10  <p>Le même HTML - c'est le fichier style.css qui lui donne son apparence.</p>
11</body>
12</html>

Tu viens de peindre ton premier mur de temple. Dans les prochaines leçons, pas à pas, tu transformeras la pierre brute du HTML en salles dignes d'un pharaon.