CSS: Cascading Style
Sheets
2025-2026
HTML et CSS
2
Où écrire le code CSS ?
On peut écrire du code en langage CSS à trois endroits différents :
dans un [Link] (méthode la plus recommandée)
dans l'en-tête <head> du fichier HTML
directement dans les balises du fichier HTML via un attribut style
( méthode la moins recommandée)
3
Où écrire le code CSS ?: dans un [Link]
4
Où écrire le code CSS ?: dans le <head>
5
Où écrire le code CSS ?: directement dans [Link]
6
Le code CSS
Dans un code CSS, il y a trois éléments différents :
Des noms de balises : on écrit les noms des balises dont on veut
modifier l'apparence: Par exemple, si on veut modifier l'apparence de tous
les paragraphes<p>, on doit écrire p.
Des propriétés CSS : les « effets de style » de la page sont rangés dans
des propriétés. Il y a par exemple la propriété:
color qui permet d'indiquer la couleur du texte
font-size qui permet d'indiquer la taille du texte
etc.
Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur.
Par exemple:
pour la propriété color, il faut indiquer le nom de la couleur.
pour font-size, il faut indiquer la taille, etc.
7
Le code CSS: Les Sélecteurs de type
8
Le code CSS: Les Sélecteurs
Inconvénient:
TOUS les paragraphes possèdent la même présentation: tous écrits en bleu.
Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ?
Pour résoudre le problème, on peut utiliser:
l'attribut class
l'attribut id
9
Le code CSS: Les Sélecteurs de classe
Les sélecteurs de classe permettent d’appliquer le même style à un groupe
d’éléments en leur donnant à tous le même attribut de classe.
En CSS3, Les classes sont notées suivant le schéma ci-dessous :
Un point (.) précède le nom de la classe. Il est permis d’utiliser l’attribut de classe
sur de multiples éléments sur une page.
10
Le code CSS: Les Sélecteurs de classe
11
Le code CSS: Les Sélecteurs d’ID
Les sélecteurs d’ID (identifiant)
Les sélecteurs d’ID sont semblables à des sélecteurs de class mais ils sont utilisés
pour cibler un élément unique sur le document.
En CSS3, Les ids sont notés suivant le schéma ci-dessous :
Un symbole dièse (#) précède le nom de l’identifiant.
Les ID sont uniquement utilisés une fois par page (ils devraient idéalement être
réservés à des éléments significatifs.)
1212
Le code CSS: Les Sélecteurs d’ID
1313
Le code CSS: Appliquer un style à plusieurs balises
14
Le code CSS: Les balises génériques
Les balises universelles, dites aussi génériques, permettent d’appliquer une
class mais elles n’ont aucun effet lorsqu’elles sont utilisées seules.
Il existe deux balises génériques
<span></span>
<div></div>
15
Le code CSS: Les balises génériques
16
Le code CSS: Les Sélecteurs
CSS est un langage qui vient compléter le HTML: son rôle est de mettre en forme une
page web.
On peut écrire le code CSS à plusieurs endroits différents: le plus conseillé étant de
créer un fichier séparé portant l'[Link](exemple :[Link]).
En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on
change leur présentation avec des propriétés CSS :
Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre
en forme: soit viser :
toutes les balises d'un même type: écrire leur nom (h1par exemple) ;
certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs
class ou id(.nomclasse ou #nomid) ;
Etc.
17
Le code CSS: Formatage du texte
18
Le code CSS: Formatage du texte
19
Le code CSS: Appliquer un style à un tableau
20
Le code CSS: Appliquer un style à un tableau
La liste pour margin:
margin-top: marge extérieure en haut
margin-bottom: marge extérieure en bas
margin-left: marge extérieure à gauche padding
margin-right: marge extérieure à droite
La liste pour padding:
padding-top: marge intérieure en haut
padding-bottom: marge intérieure en bas
margin
padding-left: marge intérieure à gauche
padding-right: marge intérieure à droite
21
Le code CSS: Super-propriété
22
Le code CSS: Les propriétés
23
Le code CSS: Les liens hypertextes
/* a:active permet de cibler un élément
lorsque celui-ci est activé par
l'utilisateur.
a:visited permet de modifier l'aspect
d'un lien après que l'utilisateur l'a
visité. */
24
Le code CSS: Les propriétés
25
Le code CSS: Les propriétés
26
Le code CSS: Les listes à puces
27
Le code CSS: Les listes numérotées
Les principaux types de liste utilisés :
decimal : par défaut – chiffres décimaux
decimal-leading-zero : les chiffres décimaux avec un zéro devant (01, 02, 03…)
upper-roman : chiffres romains en majuscules
lower-roman : chiffres romains en minuscules
upper-alpha : alphabet en majuscules
lower-alpha : alphabet en minuscules
lower-greek : chiffres grecs
28
Le code CSS: Les listes de définition
29
Le code CSS: Les Sélecteurs
Les sélecteurs définissent les éléments sur lesquelles s'applique un
ensemble de règles CSS.
Les sélecteurs simples
Le Sélecteur de Type permet de cibler les éléments qui
correspondent au nom indiqué.
Le Sélecteur de Classe permet de cibler les éléments en
fonction de la valeur de leur attribut class.
Le Sélecteur d’Identifiant permet de cibler un élément d'un
document en fonction de la valeur de son attribut id.
Le Sélecteur d’Attribut permet de cibler des éléments d'un
document en fonction de la valeur d'un de leurs attributs.
30
Le code CSS: Les Sélecteurs
Le sélecteur d’Attribut permet de cibler des éléments d'un document
en fonction de la valeur d'un de leurs attributs.
31
Les Sélecteurs CSS: Les Combinateurs
Les Sélecteurs d’éléments descendants:
Le combinateur (espace) permet de sélectionner les
nœuds qui sont des descendants (pas nécessairement
des enfants directs) d'un élément donné.
Syntaxe : A B
Ex:Utiliser le sélecteur p a permet d’appliquer des
styles à tous les éléments a contenus dans des
éléments p et seulement aux éléments a contenus
dans des éléments p
2
32
Les Sélecteurs CSS: Les Combinateurs
Les Sélecteurs d’éléments enfants:
Le combinateur '>' permet de sélectionner les nœuds
qui sont des enfants directs d'un élément donné.
Syntaxe : A > B
Ex: Appliquer des styles à tous les liens
(éléments a) qui sont des enfants directs de
l’élément body et uniquement à ceux-ci.
2
1
33
Les Sélecteurs CSS: Les Combinateurs
Les Sélecteurs de voisins directs:
Le combinateur '+' permet de sélectionner les nœuds qui
suivent immédiatement un élément donné.
Syntaxe : A + B
Ex: cibler les éléments a (liens) suivant directement un
élément p.
34
Les Sélecteurs CSS: Les Combinateurs
Les Sélecteurs de voisins:
Le combinateur '~' permet de
sélectionner les nœuds qui
suivent un élément et qui ont le
même parent.
Syntaxe : A ~ B
Ex: p ~ a permettra de cibler
les éléments a qui suivent
(immédiatement ou non) un
élément p et qui ont le même
élément parent.
35
Les Sélecteurs CSS: Les Combinateurs
Sélecteur CSS Signification
* Sélectionne tous les éléments
E, F Sélectionne tous les éléments de type E et de type F
EF Sélectionne tous les éléments F à l’intérieur des éléments E
E>F Sélectionne les éléments F enfants directs des éléments E
E+F Sélectionne tout élément F placé directement après un élément E
Sélectionne tout élément F placé après un élément E dans la page
E~F
en ayant le même parent
36
Le code CSS: Attribuer plusieurs attributs class à un élément HTML
37
Notion de Flux
Le code CSS: Notion de Flux
Le flux d'un document pourrait se définir comme étant le
comportement naturel d'affichage des éléments d'une page web.
Les éléments se succèdent dans l'ordre où ils sont déclarés dans le
code HTML.
Une page web peut être vue comme une succession et un empilement de
boîtes, qu'on appelle « blocs »:<header>,<article>,<nav>, etc. Mais aussi:
les paragraphes<p>, les titres<h1>, etc.
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de
deux catégories :
Les balises inline : c'est le cas par exemple des liens<a></a>.
Les balises block : c'est le cas par exemple des paragraphes<p></p>.
39
Le code CSS: 3 modes d'affichage pour les éléments HTML
block : une balise de type block crée automatiquement un retour à la ligne
avant et après.
un élément "bloc" occupe automatiquement, par défaut, toute la
largeur disponible dans son conteneur et peut être dimensionné à
l'aide des propriétés telles que width, height, min-width, ou min-
height, etc.
inline : une balise de type inline se trouve obligatoirement à l'intérieur
d'une balise block.
Une balise inline ne crée pas de retour à la ligne, le texte qui se
trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la
même ligne (c'est pour cela que l'on parle de balise « en ligne »).
Ces éléments n’ont pas de marges verticales, pas de largeur ou
hauteur personnalisées.
inline-block: les éléments inline-block conservent les mêmes
caractéristiques que les "inline", mais peuvent être dimensionnés.
40
Le code CSS: Modèle par boîtes
Eléments block Eléments inline
p em
h1, h2, h3… strong
header, article, footer… mark
ol, ul, dl a
table Img
… …
41
Le code CSS: la Propriété Display
Possible d’utiliser la propriété Display pour changer le type
d’affichage des éléments.
Par exemple: display:inline-block;
dispaly: none; pour faire disparaître un élément.
Il existe d’autres valeurs possibles pour display.
Important : si la propriété display permet de changer la façon dont un
élément est affiché à l'écran, elle ne modifie absolument pas sa nature
réelle.
Les éléments "block" ne peuvent être emboîtés dans des éléments
"inline", même si on modifie leurs propriétés d'affichage.
42
Le code CSS: Modèle par boîtes
Les blocs sont les uns en-dessous des autres: On peut les imbriquer les uns à
l'intérieur des autres.
La balise inline<a></a> se trouve à l'intérieur d'une balise block et le texte
vient s'insérer sur la même ligne.
43
Le code CSS: Modèle par boîtes
Le code CSS: Modèle par boîtes
Le code CSS: Modèle par boîtes
Le code CSS: Mise en forme de formulaires
47
Le code CSS: Mise en forme de formulaires
48
Le code CSS: Mise en forme de formulaires
49
Le code CSS: Mise en forme de formulaires
50
Le code CSS: Mise en forme de formulaires
/* on applique la même valeur aux 4 côtés*/
/* Haut | droit | bas | gauche */
51
Le code CSS: Mise en forme de formulaires
52
Le code CSS: Exemple de Menu Horizontal
53
Mise en Forme avec Float
Mise en Forme CSS: La propriété Float
La propriété CSS float permet de sortir
un élément du flux normal de la page et de
le faire “flotter” contre un bord de son
élément parent conteneur ou contre un
autre élément flottant.
Float est bien utilisée pour faire flotter
une image à droite ou à gauche d’un texte:
l’entourer avec du texte.
55
Mise en Forme CSS: La propriété Float
56
Mise en Forme CSS: La propriété Float
57
Mise en Forme CSS: La propriété Float
58
Mise en Forme CSS: La propriété Float
59
Mise en Forme avec Flexbox
La Mise en Page avec Flexbox
Flexbox est une méthode de mise en page selon un axe principal,
permettant de disposer des éléments en ligne ou en colonne. Les
éléments se dilatent ou se rétractent pour occuper l'espace disponible.
Pour faire de la mise en page avec Flexbox, il faut :
1) définir un conteneur.
2) et placer à l'intérieur plusieurs éléments.
61
La Mise en Page avec Flexbox par l’exemple
Class= "Header"
Class=
Class=
"Principal"
"partie"
La page est structurée autour d’un élément <div class= " header " > avec un en-tête de
haut niveau à l'intérieur, et un élément <div class= " principal " > contenant trois
éléments <div class= " partie " >.
62
La Mise en Page avec Flexbox
63
La Mise en Page avec Flexbox
64
La Mise en Page avec Flexbox
65
La Mise en Page avec Flexbox
66
La Mise en Page avec Flexbox
Il faut sélectionner les éléments devant être présentés sous forme de boîtes flexibles.
Donner une valeur spéciale à la propriété display du parent de ces éléments
à disposer.
Comme cela concerne les éléments ayant la classe = "partie", la valeur flex sera
affectée à l'élément ayant la classe = " principal " (qui devient un conteneur flex) :
Une disposition en plusieurs colonnes de
largeur égale et toutes de même hauteur.
67
La Mise en Page avec Flexbox
La propriété flex-direction indique la direction de l'axe principal (direction dans
laquelle les enfants flexibles sont disposés).
Cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le
sens de lecture de la langue par défaut du navigateur (de gauche à droite).
68
La Mise en Page avec Flexbox
69
La Mise en Page avec Flexbox
flex-direction peut prendre les valeurs row-
reverse et column-reverse pour disposer les éléments
flex dans la direction inverse.
row-reverse
column-reverse
70
La Mise en Page avec Flexbox
Il arrive, parfois, que les éléments flex débordent du conteneur et brisent cette structure.
Quand les enfants débordent du conteneur
Ajouter la déclaration flex-wrap: wrap; pour la <div class= "principal">.
71
La Mise en Page avec Flexbox
72
La Mise en Page avec Flexbox
Une forme abrégée pour flex-direction et flex-wrap flex-flow
73
La Mise en Page avec Flexbox
Les différentes parties sont affichées, maintenant, sur plusieurs
lignes
Un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le
débordement est déplacé vers le bas sur une ligne supplémentaire.
La déclaration flex: 300px pour les éléments partie signifie que
chacun aura au moins 300px de large.
74
La Mise en Page avec Flexbox
La propriété justify-content permet de définir de quelle manière doit être distribué
l’espace restant dans le conteneur. On l’applique au conteneur et on lui passe l’une des
valeurs suivantes :
flex-start (valeur par défaut) : les éléments vont être concentrés au début du conteneur
(selon leur axe principal)
flex-end : les éléments vont être concentrés à la fin du conteneur (selon leur axe
principal)
center : les éléments vont être centrés dans le conteneur (selon leur axe principal) ;
75
La Mise en Page avec Flexbox
space-between : les éléments vont être régulièrement distribués dans le conteneur.
Les éléments se trouvant contre un bord du conteneur seront collés au bord
space-around : les éléments vont être régulièrement distribués dans le conteneur.
la taille de l’espace entre le conteneur et un élément contre le bord du conteneur sera
deux fois plus petite qu’entre deux éléments
space-evenly : les éléments vont être régulièrement distribués dans le conteneur.
L’espace entre le bord du conteneur et un élément sera le même que celui entre deux
éléments.
76
Flexbox: Taille Modulable des éléments Flex
Contrôler la proportion d'éléments flexibles dans l'espace.
Une valeur de proportion, sans unité, définissant la quantité d'espace disponible que
chaque élément flex prendra le long de l'axe principal.
Chaque élément " partie" a une valeur de 1 Ils prendront tous une portion égale de
l'espace libre après le calcul du remplissage et de la marge.
Cette valeur représente une proportion, c'est-à-dire que le fait de donner une valeur de
400 000 simultanément à tous les éléments flex aurait exactement le même effet.
77
Flexbox: Taille Modulable des éléments Flex
Le premier <div class="partie"> occupe deux fois plus de largeur disponible que chacun des
deux autres
Il y a quatre unités de division disponibles au total (1 + 1 + 2 = 4).
Les deux derniers éléments flexibles en occupent chacun un. Le premier remplit deux unités,
soit 2/4 (la moitié) de l'espace disponible.
78
Flexbox: Taille Modulable des éléments Flex
On peut définir une valeur minimale de taille dans la valeur flex.
Chaque élément flex reçoit d'abord 300px de l'espace disponible.
Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion.
79
Flexbox: Taille Modulable des éléments Flex
80
Flexbox: Taille Modulable des éléments Flex
81
Flexbox: Taille Modulable des éléments Flex
Bloc Basis + espace ajouté = Largeur finale
Bloc 1 200px +200px 400px
Bloc 2 400px +400px 800px
82
Les Bases de CSS Grid
Les Bases de CSS Grid
De la même manière que pour Flexbox, lorsqu’on utilise CSS Grids, on peut imaginer
un conteneur (une sorte de "carton") dans lequel on met les éléments de grid.
On doit déclarer la propriété
.conteneur {
display: grid;
}
84
Les Bases de CSS Grid
85
Les Bases de CSS Grid
86
Les Bases de CSS Grid
Le nombre de colonnes est déduit par le navigateur à partir du nombre de largeurs
distinctes spécifiées. (N largeurs N colonnes).
87
Les Bases de CSS Grid
Attention: Supprimer la hauteur fixe qu'on avait associée à la classe (height: 60px; ).
Elle a pour effet d'assigner une hauteur fixe pour tous les éléments div enfants du conteneur.
88
Les Bases de CSS Grid
La propriété CSS gap permet de créer des espacements entre les éléments.
Garder les mêmes distances entre les rangées et les colonnes
89
Les Bases de CSS Grid
90
Les Bases de CSS Grid
91
Les Bases de CSS Grid
Ce genre de cas illustre la complémentarité entre CSS
Grid et Flexbox.
À chaque fois que la propriété display: grid, le
navigateur représente le conteneur comme un
ensemble d'éléments délimités par des lignes
horizontales et verticales.
Pour réaliser une grid similaire à ce cas, avec des
éléments à cheval sur plusieurs colonnes ou plusieurs
rangées On doit indiquer un point de départ et un
point d'arrivée pour les éléments.
Les propriétés suivantes permettent de déclarer les
éléments :
• grid-column-start indique la ligne verticale de départ de l'élément
• grid-column-end indique la ligne verticale d'arrivée de l'élément
• grid-row-start indique la ligne horizontale de départ de l'élément
• grid-row-end indique la ligne horizontale d'arrivée de l'élément.
92
Les Bases de CSS Grid
93
Les Bases de CSS Grid
94
Les Bases de CSS Grid
95
Les Bases de CSS Grid
Deux approches permettent de définir un layout de grille, en utilisant
un système de lignes et de colonnes.
Les deux peuvent être utilisées pour placer des éléments dans des zones
spécifiques de la grille, et permettent de gérer les tailles et positions.
grid-row-start / grid-column-start : pour un contrôle précis sur la
taille et la position des éléments dans la grille, en particulier pour des
layouts complexes ou dynamiques.
grid-template-areas pour un layout plus structuré.
96
Les Bases de CSS Grid
97
Les Bases de CSS Grid
98
Les Bases de CSS Grid
99
CSS Grid Vs Flex: Quand utiliser l’un ou l’autre ?
grid est parfait pour des mises en page complexes à deux dimensions, où tu as
besoin de contrôler à la fois les lignes et les colonnes.
flex est plus simple et idéal pour des mises en page unidimensionnelles (une
seule ligne ou une seule colonne) avec des éléments flexibles.
Ces deux outils peuvent être utilisés ensemble: CSS Grid pour créer une grille de
colonnes et de lignes, et Flexbox pour aligner les éléments à l’intérieur de chaque
cellule de la grille.
combiner les avantages de chaque outil pour créer des designs plus puissants et
flexibles.
100
Combiner Grid & Flex
101