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
styled'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
.csssé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;
}
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
styleattribute:<p style="color: red;">. Quick but unmaintainable. <style>tag — in the page's<head>. Convenient for a single page.- External file — a separate
.cssfile, 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;
}
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!
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>
L'IA a mis tous les styles en inline (attribut style). Convertissez-les en un bloc <style> propre.
h1 { color: blue; }, qu'est-ce que h1 ?