CSS

CSS (Cascading Style Sheets, feuilles de style en cascade) est un langage de feuilles de style utilisé pour définir la présentation visuelle des éléments HTML sur une page web. Il permet de contrôler la mise en page, les couleurs, les polices de caractères, les marges, les espacements, et de nombreux autres aspects graphiques d'un site web.

Le mot "cascade" désigne la manière dont le navigateur combine toutes les règles qui visent un même élément et choisit celle qui l'emporte en cas de conflit (voir Conflit de règles).

Source image

Les styles CSS sont généralement placés dans des fichiers externes portant l'extension .css, par exemple main.css. Ces fichiers sont ensuite liés aux pages HTML à l'aide de la balise <link> dans la section <head> du document.

<head>
  <meta charset="utf-8">
  <title>…</title>
  <link href="main.css" rel="stylesheet">
</head>

Source image

Note

Ne jamais écrire de code CSS directement dans un fichier HTML (attribut style sur une balise ou élément <style> dans le <head>).

Cela entraîne :

Une mauvaise séparation entre la structure (HTML) et la présentation (CSS)
Une maintenance plus difficile
Une réutilisation limitée du code (un même fichier .css peut servir à toutes les pages du site)

Syntaxe

En CSS, la mise en forme repose sur des propriétés appliquées à des éléments HTML. Chaque propriété définit un aspect visuel (comme la couleur ou la taille), et chaque valeur indique comment cet aspect doit être stylisé.

Exemples de propriétés courantes

color : couleur du texte.
font-size : taille de la police.
font-family : famille de polices utilisée.
background-color : couleur de fond d'un élément.
margin : marges extérieures d'un élément (l'espace autour).
padding : marges intérieures (l'espace entre le contenu et la bordure).
border : bordure de l'élément (épaisseur, style, couleur).
width et height : largeur et hauteur.
text-align : alignement horizontal du texte.
display : définit la manière dont l'élément est affiché (block, inline, flex, etc.).

CSS offre des centaines de propriétés permettant de contrôler l'apparence, la disposition et le comportement visuel des éléments HTML.

Source : MDN Web Docs - CSS reference

Structure d'une règle CSS

Une règle CSS est composée de deux parties principales :

Un sélecteur, qui indique à quels éléments HTML s'applique la règle.
Un bloc de déclaration, contenant une ou plusieurs paires propriété-valeur, entre accolades { }.

Chaque propriété est suivie d'un deux-points :, de sa valeur, puis d'un point-virgule ;.

Source : MDN Web Docs - Introduction to CSS syntax: declarations, rulesets, and statements

Source image

Exemple

Il est possible d'appliquer un style à plusieurs sélecteurs à la fois (séparés par une virgule ,), et de définir autant de blocs de règles que nécessaire.

body {
  background-color: #007cb7;
  color: #fff;
}

h1,
p {
  font-family: Webdings, serif;
}

<body>
  <h1>You know this font</h1>
  <p>Well… not really.</p>
</body>

Unités de mesure en CSS

En CSS, il n'existe pas d'unité unique : chaque longueur précise son unité (sauf la valeur 0). Le pixel (px) est l'unité la plus courante, notamment pour définir des dimensions précises ou des espacements fixes.

CSS propose cependant plusieurs autres unités adaptées à différents besoins :

Pourcentages (%) : utilisés pour des largeurs, hauteurs ou marges proportionnelles à l'élément parent (l'élément qui le contient directement), idéaux pour des mises en page flexibles.
em : unité relative à la taille de police de l'élément. Si la police de l'élément vaut 16px, alors 1em = 16px. Exception : dans la propriété font-size, em se rapporte à la taille de police du parent.
rem : semblable à em, mais relative à la taille de police de l'élément racine (<html>), garantissant une échelle cohérente sur tout le document.
vw / vh : unités basées sur la taille de la fenêtre d'affichage (viewport : la zone visible de la page dans le navigateur).
- 1vw = 1% de la largeur de la fenêtre.
- 1vh = 1% de la hauteur de la fenêtre.

Chaque unité a ses usages spécifiques. Pour un site qui s'adapte à toutes les tailles d'écran (responsive design), il est généralement recommandé d'utiliser des unités relatives (rem, %, vw, vh) plutôt que des valeurs fixes en pixels.

Sources :

Couleurs en CSS

En CSS, les couleurs peuvent être définies à l'aide de la notation hexadécimale, composée d'un dièse (#) suivi de six caractères hexadécimaux. Ces caractères représentent les trois composantes de couleur RGB (Red, Green, Blue) : rouge (R), vert (G) et bleu (B). Cette notation est la plus courante car elle est simple, lisible et largement compatible.

Structure de la notation hexadécimale

Un chiffre hexadécimal (base 16) peut prendre 16 valeurs : 0 à 9, puis a (10) à f (15). Deux chiffres hexadécimaux codent donc 16 × 16 = 256 valeurs, de 00 (0) à ff (255).

Une couleur est définie par trois paires de chiffres hexadécimaux (00 à ff), chacune correspondant à une composante RGB :

Rouge (R) → les deux premiers caractères, de 00 (aucun rouge) à ff (rouge maximum)
Vert (G) → les deux suivants, de 00 à ff
Bleu (B) → les deux derniers, de 00 à ff

Chaque composante est codée sur 8 bits, soit 256 valeurs possibles. En combinant ces trois composantes, on obtient :

\(256^3 = 16\,777\,216\) couleurs possibles.

Perception humaine

L'oeil humain ne distingue pas toutes ces nuances : les estimations courantes parlent de quelques millions de couleurs perceptibles, soit moins que ce que CSS peut représenter.

Source image

Note

Si chacune des trois paires est formée de deux caractères identiques (ex. 44, 88, 00), il est possible d'utiliser une forme abrégée à trois caractères (chaque caractère est doublé) :

#448800 → #480
#000000 → #000 noir (absence de couleur)
#ffffff → #fff blanc (toutes les couleurs à pleine intensité)

Sources :

Sélecteurs CSS

Les sélecteurs CSS permettent de cibler des éléments HTML spécifiques afin de leur appliquer des styles définis dans une feuille de style. Ils sont au coeur du fonctionnement du CSS, car ils déterminent où et à quoi les règles s'appliquent dans une page web.

Source : MDN Web Docs - CSS reference (CSS selectors)

Source image

Un même sélecteur peut cibler plusieurs éléments HTML partageant le même nom de balise ou la même classe.

Source image

A l'inverse, plusieurs sélecteurs différents peuvent s'appliquer à un même élément HTML, selon les règles de spécificité et de cascade propres au CSS (voir Conflit de règles).

Source image

Sélecteurs simples

Les sélecteurs simples constituent la base du langage CSS. Ils permettent de cibler des éléments HTML de manière directe, souvent en les combinant pour former des sélecteurs plus complexes.

Sources :

Type selector

Le sélecteur de type cible les éléments en fonction du nom de leur balise HTML.

h1 { … }

ID selector

Le sélecteur d'identifiant (id) permet de cibler un élément unique à partir de la valeur de son attribut id. Chaque identifiant doit être unique dans un même document HTML. Il s'écrit avec un dièse # suivi de la valeur de l'id : #error-msg cible <div id="error-msg">.

#error-msg { … }

Class selector

Le sélecteur de classe cible un ou plusieurs éléments selon la valeur de leur attribut class. Plusieurs éléments peuvent partager la même classe. Il s'écrit avec un point . suivi du nom de la classe : .alert-box cible <div class="alert-box">. Un élément peut avoir plusieurs classes, séparées par une espace (class="alert-box error").

.alert-box { … }

Exemple

h1 {
  color: #721c24;
}

#error-msg {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-box {
  border: 2px solid transparent;
  border-radius: 5px;
}

<div class="alert-box" id="error-msg">
  <h1>This course is hard</h1>
  <p>But it doesn't have to be</p>
</div>

Attribute selector

Les sélecteurs d'attributs permettent de cibler les éléments en fonction de la présence ou de la valeur d'un attribut HTML spécifique.

[type] { … }
[type='text'] { … }
[type*='ssw'] { … }

[type] : l'attribut type est présent.
[type='text'] : sa valeur est exactement text.
[type*='ssw'] : sa valeur contient ssw (ex. password).

Source : MDN Web Docs - CSS reference (Attribute selectors)

Exemple

[for] {
  font-weight: bold;
}

[type='text'] {
  /* green */
  background-color: #d4edda;
}

[type*='ssw'] {
  /* yellow */
  background-color: #fff3cd;
}

<label for="user">Username</label>
<input id="user" type="text">
<br>
<label for="pwd">Password</label>
<input id="pwd" type="password">

Combiner des sélecteurs simples

Ecrits l'un contre l'autre, sans espace, plusieurs sélecteurs simples visent le même élément : p#top cible un <p> dont l'id vaut top.
Le sélecteur universel * cible tous les éléments.
Attention : p #top (avec une espace) a un autre sens, voir le combinateur de descendance ci-dessous.

Combinateurs

Les combinateurs CSS permettent d'établir une relation hiérarchique ou structurelle entre plusieurs sélecteurs. Ils servent à préciser la position ou le lien entre deux éléments dans le document HTML, par exemple "A est un enfant de B" ou "A suit directement B".

Vocabulaire

Descendant : élément contenu dans un autre, à n'importe quel niveau.
Enfant : élément contenu directement dans un autre, appelé son parent.
Voisins (siblings) : éléments qui ont le même parent.

Sources :

Descendant combinator

Le combinateur de descendance, représenté par un espace, cible les éléments correspondant au second sélecteur uniquement s'ils se trouvent à l'intérieur d'un élément correspondant au premier sélecteur. Ce type de sélecteur est souvent appelé sélecteur de descendants.

/* All <span> in a <div> */
div span { … }

Child combinator

Le combinateur d'enfants directs (>) cible uniquement les éléments correspondant au second sélecteur s'ils sont des enfants directs du premier.

/* All <li> directly inside a <ul> */
ul > li { … }

Next-sibling combinator

Le combinateur de voisin direct (+) sélectionne un élément uniquement s'il suit immédiatement un élément donné, et que les deux partagent le même parent.

/* All <p> directly following a <div> */
div + p { … }

Subsequent-sibling combinator

Le combinateur de voisins généraux (~) cible les éléments correspondant au second sélecteur s'ils sont précédés (pas forcément directement) d'un autre élément correspondant au premier sélecteur, ayant le même parent.

/* All <span> following a <p> with the same parent */
p ~ span { … }

Exemple

div span {
  font-weight: bold;
}

p > span {
  /* blue */
  color: #00f;
}

li + li {
  /* red */
  color: #f00;
}

p ~ span {
  text-decoration: underline;
}

<div>
  <p>
    This is a <span>list</span>.
  </p>
  <ul>
    <li>
      <span>Item 1</span>
    </li>
    <li>Item 2</li>
  </ul>
  <span>This is the end!</span>
</div>

Pseudo

Les pseudo-classes et pseudo-éléments permettent de cibler des états ou des parties spécifiques d'un élément HTML. Ils étendent les sélecteurs CSS pour aller au-delà de la simple structure du document. Une pseudo-classe s'écrit avec un deux-points (a:hover), un pseudo-élément avec deux (p::first-letter).

Pseudo-classes

Une pseudo-classe est un mot-clé ajouté à un sélecteur pour définir un état particulier dans lequel l'élément doit se trouver afin que le style s'applique.

Source : MDN Web Docs - CSS reference (Pseudo-classes)

/* Apply when mouse pointer hovers over a link */
a:hover { … }
/* Apply when a link has been visited (is in the browsing history) */
a:visited { … }

Pseudo-elements

Un pseudo-élément est un mot-clé ajouté à un sélecteur pour cibler une partie spécifique du contenu d'un élément (comme la première lettre, la première ligne, ou une zone générée avant ou après le contenu réel).

Source : MDN Web Docs - CSS reference (Pseudo-elements)

/* Only the first letter of the text inside a <p> */
p::first-letter { … }
/* Insert generated content at the start of each <li> (inside it) */
li::before { … }

Exemple

p::first-letter {
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

li::before {
  content: '⦿ ';
}

a:hover {
  text-decoration: line-through;
}

a:visited {
  /* red */
  color: #f00;
}

<p>Some text</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<a href="https://apple.com">Apple</a>
<br>
<a href="https://google.ch">Google</a>

Conflit de règles

Un conflit de règles en CSS se produit lorsque plusieurs règles tentent de définir un style pour le même élément HTML (ou groupe d'éléments). Lorsqu'un tel conflit survient, le navigateur doit déterminer quelle règle appliquer, propriété par propriété. Cette décision repose principalement sur deux mécanismes : la spécificité et l'ordre d'apparition.

Spécificité : Chaque sélecteur CSS possède une spécificité, c'est-à-dire un poids qui détermine sa force lors d'un conflit. Plus la spécificité est élevée, plus la règle a de chances d'être appliquée.
Ordre d'apparition : Si plusieurs règles ont la même spécificité, le navigateur applique celle qui apparaît en dernier dans le code CSS (la dernière du fichier, ou celle du dernier fichier chargé).

Résolution des conflits

Une déclaration marquée !important l'emporte sur les déclarations normales, et les styles du développeur l'emportent sur la feuille de style par défaut du navigateur.
Ensuite, la règle ayant la spécificité la plus élevée est appliquée, même si elle apparaît plus tôt dans le fichier.
Si deux règles ont la même spécificité, celle qui est définie en dernier l'emporte.

Source : MDN Web Docs - Introduction to the CSS cascade

Tip

Comprendre la résolution des conflits CSS est essentiel pour éviter les comportements inattendus dans la mise en forme de vos pages.

Une bonne organisation et une hiérarchie claire des sélecteurs permettent de maintenir un code CSS lisible et prévisible.

Spécificité

La spécificité en CSS est un mécanisme de calcul qui détermine le poids relatif d'un sélecteur lorsqu'un même élément est ciblé par plusieurs règles. Elle permet au navigateur de décider quelle règle appliquer en cas de conflit.

La spécificité est représentée sous la forme d'un nombre à quatre niveaux : 0-0-0-0

Chaque position correspond à un type de sélecteur particulier, de gauche à droite :

Attribut style écrit directement dans une balise HTML (à éviter, voir plus haut)
Nombre d'identifiants (#id)
Nombre de classes (.class), de pseudo-classes (:hover) et de sélecteurs d'attribut ([type])
Nombre de types d'éléments (p) et de pseudo-éléments (::before)

Les niveaux se comparent de gauche à droite : 0-1-0-0 l'emporte sur 0-0-12-0, car un seul identifiant pèse plus que n'importe quel nombre de classes. Le sélecteur universel * et les combinateurs (espace, >, +, ~) ne comptent pas.

Source image

Warning

L'utilisation de !important permet de forcer l'application d'une règle, même si elle a une spécificité inférieure. Cependant, cette pratique est fortement déconseillée, car elle complique la maintenance et le débogage du code CSS. Utilisez-la uniquement en dernier recours.

Source : MDN Web Docs - Specificity

Exemple

p#top {
  /* red */
  color: #f00;
}

p + p {
  /* green */
  color: #0f0;
}

p {
  /* blue */
  color: #00f;
}

<p>1st paragraph</p>
<p id="top">Paragraph with an ID</p>
<p>Last paragraph</p>

1er paragraphe : seul p (0-0-0-1) le cible → bleu.
2e paragraphe : p#top (0-1-0-1) l'emporte sur p + p (0-0-0-2) et p → rouge, bien que la règle soit écrite en premier.
3e paragraphe : p + p l'emporte sur p → vert.

Modèle de boîte

Le modèle de boîte (box model) en CSS est un concept fondamental qui définit comment chaque élément HTML est représenté visuellement sur une page web. Il décrit la manière dont les dimensions d'un élément sont calculées, en tenant compte de son contenu, de son espace interne (padding), de sa bordure (border) et de sa marge (margin).

Contenu : Représente le contenu de l'élément (texte, image, vidéo, etc.). Les propriétés width et height définissent sa largeur et sa hauteur.
Espace interne (padding) : C'est l'espace entre le contenu et la bordure. Défini par padding-top, padding-right, padding-bottom et padding-left.
Bordure (border) : Ligne entourant l'élément, définie par border-width, border-style et border-color.
Marge (margin) : Espace extérieur entre la bordure de l'élément et les éléments voisins. Défini par margin-top, margin-right, margin-bottom et margin-left.

Source : MDN Web Docs - Introduction to the CSS box model

Source image

Block vs Inline

En CSS, les éléments HTML appartiennent à deux catégories principales selon leur comportement d'affichage : les éléments en bloc (block-level elements) et les éléments en ligne (inline elements).

Source : MDN Web Docs - The box model

Source image

Eléments en bloc (block-level elements)

Occupent toute la largeur disponible de leur conteneur.
Commencent sur une nouvelle ligne.
Acceptent les propriétés width, height, margin, padding et border.
Exemples : <h1>, <div>, <p>, <ul>, <form>, <main>, <article>, <aside>, <section>, <nav>, <header>, <footer>, …

Exemple

h1 {
  /* red */
  background-color: #f00;
}

div {
  /* green */
  background-color: #0f0;
}

p {
  /* blue */
  background-color: #00f;
}

<h1>Titles are block-level elements</h1>
<div>
  A DIV is a block-level element.
  <p>A paragraph is also a block-level element.</p>
  Another text...
</div>

Eléments en ligne (inline elements)

Ne commencent pas sur une nouvelle ligne.
S'alignent horizontalement avec les autres éléments du même conteneur.
Leur taille dépend de leur contenu (pas de width ni height personnalisables).
Les marges, padding et bordures verticaux (haut et bas) ne repoussent pas les lignes voisines.
Exemples : <span>, <a>, <strong>, <em>, … (<img> s'affiche aussi en ligne, mais c'est un cas particulier : il accepte width et height).

Exemple

span {
  /* red */
  background-color: #f00;
}

a {
  /* green */
  background-color: #0f0;
}

strong {
  /* blue */
  background-color: #00f;
}

<span>SPAN are inline elements.</span>
<a href="#">Link too</a>
<strong>STRONG also !</strong>

Tip

Le comportement d'un élément peut être modifié à l'aide de la propriété display.

Par exemple : display: inline;, display: block; ou display: inline-block; (l'élément reste dans la ligne, mais accepte width et height).

Content box vs Border box

Par défaut, le CSS utilise le modèle content-box, où la largeur et la hauteur ne concernent que le contenu. Toutefois, l'utilisation de box-sizing: border-box; est souvent préférée, car elle inclut le padding et la border dans le calcul global de la taille de l'élément. Cela simplifie la mise en page et rend les calculs de dimensions plus intuitifs.

Exemple : avec width: 200px, padding: 20px et border: 5px solid, l'élément occupe 250 px de large en content-box (200 + 2 × 20 + 2 × 5), mais 200 px en border-box (le contenu se réduit alors à 150 px).

Source image | Source image

🚨 Bonne pratique : appliquer box-sizing: border-box; à tous les éléments

*,
*::before,
*::after {
  box-sizing: border-box;
}

Le sélecteur universel * cible tous les éléments, mais pas les pseudo-éléments → *::before et *::after les ajoutent.
Chaque boîte reçoit ainsi directement le modèle border-box, sans dépendre de son parent.

content-box reste utile

border-box est une bonne valeur par défaut, mais content-box n'est pas un modèle "dépassé". Il convient lorsque c'est la taille du contenu qui compte, par exemple la largeur d'une colonne de texte : le padding et la border s'ajoutent alors autour. Si l'on doit additionner le padding et la border à la largeur souhaitée pour le contenu, c'est le signe qu'il vaut mieux passer cet élément en content-box :

.article {
  box-sizing: content-box;
  /* width of the text column */
  width: 600px;
  padding: 20px;
}

Sources :

Feuille de style par défaut

Les navigateurs web intègrent chacun une feuille de style par défaut, également appelée feuille de style de l'agent utilisateur (user agent stylesheet). L'agent utilisateur désigne le logiciel qui affiche la page, ici le navigateur. Ces feuilles définissent le rendu initial des éléments HTML (polices, marges, espacements, bordures, alignement, etc.) avant que les feuilles de style personnalisées du développeur ne soient appliquées.

L'objectif de ces feuilles est d'assurer une cohérence minimale du rendu d'une page web, même sans styles spécifiques. Cependant, les styles par défaut peuvent varier légèrement d'un navigateur à l'autre, entraînant parfois des différences visuelles.

Sources :

➡️ Chromium - Default style sheet

➡️ WebKit - Default style sheet

Réinitialiser ou normaliser les styles ?

Pour obtenir un rendu plus homogène entre navigateurs, il est courant d'utiliser une feuille de style de réinitialisation (reset stylesheet) ou une feuille de style de normalisation (normalize stylesheet).

Il est recommandé de normaliser plutôt que de réinitialiser :

Une réinitialisation supprime tous les styles par défaut, nécessitant ensuite de redéfinir manuellement chaque élément, ce qui alourdit les fichiers CSS.
Certaines réinitialisations peuvent affecter l'accessibilité, notamment la navigation au clavier, en modifiant le comportement par défaut d'éléments interactifs.
La normalisation, à l'inverse, corrige seulement les différences entre navigateurs et conserve les comportements utiles des éléments.

➡️ modern-normalize (feuille de style de normalisation)

Polices de caractères

Les polices de caractères déterminent l'apparence du texte sur une page web. Elles se déclinent en plusieurs familles, chacune ayant un style distinct et des usages spécifiques.

Familles principales

Serif (avec empattements, mot-clé CSS serif) :

Les polices serif présentent de petits traits décoratifs aux extrémités des lettres (empattements).
Traditionnelles et formelles, elles sont souvent utilisées pour les longs textes, en particulier imprimés.
Exemples : Times New Roman, Georgia, Garamond.

Sans-serif (sans empattements, mot-clé CSS sans-serif) :

Modernes et épurées, elles sont très répandues sur les écrans.
Exemples : Arial, Helvetica, Verdana.

Monospace (à largeur fixe, mot-clé CSS monospace) :

Chaque caractère occupe le même espace horizontal.
Souvent utilisées pour le code source ou les tableaux de données.
Exemples : Courier New, Consolas, Monaco.

Script (manuscrites, mot-clé CSS cursive) :

Inspirées de l'écriture à la main, ces polices sont élégantes et décoratives.
Exemples : Comic Neue, Pacifico, Lobster.

Fantaisie (décoratives, mot-clé CSS fantasy) :

Créatives et expressives, elles attirent l'attention pour les titres ou logos.

Source : MDN Web Docs - CSS reference (font-family CSS property)

Source image

Utilisation en CSS

L'utilisation d'une police sur une page web se fait en trois étapes.

Sélection de la police
- Si la police est déjà installée sur le système de l'utilisateur, elle peut être référencée directement via font-family.
  
  Source image
- Si la police n'est pas installée sur l'ordinateur de l'utilisateur, elle doit être hébergée sur le serveur du site ou chargée depuis un service externe (comme Google Fonts).
  
  Source image
Inclusion de la police
- Police hébergée sur le serveur du site : utiliser la règle @font-face pour déclarer la police et indiquer le chemin du fichier (format WOFF2, Web Open Font Format 2, conçu pour le web).
```
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url('roboto.woff2') format('woff2');
}
```
- Police hébergée par un service externe : suivre les instructions du fournisseur (Google Fonts, Adobe Fonts, etc.), soit un élément <link> dans le <head> du HTML, soit une règle @import au début du fichier CSS (l'un ou l'autre, pas les deux).
```
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
>
```
```
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
```
Déclaration dans le CSS
- Une fois la police chargée, elle est appliquée aux éléments HTML via font-family.
- On peut spécifier plusieurs polices par ordre de préférence (pile de polices).
```
body {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```

Note

La pile de polices (font stack) assure un rendu cohérent : si la première police n'est pas disponible, le navigateur utilise la suivante, et ainsi de suite.

Tip

Toujours inclure au moins une police générique comme secours (sans-serif, serif, etc.).

Cela garantit la lisibilité du texte, même si la police principale ne se charge pas.

Sources :

➡️ Google Fonts (service d'hébergement de polices)

➡️ Google Web Fonts Helper (site web pour télécharger facilement les polices de Google Fonts)

Graisse et style

Lorsque chaque variation de graisse (font-weight, l'épaisseur des traits : 400 = normal, 700 = gras) et de style (font-style : normal ou italic) d'une police est fournie dans un fichier séparé, chaque fichier doit avoir sa propre règle @font-face.

/* Regular */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url('roboto-400.woff2') format('woff2');
}

/* Regular + italic */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: url('roboto-400-italic.woff2') format('woff2');
}

/* Bold */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: url('roboto-700.woff2') format('woff2');
}

/* Bold + italic */
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: url('roboto-700-italic.woff2') format('woff2');
}

Source image

Positionnement

Le positionnement en CSS permet de contrôler la disposition précise des éléments HTML sur une page web. Il définit comment et où un élément sera affiché par rapport au flux normal du document ou à d'autres éléments.

Le flux normal (normal flow) est la disposition par défaut : les éléments en bloc s'empilent les uns sous les autres, les éléments en ligne se suivent dans la ligne, dans l'ordre du code HTML.

Source image

static

Valeur par défaut de tout élément HTML.
Les éléments sont affichés selon le flux normal de la page.
Les propriétés top, right, bottom et left n'ont aucun effet sur un élément en position: static;.

relative

L'élément est positionné relativement à sa position initiale dans le flux normal.
Les propriétés top, right, bottom et left permettent de le décaler sans l'extraire du flux.
L'espace qu'il occupe reste inchangé, même s'il est visuellement déplacé.

absolute

L'élément est retiré du flux normal de la page : les autres éléments se comportent comme s'il n'existait pas.
Il est positionné par rapport à son ancêtre positionné le plus proche (parent, grand-parent, etc. dont la position vaut relative, absolute, fixed ou sticky).
En l'absence d'un tel ancêtre, il est positionné par rapport au bloc conteneur initial (initial containing block) : un rectangle de la taille de la fenêtre, placé en haut du document.
Les propriétés top, right, bottom et left définissent sa position précise.

fixed

L'élément est fixé par rapport à la fenêtre du navigateur.
Il reste visible même lors du défilement de la page.
Comme absolute, il est retiré du flux normal.
Les propriétés top, right, bottom et left définissent sa position à l'écran.

sticky

Combine les comportements de relative et fixed.
L'élément reste dans le flux normal jusqu'à atteindre une position définie, puis devient fixe à cet endroit lors du défilement.
Nécessite au moins une propriété de décalage (top, right, bottom, ou left) pour fonctionner.
Reste collé seulement à l'intérieur de son élément parent : quand le parent sort de l'écran, l'élément part avec lui.

Source : MDN Web Docs - CSS reference (position CSS property)

Exemple

Cet exemple utilise trois pseudo-classes supplémentaires : :first-child (premier enfant de son parent), :last-child (dernier enfant) et :not(…) (exclut les éléments qui correspondent au sélecteur entre parenthèses).

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

div:first-child {
  /* red */
  background-color: #f00;
  bottom: 0;
  position: absolute;
  right: 0;
}

div:last-child {
  /* blue */
  background-color: #00f;
}

div + div:not(:last-child) {
  /* green */
  background-color: #0f0;
  left: 50px;
  position: relative;
  top: 50px;
}

<body>
  <div>RED</div>
  <div>GREEN</div>
  <div>BLUE</div>
</body>

Rouge (absolute) : retiré du flux et placé dans le coin inférieur droit de la fenêtre (les autres carrés prennent sa place).
Vert (relative) : décalé de 50 px vers la droite et vers le bas, mais sa place d'origine reste réservée : le bleu ne bouge pas.

Note

float

La propriété float place un élément à gauche ou à droite dans son conteneur, en laissant le texte ou d'autres éléments s'enrouler autour (ex. une image dans un article). Avant l'arrivée de Flexbox et Grid, elle était aussi largement utilisée pour construire des mises en page en colonnes : cet usage est aujourd'hui dépassé.

float peut causer des problèmes de mise en page, car les éléments flottants ne sont pas pris en compte dans la hauteur de leur conteneur. Ce comportement nécessitait souvent l'usage du clearfix pour rétablir le flux.

⚠️ A ne plus utiliser pour construire la mise en page !

Source : MDN Web Docs - Floats

Flexbox

Flexbox est un module de mise en page unidimensionnelle en CSS. Il offre une manière simple et efficace de distribuer l'espace entre les éléments d'un conteneur, même lorsque leurs tailles sont dynamiques ou inconnues.

Contrairement aux anciennes méthodes de mise en page (tableaux, positionnement ou float), Flexbox est conçu pour les interfaces modernes et facilite la création de mises en page flexibles et réactives.

Flexbox permet de contrôler :

L'alignement des éléments
Leur direction (horizontale ou verticale)
Leur ordre d'affichage
Leur dimensionnement dans le conteneur

Source : MDN Web Docs - Basic concepts of flexbox

Source image

➡️ CSS-Tricks - A Complete Guide to Flexbox

Grid

CSS Grid Layout, ou simplement Grid, est un système de mise en page bidimensionnel. Contrairement à Flexbox (axé sur une seule dimension), Grid gère les lignes et les colonnes simultanément, ce qui le rend idéal pour les conceptions complexes et structurées.

Avec Grid, on peut :

Définir une grille de lignes et de colonnes
Contrôler la position et la taille de chaque élément
Gérer les espacements entre cellules (propriété gap) et les alignements avec précision

Source : MDN Web Docs - Basic concepts of grid layout

➡️ CSS-Tricks - A Complete CSS Grid Layout Guide

Exemple

<body>
  <header>HEADER</header>
  <nav>NAV</nav>
  <article>ARTICLE</article>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</body>

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  /* green */
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  /* blue */
  background-color: #79a1da;
  grid-row: 2 / 5;
}

article {
  /* yellow */
  background-color: #eee467;
  grid-row: 2 / 5;
}

aside {
  /* orange */
  background-color: #e4b561;
  grid-row: 2 / 5;
}

footer {
  /* red */
  background-color: #c2444e;
  grid-column: 1 / 4;
}

grid-template-columns: 100px 1fr 100px : trois colonnes, deux de 100 px et une centrale qui prend l'espace restant (fr : fraction de l'espace libre).
grid-template-rows : même principe pour les cinq lignes.
grid-column: 1 / 4 : l'élément s'étend de la ligne de grille 1 à la ligne 4, donc sur les trois colonnes (les lignes de grille sont les traits numérotés de l'image ci-dessous).

Avec le même HTML, il suffit de modifier grid-column et grid-row pour réorganiser la page :

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  background-color: #79a1da;
}

article {
  background-color: #eee467;
  grid-column: 2 / 4;
  grid-row: 2 / 5;
}

aside {
  background-color: #e4b561;
  grid-row: 3 / 5;
}

footer {
  background-color: #c2444e;
  grid-column: 1 / 4;
}

body {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 1fr 1fr 100px;
}

header {
  background-color: #a2d263;
  grid-column: 1 / 4;
}

nav {
  background-color: #79a1da;
  grid-column: 1 / 4;
}

article {
  background-color: #eee467;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

aside {
  background-color: #e4b561;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

footer {
  background-color: #c2444e;
  grid-column: 1 / 4;
}

Conseils d'utilisation

Flexbox et Grid sont deux outils complémentaires. Leur utilisation dépend du type de mise en page et du niveau de contrôle souhaité.

✅ Utilisez Flexbox quand…

La mise en page est unidimensionnelle (ligne ou colonne).
Vous souhaitez aligner des éléments (centrage, justification).
Les éléments doivent être flexibles et adaptatifs à l'espace disponible.
Vous créez des interfaces réactives (menus, barres, boutons, etc.).

✅ Utilisez Grid quand…

La mise en page est bidimensionnelle (lignes et colonnes).
Vous travaillez sur une structure complexe (tableau de bord, magazine, application).
Vous avez besoin d'un contrôle précis des alignements et des proportions.
Vous souhaitez que la structure (colonnes, zones) soit définie par le conteneur, indépendamment de la taille du contenu.

Source : MDN Web Docs - Relationship of grid layout to other layout methods

Source image

Combinaison des deux

Il est fréquent d'utiliser Grid pour structurer la page globale, puis Flexbox à l'intérieur de certaines zones (ex. navigation, cartes, boutons) pour gérer les alignements plus fins.

Source image

Z-index

La propriété z-index en CSS contrôle la superposition des éléments sur l'axe Z, perpendiculaire à l'écran. Elle détermine quel élément s'affiche au-dessus ou au-dessous des autres dans la pile visuelle de la page.

Contexte d'empilement

z-index ne fonctionne que sur les éléments positionnés, c'est-à-dire ceux dont la propriété position est différente de static (relative, absolute, fixed ou sticky), ainsi que sur les enfants directs d'un conteneur Flexbox ou Grid.
Lorsqu'un z-index différent de auto est défini sur un tel élément, celui-ci crée un nouveau contexte d'empilement (stacking context). Tous ses descendants sont ensuite empilés dans ce contexte interne, indépendamment des autres éléments extérieurs.

Valeurs

z-index accepte des valeurs entières (positives, négatives ou nulles) ou le mot-clé auto.
Par défaut, z-index vaut auto : l'élément est empilé au niveau 0, mais ne crée pas de contexte d'empilement.
Plus la valeur est élevée, plus l'élément est au premier plan.
Une valeur négative place l'élément derrière ceux ayant un z-index supérieur ou égal à 0.

Comparaison de niveaux

Les comparaisons de z-index ne s'appliquent qu'à l'intérieur du même contexte d'empilement.
Ainsi, un élément avec z-index: 1000 dans un contexte peut être masqué par un élément ayant z-index: 1 dans un autre contexte d'empilement supérieur.

Problèmes courants

Des comportements inattendus peuvent survenir lorsque plusieurs contextes d'empilement se chevauchent.
Une mauvaise gestion des valeurs de z-index peut rendre le code CSS difficile à maintenir et les couches visuelles complexes à comprendre.
Pour éviter la confusion, il est recommandé de limiter l'usage de z-index aux cas nécessaires et de bien documenter les valeurs utilisées.

Sources :

Source image

Liens utiles

Validation du code CSS

➡️ W3C - CSS Validation Service

Spécifications et documentation

➡️ W3C - CSS Specifications

➡️ MDN - CSS Documentation

Sites de référence

➡️ Stack Overflow

➡️ CSS-Tricks