Introduction to CSS — CSS course

C'est quoi le CSS ?

CSS signifie Cascading Style Sheets (feuilles de style en cascade). Si le HTML est le squelette d'une page web, le CSS est la façade : la peinture, la déco, la mise en page.

Sans CSS, une page web ressemble à un document Word des années 90 : texte noir sur fond blanc, Times New Roman, zéro style. Le CSS transforme ce texte brut en quelque chose de visuellement attrayant.

Le CSS ne modifie pas le contenu de la page. Il modifie son apparence : couleurs, tailles, espacements, dispositions, animations.

3 façons d'ajouter du CSS

Il existe trois méthodes pour appliquer du CSS à une page HTML :

Inline : directement dans l'attribut style d'une balise : <p style="color: red;">. Rapide mais impossible à maintenir.
Balise <style> : dans le <head> de la page. Pratique pour une seule page.
Fichier externe : un fichier .css séparé, lié avec <link rel="stylesheet" href="style.css">. La meilleure méthode.

Bonne pratique : Utilisez toujours un fichier externe en production. La séparation HTML / CSS rend le code plus lisible, réutilisable et maintenable. Dans ce cours, on utilisera la balise <style> pour simplifier les exemples.

Anatomie d'une règle CSS

Une règle CSS a toujours la même structure. C'est le cœur du CSS : tout le reste en découle :

sélecteur {
    propriété: valeur;
}

Sélecteur : QUI cibler Propriété : QUOI changer Valeur : COMMENT

Par exemple : h1 { color: blue; } signifie « tous les titres h1, mets-les en bleu ».

Vous pouvez mettre plusieurs propriétés dans un même bloc, et plusieurs règles dans un même fichier. C'est tout le CSS.

Essayez de modifier le code ci-dessous. Changez les couleurs, les tailles, ajoutez de nouvelles règles !

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a web page, CSS is the facade — the paint, the decor, the layout.

Without CSS, a web page looks like a 90s Word document: black text on white background, Times New Roman, zero style. CSS transforms that raw text into something visually appealing.

CSS does not change the page content. It changes its appearance: colors, sizes, spacing, layouts, animations.

3 ways to add CSS

There are three methods to apply CSS to an HTML page:

Inline — directly in a tag's style attribute: <p style="color: red;">. Quick but unmaintainable.
<style> tag — in the page's <head>. Convenient for a single page.
External file — a separate .css file, linked with <link rel="stylesheet" href="style.css">. The best method.

Best practice: Always use an external file in production. Separating HTML from CSS makes your code more readable, reusable and maintainable. In this course, we'll use the <style> tag to keep examples simple.

Anatomy of a CSS rule

A CSS rule always follows the same structure. This is the heart of CSS — everything else builds on it:

selector {
    property: value;
}

Selector — WHO to target Property — WHAT to change Value — HOW

For example: h1 { color: blue; } means "all h1 headings, make them blue".

You can put multiple properties in a single block, and multiple rules in a single file. That's all CSS is.

Try modifying the code below. Change the colors, sizes, add new rules!

Essayez vous-même

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Prends ce HTML brut et ajoute du CSS pour le rendre visuellement attrayant : <h1>Mon site</h1><p>Bienvenue sur ma page.</p><ul><li>Accueil</li><li>Contact</li></ul>

Ré-explique sans regarder

Quand l'IA te rend du CSS, elle peut le placer en inline, dans une balise <style> ou dans un fichier externe. Avec tes mots : cite ces trois façons et dis laquelle tu gardes en production, et pourquoi.

Une bonne explication cite les trois : style="…" en inline (rapide mais impossible à maintenir), la balise <style> dans le <head> (pratique pour une seule page), et le fichier .css externe lié par <link>. En production on garde le fichier externe : il sépare contenu et présentation, et le même style se réutilise sur toutes les pages.

Exercice : Corrigez le code de l'IA

L'IA a mis tous les styles en inline (attribut style). Convertissez-les en un bloc <style> propre.

Corrigez le code

Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA de styliser un titre et deux paragraphes. Elle te rend ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

<h1 style="color:#2563eb; font-size:32px;">Mon site</h1>
<p style="color:#374151; font-size:18px;">Bienvenue.</p>
<p style="color:#374151; font-size:18px;">Bonne visite.</p>

À rejeter, ou plutôt à refactorer. Tout est en inline avec l'attribut style : le même color et font-size est dupliqué sur chaque paragraphe. Ce n'est pas un bug (la page s'affiche), mais c'est ingérable dès qu'on a dix paragraphes. Le réflexe pro : un bloc <style> avec un sélecteur p { … } (ou mieux, un fichier .css externe). On ne répète jamais le style ligne par ligne.

Rappel libre

Sans remonter dans la leçon : dans la règle h1 { color: blue; }, nomme les trois parties (qui est le sélecteur, la propriété, la valeur ?).

h1 est le sélecteur (QUI on cible : tous les titres h1). color est la propriété (QUOI on change : la couleur du texte). blue est la valeur (COMMENT : en bleu). On peut mettre plusieurs propriétés dans le même bloc, chacune finie par un point-virgule.

CSS signifie...

Computer Style Sheets Cascading Style Sheets Creative Style System

Quelle est la meilleure façon d'ajouter du CSS en production ?

En inline avec l'attribut style Dans une balise <style> dans le head Dans un fichier .css externe

Dans h1 { color: blue; }, qu'est-ce que h1 ?

Une propriété Un sélecteur Une valeur

Next step

You now know how to write a CSS rule. But how do you target exactly the right element on the page? In the next lesson we dive into selectors: classes, ids, descendants and the famous specificity that decides which rule wins.

Lesson 2: Selectors and properties →