Aller au contenu

CSS

CSS (Cascading Style Sheets) 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.

html-vs-css.png

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>

css-link.png

Source image

Note

Ne jamais écrire de code CSS directement dans un fichier HTML.

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

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.

➡️ MDN - Liste des propriétés CSS

Structure d'une règle CSS

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

  1. Un sélecteur, qui indique à quels éléments HTML s'applique la règle.
  2. 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 ;.

css-syntax.png

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>

css-demo-1.png

Unités de mesure en CSS

En CSS, l'unité de base n'est pas strictement définie, car elle dépend du contexte d'affichage. Toutefois, le pixel (px) est souvent considéré comme la référence principale, 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, idéals pour des mises en page flexibles.
  • em : unité relative à la taille de police de l'élément parent. Si la police du parent vaut 16px, alors 1em = 16px.
  • 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.
    • 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 design web adaptatif et réactif, il est généralement recommandé d'utiliser des unités relatives (rem, %, vw, vh) plutôt que des valeurs fixes en pixels.

➡️ MDN - Liste des unités de mesure CSS

Couleurs en CSS

En CSS, les couleurs peuvent être définies à l'aide de la notation hexadécimale, composée d'un hashtag (#) suivi de six caractères hexadécimaux. Ces caractères représentent les trois composantes de couleur : 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

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 peut distinguer environ quelques millions de couleurs, soit beaucoup moins que ce que CSS peut représenter.

css-color.png

Source image

Note

Si les trois composantes RGB contiennent des paires identiques, il est possible d'utiliser une forme abrégée :

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

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.

css-selector-1.png

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.

css-selector-2.png

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.

css-selector-3.png

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.

➡️ MDN - Basic selectors

Type selector

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

h1 { … }

ID selectors

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.

#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.

.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>

css-example-2.png

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] { … }

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">Name</label>
<input id="pwd" type="password">

css-example-3.png

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 est adjacent à B ».

➡️ MDN - Combinators

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>

css-example-4.png

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.

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.

/* 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).

/* Only the first letter of the text inside a <p> */
p::first-letter { … }
/* Create a new pseudo-element before a <li> */
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>

css-example-5.png

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. Cette décision repose sur deux mécanismes fondamentaux : la spécificité et la priorité.

  • 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.

  • Priorité : Si plusieurs règles ont la même spécificité, le navigateur applique la règle la plus récente, c'est-à-dire celle qui apparaît en dernier dans le fichier CSS. L'ordre des déclarations influence donc la priorité effective.

Résolution des conflits

  1. 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.
  2. Si deux règles ont la même spécificité, celle qui est définie en dernier l'emporte.

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.

specificity-model.png

Source image

specificity-example.png

Source image

Tip

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.

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>

css-example-6.png

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.

css-box-model.png

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).

css-block-vs-inline.png

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>

css-example-7.png

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).
  • Certaines propriétés de mise en forme verticales (margin-top, padding-bottom, etc.) ont un effet limité.
  • Exemples : <span>, <a>, <strong>, <em>, <img>, …

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>

css-example-8.png

Tip

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

Par exemple : display: inline; ou display: block;.

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.

css-content-vs-border.png

Source image | Source image

🚨 Bonne pratique : appliquer box-sizing: border-box; globalement

html {
  box-sizing: border-box;
}

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

Source

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). 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 sur diverses plateformes.

➡️ 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, harmonise intelligemment les styles tout en conservant les comportements essentiels des éléments.

➡️ modern-normalize

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) :

  • Les polices serif présentent de petits traits décoratifs aux extrémités des lettres (empattements).
  • Traditionnelles et formelles, elles améliorent la lisibilité dans les longs textes imprimés ou numériques.
  • Exemples : Times New Roman, Georgia, Garamond.

Sans-serif (sans empattements) :

  • Modernes et épurées, ces polices sont optimisées pour les écrans.
  • Exemples : Arial, Helvetica, Verdana.

Monospace (à largeur fixe) :

  • 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) :

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

Fantaisie (décoratives) :

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

font-family.png

Source image

Utilisation en CSS

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

  1. 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.

      font-system.png

      Source image

    • Si une police n'est pas disponible localement, elle doit être hébergée localement ou chargée depuis un service externe (comme Google Fonts).

      font-download.png

      Source image

  2. Inclusion de la police

    • Police locale ou serveur : Utiliser la règle @font-face pour déclarer la police et indiquer le chemin du fichier.
    @font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url('roboto.woff2') format('woff2');
}
    • Police hébergée en ligne : Suivre les instructions du fournisseur (Google Fonts, Adobe Fonts, etc.).
    <link
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    rel="stylesheet"
>

    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

  3. 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.

➡️ CSS Font Stack (font stack pour certaines polices courantes)

➡️ 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

Chaque variation de graisse (font-weight) et de style (font-style) d'une police 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-bold.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");
}

font-variants.png

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.

css-position.png

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 non-static le plus proche (relative, absolute, ou fixed).
  • En l'absence d'un tel ancêtre, le positionnement s'effectue par rapport à la page entière (<body>).
  • 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.

Exemple

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>

css-example-9.png

Note

float

La propriété float permettait autrefois de placer un élément à gauche ou à droite dans son conteneur, en laissant le texte ou d'autres éléments s'enrouler autour. Cette technique était largement utilisée avant l'arrivée de Flexbox et Grid, mais elle est aujourd'hui déconseillée.

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 la mise en page moderne !

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

flexbox-property.png

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 (gutters) et les alignements avec précision

grid-layout.png

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

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-example-1.png

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;
}

grid-example-2.png

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;
}

grid-example-3.png

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 (dashboard, magazine, application).
  • Vous avez besoin d'un contrôle précis des alignements et des proportions.
  • Vous souhaitez des zones fixes et stables indépendantes des dimensions du conteneur.

flexbox-vs-grid.png

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.

flexbox-and-grid.png

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).
  • Lorsqu'un z-index est défini, l'élément 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).
  • Par défaut, un élément a un z-index de 0.
  • 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.

z-index.png

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