Apprendre CSS : guide complet pour mettre en forme une page web
Un tutoriel complet pour comprendre CSS, apprendre à styliser une page, maîtriser les sélecteurs, le modèle de boîte, Flexbox, Grid, le responsive et les bonnes pratiques.
Apprendre CSS
Introduction
CSS est le langage qui permet de mettre en forme une page web.
Si HTML décrit la structure et le contenu, CSS s'occupe de l'apparence : couleurs, tailles, espacements, positions, alignements, animations et adaptabilité à différents écrans.
Sans CSS, une page reste lisible, mais elle est souvent très brute. Avec CSS, elle devient claire, agréable à lire et plus professionnelle.
Dans ce tutoriel, nous allons apprendre CSS progressivement : d'abord la logique générale, puis les sélecteurs, les propriétés essentielles, le modèle de boîte, Flexbox, Grid, le responsive design et enfin quelques bonnes pratiques utiles en projet réel.
Ce que vous allez apprendre
À la fin de ce chapitre, vous saurez :
- comprendre le rôle exact de CSS ;
- écrire une feuille de style simple ;
- relier un fichier CSS à une page HTML ;
- utiliser les sélecteurs les plus courants ;
- modifier les couleurs, les polices et les espacements ;
- comprendre le modèle de boîte ;
- utiliser Flexbox et Grid pour organiser une mise en page ;
- adapter un site à différents écrans ;
- éviter les erreurs fréquentes ;
- construire une page propre et cohérente.
1. CSS, c'est quoi exactement ?
CSS signifie Cascading Style Sheets.
Cascading
Le mot cascading fait référence à la manière dont les règles CSS sont appliquées et priorisées.
Style
CSS définit le style visuel d'une page.
Sheets
Le code CSS est souvent regroupé dans une feuille de style.
Ce que CSS fait vraiment
CSS permet par exemple de :
- changer la couleur d'un texte ;
- définir la taille d'un titre ;
- ajouter de l'espace entre deux éléments ;
- aligner des blocs ;
- créer une grille ;
- rendre une page responsive ;
- animer un bouton au survol.
CSS ne sert pas à décrire le contenu. Il sert à présenter ce contenu de manière claire et cohérente.
2. Comment CSS fonctionne avec HTML
HTML et CSS travaillent ensemble.
- HTML structure le document.
- CSS décide de l'apparence.
Exemple HTML :
<h1>Bienvenue</h1>
<p>Voici ma première page.</p>
Exemple CSS :
h1 {
color: blue;
}
Le HTML dit qu'il y a un titre et un paragraphe. Le CSS dit que le titre doit être bleu.
Préparer votre projet avant d'écrire du CSS
Avant de modifier la couleur d'un texte, il faut savoir où écrire le code.
La méthode la plus simple consiste à créer un petit dossier de projet avec deux fichiers :
index.htmlpour le contenu HTML ;style.csspour la mise en forme.
Structure de départ
mon-projet/
├── index.html
└── style.css
Ce qu'il faut faire dans votre éditeur
- Ouvrez le dossier du projet dans votre éditeur.
- Ouvrez le fichier
index.html. - Créez le fichier
style.csss'il n'existe pas encore. - Ajoutez la liaison CSS dans le
<head>du fichier HTML. - Écrivez le HTML dans
index.htmlet le CSS dansstyle.css.
Exemple minimal complet
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon projet CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue</h1>
<p>Voici ma page HTML.</p>
</body>
</html>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
color: #222;
}
h1 {
color: #1d4ed8;
}
Pourquoi cette étape est importante
Beaucoup de personnes savent écrire une règle CSS, mais ne savent pas encore dans quel fichier la mettre.
Le bon réflexe est simple :
- le contenu dans le fichier HTML ;
- le style dans le fichier CSS ;
- la liaison entre les deux dans la balise
link.
3. Comment relier CSS à une page HTML
Il existe trois façons principales d'utiliser CSS.
Dans un vrai projet, on ouvre d'abord le fichier HTML principal, puis on ajoute la feuille de style CSS avec une balise link.
1. Le CSS interne
On écrit les styles dans la balise style du fichier HTML.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
2. Le CSS externe
On écrit les styles dans un fichier séparé, par exemple style.css.
<link rel="stylesheet" href="style.css">
C'est la méthode la plus utilisée dans les vrais projets, car elle garde le code mieux organisé.
3. Le style en ligne
On écrit le style directement dans l'attribut style de la balise.
<p style="color: red;">Texte rouge</p>
Cette méthode existe, mais elle est peu recommandée pour un vrai projet car elle mélange contenu et présentation.
4. La syntaxe de base de CSS
Une règle CSS est composée de trois éléments :
- un sélecteur ;
- des propriétés ;
- des valeurs.
Exemple :
p {
color: #333;
font-size: 16px;
}
Le sélecteur
Le sélecteur indique quels éléments HTML sont ciblés.
Ici, p cible tous les paragraphes.
La propriété
La propriété indique ce que vous voulez modifier.
Exemples :
color;font-size;margin;padding;background-color.
La valeur
La valeur précise le réglage appliqué à la propriété.
Par exemple, 16px ou #333.
5. Les sélecteurs les plus utiles
Le sélecteur de balise
p {
line-height: 1.6;
}
Il cible tous les paragraphes.
Le sélecteur de classe
.card {
background: white;
}
En HTML :
<div class="card">Contenu</div>
La classe permet de réutiliser un style sur plusieurs éléments.
Le sélecteur d'identifiant
#contact {
padding: 2rem;
}
En HTML :
<section id="contact"></section>
Un identifiant doit rester unique dans la page.
Le sélecteur multiple
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Il permet de cibler plusieurs éléments à la fois.
Le sélecteur descendant
article p {
color: #444;
}
Ici, seuls les paragraphes situés dans un article sont concernés.
6. Les couleurs
Les couleurs font partie des premiers réglages qu'on apprend en CSS.
Nom de couleur
h1 {
color: red;
}
Hexadécimal
h1 {
color: #ff0000;
}
RGB
h1 {
color: rgb(255, 0, 0);
}
RGBA
h1 {
color: rgba(255, 0, 0, 0.7);
}
Le dernier paramètre correspond à la transparence.
Bon réflexe
Privilégiez des couleurs cohérentes et accessibles. Le contraste entre le texte et le fond doit rester suffisant pour une bonne lisibilité.
7. Les unités de mesure
CSS utilise plusieurs types d'unités.
Pixels
h1 {
font-size: 32px;
}
Le pixel est une unité simple à comprendre, mais pas toujours la plus flexible.
em et rem
p {
font-size: 1rem;
}
Ces unités sont très utiles pour construire des interfaces plus adaptables.
emdépend souvent de l'élément parent ;remdépend de la taille de base du document.
Pourcentage
.container {
width: 80%;
}
Le pourcentage dépend de la taille de l'élément parent.
Unités de viewport
.hero {
min-height: 100vh;
}
vh correspond à la hauteur visible de l'écran.
8. Le modèle de boîte
Le modèle de boîte est l'un des concepts les plus importants en CSS.
Chaque élément peut être vu comme une boîte composée de :
- contenu ;
- padding ;
- border ;
- margin.
Exemple visuel
.card {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 16px;
}
Contenu
C'est la partie principale : texte, image ou autre élément.
Padding
L'espace entre le contenu et la bordure.
Border
La bordure autour de l'élément.
Margin
L'espace extérieur entre cet élément et les autres.
box-sizing
Très souvent, on ajoute cette règle :
* {
box-sizing: border-box;
}
Cela rend le calcul de la largeur plus simple et plus prévisible.
9. Le texte et la typographie
La typographie joue un rôle essentiel dans la lisibilité.
Taille du texte
body {
font-size: 16px;
}
Police
body {
font-family: Arial, sans-serif;
}
Hauteur de ligne
p {
line-height: 1.6;
}
Poids du texte
h1 {
font-weight: 700;
}
Alignement
h1 {
text-align: center;
}
Espacement des lettres
h1 {
letter-spacing: 1px;
}
Bon réflexe typographique
Ne multipliez pas les polices et les tailles sans raison. Une hiérarchie simple est souvent plus élégante et plus claire.
10. Les backgrounds et les bordures
Couleur de fond
.section {
background-color: #f5f5f5;
}
Image de fond
.hero {
background-image: linear-gradient(135deg, #1d4ed8, #60a5fa);
background-size: cover;
background-position: center;
}
Bordure
.card {
border: 1px solid #e5e5e5;
}
Coins arrondis
.card {
border-radius: 12px;
}
11. L'affichage et l'organisation des éléments
CSS permet de contrôler la manière dont les éléments se disposent sur la page.
display: block
Un élément bloc prend généralement toute la largeur disponible.
display: inline
Un élément en ligne se place dans le flux du texte.
display: flex
Flexbox sert à aligner des éléments sur un axe.
display: grid
Grid sert à construire des mises en page en deux dimensions.
Nous y reviendrons plus loin.
12. Flexbox
Flexbox est très utile pour aligner les éléments simplement.
Exemple de base
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Ce que cela signifie
display: flexactive le mode flexbox ;justify-contentgère l'alignement horizontal ;align-itemsgère l'alignement vertical.
Quelques propriétés utiles
.container {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
Quand utiliser Flexbox
Flexbox est particulièrement pratique pour :
- une barre de navigation ;
- des cartes alignées ;
- un bouton avec une icône et du texte ;
- des éléments alignés sur une ligne ou une colonne.
13. Grid
Grid est idéal pour organiser des mises en page plus complexes.
Exemple simple
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Explication
display: gridactive la grille ;grid-template-columnsdéfinit les colonnes ;1frsignifie une fraction de l'espace disponible.
Exemple avec une mise en page classique
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 24px;
}
Cette structure est très utile pour une page avec une barre latérale et un contenu principal.
14. Les positions
position: relative
Permet de positionner un élément par rapport à sa place normale.
position: absolute
Permet de sortir l'élément du flux et de le positionner relativement à un parent positionné.
position: fixed
Permet de garder un élément fixé à l'écran, même quand on fait défiler la page.
position: sticky
Permet à un élément de rester collé à un certain point pendant le scroll.
Bon réflexe
Utilisez les positions avec parcimonie. Beaucoup de mises en page peuvent être faites plus proprement avec Flexbox ou Grid.
15. Les pseudo-classes et pseudo-éléments
Pseudo-classe :hover
button:hover {
background-color: #111;
}
Le style change quand la souris passe sur l'élément.
Pseudo-classe :focus
input:focus {
border-color: blue;
}
Très utile pour l'accessibilité.
Pseudo-élément ::before
.badge::before {
content: "• ";
}
Pseudo-élément ::after
.link::after {
content: " ↗";
}
Les pseudo-classes et pseudo-éléments permettent de styliser des états ou des parties précises d'un élément.
16. Les transitions et les animations
Transition
button {
transition: background-color 0.3s ease;
}
Une transition rend un changement de style plus fluide.
Animation simple
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeIn 0.4s ease;
}
Les animations doivent rester utiles et discrètes. Trop d'effets visuels nuisent souvent à la lisibilité.
17. Le responsive design
Un site moderne doit s'adapter à toutes les tailles d'écran.
Le principe
Le responsive design consiste à faire en sorte qu'une page reste lisible sur mobile, tablette et ordinateur.
Media queries
.container {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
Exemple pratique
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.card-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.card-list {
grid-template-columns: repeat(3, 1fr);
}
}
Bonnes pratiques responsive
- pensez d'abord mobile ;
- utilisez des unités flexibles ;
- évitez les largeurs fixes partout ;
- testez sur plusieurs tailles d'écran ;
- gardez des espacements raisonnables.
18. Exemple complet de page stylée
Voici un exemple simple de structure HTML avec son CSS associé.
HTML
<body>
<header class="header">
<h1 class="logo">Mon portfolio</h1>
<nav class="nav">
<a href="#apropos">À propos</a>
<a href="#projets">Projets</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main class="main">
<section class="hero">
<h2>Développeur web</h2>
<p>Je crée des interfaces modernes, propres et efficaces.</p>
</section>
<section class="cards">
<article class="card">Projet 1</article>
<article class="card">Projet 2</article>
<article class="card">Projet 3</article>
</section>
</main>
</body>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #222;
background: #f7f7f7;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 32px;
background: white;
border-bottom: 1px solid #e5e5e5;
}
.nav {
display: flex;
gap: 16px;
}
.main {
max-width: 1100px;
margin: 0 auto;
padding: 40px 24px;
}
.hero {
margin-bottom: 32px;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.card {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid #e5e5e5;
}
Cet exemple rassemble plusieurs notions vues dans le chapitre : structure, typographie, espace, flexbox et grid.
19. Les erreurs fréquentes
Oublier le point-virgule n'est pas toujours grave, mais rester cohérent est important
La syntaxe CSS est assez souple, mais il faut garder un code propre et régulier.
Mal écrire un sélecteur
.card title {
color: red;
}
Ici, le sélecteur ne cible pas ce qu'on veut réellement.
Confondre marge et padding
margin= espace à l'extérieur ;padding= espace à l'intérieur.
Utiliser trop de styles inline
Le style en ligne rend le code plus difficile à maintenir.
Oublier le responsive
Un design beau sur ordinateur peut devenir inutilisable sur mobile si on n'y pense pas dès le départ.
20. Bonnes pratiques à retenir
- garder des sélecteurs simples ;
- éviter de surcharger les styles ;
- utiliser des noms de classes clairs ;
- penser à l'accessibilité ;
- réutiliser les valeurs cohérentes ;
- travailler mobile-first quand c'est possible ;
- tester le rendu sur plusieurs écrans.
21. Résumé
Dans ce tutoriel, nous avons vu :
- ce qu'est CSS ;
- comment CSS fonctionne avec HTML ;
- les sélecteurs, les propriétés et les valeurs ;
- les couleurs, les unités, la typographie et le modèle de boîte ;
- Flexbox et Grid ;
- les positions, les pseudo-classes, les animations et le responsive design ;
- les bonnes pratiques pour écrire du CSS propre.
CSS est un outil essentiel pour construire des interfaces web modernes. Plus vous maîtrisez ses bases, plus vous pourrez créer des pages lisibles, agréables et adaptables.
Exercices
Exercice 1
Créez un style pour un titre principal avec une couleur, une taille et un alignement.
Exercice 2
Créez une carte avec une bordure, du padding, une couleur de fond et des coins arrondis.
Exercice 3
Créez une barre de navigation avec Flexbox.
Exercice 4
Créez une grille de trois colonnes avec Grid.
Exercice 5
Ajoutez une media query pour modifier votre grille sur les petits écrans.
Corrigés
Correction exercice 1
h1 {
color: #1d4ed8;
font-size: 32px;
text-align: center;
}
Correction exercice 2
.card {
background: white;
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
Correction exercice 3
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Correction exercice 4
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
Correction exercice 5
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
Prochaine étape
Une fois CSS bien compris, vous pouvez aller plus loin avec les préprocesseurs, les systèmes de design ou les frameworks CSS. Mais avant cela, le plus important est de bien maîtriser les bases vues dans ce chapitre.