CHAPITRE 3 : INTRODUCTION AU CSS (Cascading Style Sheets)
Objectifs pédagogiques
À la fin de ce chapitre, l’apprenant devra être capable de :
Comprendre le rôle et l’utilité du CSS dans la création d’un site web.
Identifier les différentes manières d’intégrer du CSS dans un document HTML.
Connaître la structure et le fonctionnement d’une règle CSS.
Utiliser les propriétés les plus courantes pour styliser le texte, les couleurs, les marges,
les bordures et les arrière-plans.
Comprendre la logique du modèle de boîte et la disposition des éléments sur une page.
Introduction
Lorsqu’on crée une page web en HTML, on obtient une structure correcte, mais visuellement
simple : des textes, des images et des liens, souvent sans couleurs ni organisation particulière.
Le CSS, ou Cascading Style Sheets (feuilles de style en cascade), est le langage qui permet
de mettre en forme et d’embellir ces pages HTML.
Son rôle principal est de séparer le contenu de la présentation.
Autrement dit, le HTML s’occupe du contenu (ce qu’on veut afficher), tandis que le CSS
gère le style (la manière dont cela s’affiche).
Cette séparation rend les sites plus propres, plus faciles à maintenir, et permet d’appliquer une
même mise en forme sur plusieurs pages à la fois.
Le CSS est aujourd’hui un outil incontournable du web, utilisé dans tous les sites modernes.
Grâce à lui, une simple page blanche peut devenir un site élégant, coloré et agréable à
parcourir.
I. Qu’est-ce que le CSS ?
Le CSS est un langage de mise en forme destiné à décrire l’apparence des documents HTML.
Il permet de définir des styles tels que la police de caractères, la taille du texte, la couleur,
la marge entre les éléments ou encore la disposition du contenu sur la page.
On parle de “feuilles de style en cascade” car les règles CSS s’appliquent dans un ordre
hiérarchique, du plus général au plus précis.
Cette notion de cascade signifie que, si plusieurs règles concernent le même élément, la plus
spécifique prendra le dessus.
Le CSS rend donc les sites web non seulement plus esthétiques, mais aussi plus cohérents et
faciles à adapter à différents supports (ordinateur, tablette, téléphone).
II. Les modes d’intégration du CSS
Il existe plusieurs manières d’utiliser le CSS dans une page web.
Chaque méthode a ses avantages selon le contexte et la taille du projet.
1. Le style en ligne
Il consiste à écrire directement le style à l’intérieur de la balise HTML.
Cette méthode est rapide à mettre en œuvre, mais déconseillée pour des projets complets, car
elle mélange structure et présentation.
2. Le style interne
Ici, les règles CSS sont placées dans une section spécifique du document HTML,
généralement à l’intérieur de la balise <head>.
C’est une méthode adaptée pour des pages simples ou des exercices pratiques.
3. Le style externe
C’est la méthode la plus propre et la plus utilisée.
Les styles sont placés dans un fichier séparé, généralement nommé [Link], qui sera ensuite
relié à la page HTML.
Cette approche permet de réutiliser les mêmes règles pour plusieurs pages et de modifier
facilement le design d’un site entier.
III. La structure d’une règle CSS
Une règle CSS se compose de deux parties principales :
Le sélecteur, qui indique quel élément HTML sera stylisé.
Les propriétés, qui décrivent le style à appliquer.
Chaque propriété est accompagnée d’une valeur qui précise le rendu souhaité (par exemple,
la couleur, la taille ou l’alignement).
Les règles CSS sont simples à lire et à comprendre : elles ressemblent à une série
d’instructions précises données à la page web.
IV. Les sélecteurs CSS
Les sélecteurs permettent de cibler les éléments HTML auxquels on souhaite appliquer un
style.
Il en existe plusieurs types, chacun ayant son utilité :
Le sélecteur de balise, qui s’applique à tous les éléments d’un même type (ex. tous les
paragraphes, tous les titres, etc.).
Le sélecteur de classe, utilisé pour styliser des éléments identifiés par un nom de
classe particulier.
Le sélecteur d’identifiant (ID), réservé à un élément unique dans la page.
Le sélecteur descendant, qui cible un élément placé à l’intérieur d’un autre.
Le sélecteur universel, qui peut s’appliquer à l’ensemble du document.
Grâce à ces différents sélecteurs, le concepteur a un contrôle précis sur l’apparence de chaque
élément de la page.
V. Les principales propriétés CSS
Le CSS regroupe des centaines de propriétés.
Voici les catégories les plus importantes à connaître pour débuter :
1. Les propriétés de texte
Elles permettent de définir la police, la taille, la couleur, l’espacement, l’alignement et le style
du texte.
Elles influencent directement la lisibilité et l’esthétique du contenu.
2. Les propriétés de couleur et de fond
Elles servent à appliquer des couleurs, des dégradés ou des images d’arrière-plan sur
différents éléments de la page.
Elles contribuent grandement à l’identité visuelle du site.
3. Les propriétés de bordure et d’encadrement
Elles permettent d’ajouter des contours aux éléments, de définir leur épaisseur, leur style ou
leurs coins arrondis.
Elles sont très utilisées pour créer des zones visuellement distinctes.
4. Les marges et espacements
Le CSS gère finement les espaces autour et à l’intérieur des éléments grâce aux notions de
marge (margin) et de remplissage (padding).
Ces propriétés permettent d’organiser le contenu et d’aérer la mise en page.
5. Les dimensions
On peut fixer la largeur, la hauteur ou les proportions d’un élément.
Cela aide à construire des mises en page précises et équilibrées.
VI. Le modèle de boîte (Box Model)
Dans le CSS, chaque élément d’une page est représenté comme une boîte rectangulaire.
Cette boîte est composée de quatre zones :
1. Le contenu (le texte ou l’image).
2. Le remplissage (padding), qui ajoute un espace entre le contenu et la bordure.
3. La bordure, qui entoure le contenu.
4. La marge (margin), qui sépare l’élément des autres autour de lui.
Comprendre ce modèle est essentiel, car il détermine la manière dont les éléments s’alignent,
se superposent ou s’écartent les uns des autres.
VII. Les pseudo-classes et états
Le CSS peut aussi modifier l’apparence d’un élément selon son état.
Par exemple, un lien peut changer de couleur lorsqu’on le survole, lorsqu’il a déjà été visité
ou lorsqu’on clique dessus.
Ces effets sont gérés à l’aide de pseudo-classes, qui permettent d’améliorer l’interactivité et
le confort visuel de la navigation.
VIII. Organisation et bonnes pratiques
Pour qu’un fichier CSS soit lisible et facile à maintenir, il est conseillé de :
Regrouper les styles par section (texte, couleurs, structure…).
Utiliser des noms de classes clairs et cohérents.
Commenter les parties importantes du code.
Éviter de multiplier les styles inutiles.
Une bonne organisation permet de gagner du temps lors des modifications ou de la
collaboration avec d’autres développeurs.
CHAPITRE 3 : LANGAGE CSS (12h)
Objectif : Comprendre et appliquer les styles
Objectifs pédagogiques
À la fin de ce chapitre, l’apprenant devra être capable de :
Comprendre le rôle et l’utilité du CSS dans la création d’un site web.
Identifier les différentes manières d’intégrer du CSS dans un document HTML.
Connaître la structure et le fonctionnement d’une règle CSS.
Utiliser les propriétés les plus courantes pour styliser le texte, les couleurs, les marges,
les bordures et les arrière-plans.
Comprendre la logique du modèle de boîte et la disposition des éléments sur une page.
Introduction du chapitre
Après avoir appris les bases du langage HTML qui sert à structurer le contenu d’une page
web, il est temps de s’intéresser à la présentation de ce contenu. Le langage CSS (Cascading
Style Sheets), en français feuilles de style en cascade, permet justement de définir l’apparence
visuelle des pages web : les couleurs, les polices, les marges, les bordures, les espacements, et
bien plus encore.
Grâce au CSS, un site devient harmonieux, esthétique et agréable à parcourir. Il permet aussi
de séparer la structure du contenu (HTML) de la présentation, ce qui rend les sites plus faciles
à entretenir et à faire évoluer.
I. Introduction au CSS
1. Définition et rôle du CSS
Le CSS est un langage de style qui complète le HTML. Si le HTML construit le squelette
d’une page, le CSS en assure la mise en forme.
Il permet d’agir sur presque tous les éléments visuels d’un site : couleur du texte, taille des
caractères, organisation des blocs, images de fond, position des menus, etc.
Son grand avantage est la possibilité de définir un style unique et de l’appliquer à plusieurs
pages en même temps.
2. Méthodes d’intégration du CSS
Il existe trois principales manières d’ajouter du CSS à une page web :
Méthode interne : le code CSS est écrit à l’intérieur de la balise <style> située dans la
partie <head> du document HTML. Cette méthode est utile pour styliser une seule
page.
Méthode en ligne : le style est appliqué directement dans la balise HTML à l’aide de
l’attribut style. Elle est rapide mais déconseillée pour les grands sites.
Méthode externe : le style est contenu dans un fichier séparé avec l’extension .css. Ce
fichier est ensuite relié au document HTML grâce à la balise <link>. C’est la méthode
la plus professionnelle car elle facilite la maintenance.
3. Les sélecteurs de base
Les sélecteurs permettent de cibler les éléments HTML sur lesquels on veut appliquer un
style.
Les plus courants sont :
Le sélecteur de balise : agit sur tous les éléments d’un même type (ex. tous les <p>).
Le sélecteur de classe : cible un groupe d’éléments partageant une même classe
(utilise un point avant le nom de la classe).
Le sélecteur d’identifiant (id) : s’applique à un seul élément unique (utilise le signe
dièse # avant le nom).
Le sélecteur universel : s’applique à tous les éléments du document (*).
Les sélecteurs combinés : permettent de cibler des éléments spécifiques en fonction
de leur hiérarchie (par exemple div p pour tous les paragraphes dans une division).
4. Les propriétés liées au texte
Le CSS offre une grande variété d’options pour styliser le texte :
La police d’écriture (font-family) : définit le type de caractère.
La taille du texte (font-size) : indique la taille en pixels, en em ou en pourcentage.
La couleur (color) : applique une couleur via un nom, un code hexadécimal ou une
valeur RGB.
Le style du texte (font-style, font-weight, text-decoration) : permet de rendre un texte
en italique, gras ou souligné.
L’alignement (text-align) : aligne le texte à gauche, à droite, au centre ou justifié.
L’interligne et les espacements (line-height, letter-spacing) : règlent la lisibilité.
Ces propriétés contribuent à rendre le contenu clair, esthétique et hiérarchisé.
5. Les propriétés liées à la boîte
Tout élément HTML peut être considéré comme une “boîte” qui contient du contenu.
Les propriétés principales sont :
La marge externe (margin) : espace entre l’élément et les autres.
La bordure (border) : contour visible de la boîte.
La marge interne (padding) : espace entre le contenu et la bordure.
La largeur et la hauteur (width, height) : définissent les dimensions de la boîte.
Le fond (background) : permet d’ajouter une couleur ou une image de fond.
6. Travaux pratiques et exercices
Appliquer un style de texte différent à plusieurs paragraphes.
Modifier les couleurs et espacements de boîtes.
Créer un mini CV avec un fichier CSS externe.
II. Notion de positionnement
Objectif : Maîtriser la disposition des éléments
1. Le modèle de boîte (box-model)
Le modèle de boîte est une notion centrale du CSS. Chaque élément d’une page est entouré de
quatre zones :
le contenu (texte ou image),
le padding,
la bordure,
la marge.
Comprendre ce modèle aide à contrôler les espacements et à organiser visuellement les
éléments de manière cohérente.
2. Le display
La propriété display détermine la manière dont un élément s’affiche dans la page :
block : l’élément occupe toute la largeur disponible (ex. <div>).
inline : l’élément s’affiche dans la ligne courante sans retour à la ligne (ex. <span>).
inline-block : combine les deux comportements.
none : cache l’élément sans le supprimer du code.
Cette propriété est essentielle pour gérer la structure d’une page et construire des mises en
page flexibles.
3. Le positionnement
Le CSS offre plusieurs modes de positionnement :
static (par défaut) : les éléments apparaissent dans l’ordre du code.
relative : permet de déplacer légèrement un élément par rapport à sa position normale.
absolute : positionne un élément par rapport à son conteneur le plus proche.
fixed : l’élément reste fixe même lorsqu’on fait défiler la page.
sticky : combine les comportements relatif et fixe.
4. Concepts complémentaires
Pour compléter la disposition des éléments, on peut utiliser :
float : aligne un élément à gauche ou à droite.
flexbox : une méthode moderne et souple pour organiser des blocs horizontalement ou
verticalement.
grid : un système de grille permettant des mises en page complexes et précises.
5. Travaux pratiques
Réaliser une page avec un en-tête, un menu latéral et un pied de page.
Expérimenter les propriétés display, position et flexbox.
III. Notions avancées
Objectif : Approfondir les techniques CSS
1. Les pseudo-classes
Les pseudo-classes permettent de cibler des états particuliers d’un élément.
Par exemple :
:hover : lorsqu’un utilisateur survole un élément.
:focus : lorsqu’un champ de formulaire est sélectionné.
:first-child, :last-child : pour styliser des éléments selon leur position.
Ces effets apportent de l’interactivité et améliorent l’expérience utilisateur.
2. Les transitions simples
Les transitions permettent de rendre les changements d’état plus doux et naturels.
Elles définissent la durée, le type et le comportement d’un effet visuel lorsqu’une propriété
change.
Elles sont souvent utilisées pour des boutons, des images ou des menus interactifs.
3. Les media queries
Les media queries servent à adapter la présentation d’un site en fonction de la taille de
l’écran ou du type d’appareil.
Elles sont indispensables pour concevoir des sites responsives, c’est-à-dire adaptés aux
ordinateurs, tablettes et smartphones.
4. Les variables CSS
Les variables permettent de stocker des valeurs réutilisables (par exemple une couleur ou une
taille).
Elles facilitent la cohérence du design et simplifient les modifications globales.
5. Autres notions avancées utiles
Z-index : gère la superposition des éléments.
Opacity : règle la transparence.
Transform : applique des rotations ou des zooms.
Animation : permet de créer des effets dynamiques sans JavaScript.