# Tutoriel CSS : introduction aux Cascading Style Sheets

CSS sert à définir l’apparence et la mise en page des sites Web. Avec les Cascading Style Sheets, vous séparez le design du contenu et obtenez ainsi une structure claire et flexible. Dans ce tutoriel CSS, vous découvrez comment piloter précisément la mise en page, les couleurs et la typographie de votre site Web avec CSS.

## Séparer le contenu et la présentation

En combinaison avec [HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/apprendre-le-html-le-tutoriel-pour-debutant/), [CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-css/) sert à séparer le contenu de la présentation.

Le **Hypertext Markup Language (HTML)** est utilisé pour enrichir des documents texte avec des informations servant à structurer sémantiquement les éléments de texte. Ce langage de balisage constitue ainsi la base de tout site Web : le code HTML. Il décrit de quels [éléments HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-element/) se compose un document (p. ex. `<body>`, `<header>`, `<footer>`) et comment les informations doivent être interprétées (p. ex. titre `<h1>` ou paragraphe `<p>`).

À l’origine, HTML proposait aussi des instructions de mise en forme rudimentaires. Mais avec [HTML5](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html5-cest-quoi/), elles sont considérées comme obsolètes et ne doivent plus être utilisées aujourd’hui. À la place, on utilise le langage de feuilles de style **CSS (Cascading Style Sheets)** pour gérer séparément les règles de présentation.

## Qu’est-ce que le CSS ?

Comme HTML, le CSS est également rédigé sous forme de texte. Cela peut se faire directement dans le document HTML (en ligne pour chaque document ou une seule fois dans l’en-tête HTML). En règle générale, les Webdesigners intègrent toutefois des fichiers CSS séparés pour mettre en forme les pages Web. Le résultat est un **code source plus lisible**, dans lequel les instructions de mise en forme redondantes sont évitées grâce à des références à des feuilles de style distinctes : moins il y a de répétitions, plus le [code source](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/code-source-definition-et-exemples/) est léger.

Si des ajustements de design sont nécessaires, ils sont effectués dans les fichiers CSS centraux. Il n’est donc pas nécessaire de parcourir chaque document HTML et de l’ajuster séparément. CSS s’est vite imposé comme standard et a continuellement été développé par le [World Wide Web Consortium (W3C)](https://www.w3.org/Style/CSS/ "Cascading Style Sheets").

## Comprendre la structure de base : la syntaxe CSS

La mission principale du CSS est de définir l’apparence d’un site Web. Pour cela, des propriétés associées à des valeurs spécifiques sont appliquées aux éléments HTML à l’aide de ce langage de feuilles de style. La **structure de base d’une règle de mise en forme** repose sur le schéma suivant :

```css
selecteur { declaration }
```

« selecteur » est une représentation de l’élément HTML auquel la règle de mise en forme se rapporte. La déclaration se compose d’une **combinaison propriété-valeur**, notée ensuite entre accolades. Chaque déclaration se termine par un point-virgule :

```css
selecteur { propriete: valeur; }
```

Selon ce schéma, vous pouvez par exemple attribuer à un titre une couleur de police, comme le rouge :

```css
h2 { color: red; }
```

Les Webdesigners peuvent attribuer une propriété unique au sélecteur ou définir des **ensembles de règles** plus complets, qui incluent des instructions de mise en forme détaillées. Pour plus de lisibilité, une notation s’est imposée : toutes les propriétés d’un ensemble de règles sont écrites les unes sous les autres :

```css
selecteur {
propriete1 : valeur;
propriete2 : valeur;
propriete3 : valeur;
}
```

En pratique, un tel ensemble de propriétés pourrait ressembler à ceci :

```css
h2 {
color: #ff0000;
font-family: Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
```

Un ensemble de règles peut également spécifier plusieurs sélecteurs. Dans le cas suivant, ils sont indiqués avant la déclaration et séparés par des virgules :

```css
selecteur1, selecteur2 { declaration }
```

## Utiliser les sélecteurs CSS

CSS prend en charge divers [sélecteurs](https://www.w3.org/TR/selectors-4/#selectors "Selectors Level 4"), qui permettent une attribution personnalisée des instructions de mise en forme. Pour débuter, il suffit de se familiariser avec les **sélecteurs de type, de classe, d’ID et universels**. La sensibilité à la casse dépend du document : en HTML, les noms d’éléments ne sont généralement pas sensibles à la casse, tandis qu’en XML ils le sont. Pour `class/id`, nous vous recommandons d’utiliser une casse cohérente partout (HTML et CSS).

<table>
  <thead>
    <tr>
      <th><strong>Type de sélecteur</strong></th>
      <th><strong>Syntaxe CSS</strong></th>
      <th><strong>Description</strong></th>
      <th><strong>Spécificité</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sélecteur de type</td>
      <td>Élément HTML (par ex. `h2`)</td>
      <td>Un sélecteur de type correspond au nom de l’élément ciblé. Les règles de mise en forme s’appliquent à tous les éléments HTML du même type.</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Sélecteur de classe</td>
      <td>`.exemple`</td>
      <td>Un sélecteur de classe cible tous les éléments appartenant à une classe donnée. Les sélecteurs de classe sont précédés d’un point (`.`) et d’un nom libre, par exemple `.exemple`. Les classes sont attribuées aux éléments HTML via l’attribut `class` (`class="exemple"`).</td>
      <td>10</td>
    </tr>
    <tr>
      <td>ID</td>
      <td>`#exemple`</td>
      <td>Un sélecteur d’ID cible un élément unique identifié par un identifiant spécifique. L’intégration dans le code HTML se fait à l’aide de l’attribut `id` (`id="exemple"`).</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Sélecteur universel</td>
      <td>`*`</td>
      <td>Le sélecteur universel, représenté par l’astérisque (`*`), cible l’ensemble des éléments HTML d’un document.</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Note Lorsque plusieurs règles s’appliquent au même élément, la spécificité d’un sélecteur détermine quelle règle est appliquée. Chaque type de sélecteur possède une valeur spécifique, qui contribue au calcul de la spécificité.

### Sélecteur de type

L’utilisation de différents sélecteurs CSS peut s’illustrer à l’aide d’exemples. Le code suivant montre le sélecteur de type `h2` avec sa déclaration :

```css
h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}
```

La mise en forme s’applique à tous les éléments HTML de type `h2`.

### Sélecteur de classe

Vous pouvez aussi appliquer la mise en forme CSS à l’aide d’un sélecteur de classe. Cela permet aux designers d’attribuer les mêmes règles de style à des éléments HTML, quel que soit leur type.

```css
.content {
color: #ff0000;
font-family: Helvetica, sans-serif;
}
```

La mise en forme s’applique à tous les éléments HTML auxquels la classe `.content` a été attribuée. Cette attribution se fait dans le code HTML selon le schéma suivant :

```html
<p class="content">Exemple de texte</p>
```

Note En HTML, les noms de classe s’écrivent sans point.

### Sélecteur d’ID

Si une règle de style ne doit s’appliquer qu’à un seul élément dans le code source HTML, un sélecteur d’ID est recommandé. L’exemple suivant montre la mise en forme d’une zone de navigation :

```css
#navigation {
font-family: Helvetica, sans-serif;
background-color: #8ad8d4;
border: 2px solid #448278;
}
```

L’attribution de la mise en forme se fait dans le code source HTML sans hashtag :

```html
<div id="navigation">
<ul>
<li><a href="index.htm">Page d’accueil</a></li>
<li><a href="mentionslegales.htm">Mentions légales</a></li>
</ul>
</div>
```

L’avantage des sélecteurs d’ID est qu’ils permettent de voir d’un coup d’œil quelles sections du code source correspondent à des **zones uniques**.

### Sélecteur universel

Si une règle de style doit s’appliquer à tous les éléments d’un document HTML, on utilise l’astérisque (`*`) :

```css
* {
font-family: Helvetica, sans-serif;
}
```

Tous les éléments du document utilisent la police Helvetica.

## Intégrer le CSS dans HTML

Pour qu’un navigateur puisse prendre en compte les mises en forme CSS, les règles de style doivent être associées au code source HTML. Trois possibilités s’offrent à vous :

- L’intégration directe des déclarations CSS dans les balises HTML
- Le balisage CSS dans l’en-tête HTML
- La référence à une feuille de style distincte

Cette dernière solution est considérée comme la meilleure approche : en pratique, les feuilles de style sont le plus souvent créées sous forme de fichiers texte externes, puis intégrées.

### Déclaration CSS dans les balises HTML

Si une déclaration CSS doit mettre en forme un seul endroit dans le code source, elle peut être indiquée directement dans la balise ouvrante de l’élément HTML concerné, à l’aide de l’attribut `style`. On parle dans ce cas de « **Inline-Style** ».

```html
<h2 style="color: red;">Sous-titre</h2>
```

Cela présente l’avantage de ne pas avoir à créer de feuille de style dédiée et d’éviter l’utilisation d’un sélecteur. En revanche, ce type d’attribution possède une **priorité élevée dans la cascade CSS**, car les styles inline ont une spécificité supérieure à celle des sélecteurs classiques définis dans une feuille de style. La déclaration `!important` peut toutefois modifier cet ordre de priorité et permettre à une règle externe de s’appliquer malgré un style inline. Dès qu’un ensemble complet de règles est utilisé, ce mode de mise en forme devient rapidement peu lisible, difficile à maintenir et redondant.

### Marquage CSS dans l’en-tête HTML

Si une seule et même règle de mise en forme doit être utilisée plusieurs fois dans un document HTML pour le même élément (par exemple pour tous les `h2` de la page Web), la déclaration CSS dans la balise HTML est inefficace. Il est alors préférable de définir une seule fois les indications de mise en forme correspondantes dans l’en-tête HTML du document à l’aide de l’[élément `style`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-html-style/) :

```html

<html lang="fr">
<head>
<style>
h2 {
color: #ff0000;
font-family: ‘Helvetica Neue’, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Sous-titre 1</h2>
[…]
<h2>Sous-titre 2</h2>
[…]
</body>
</html>
```

L’ensemble de règles au sein de l’élément `style` est automatiquement appliqué à tous les éléments `h2` suivants. Si l’élément `h2` doit également être utilisé sur d’autres pages Web du même projet en ligne avec les règles de mise en forme définies ici, vous pouvez simplement définir ces règles via un fichier CSS centralisé.

### Référence à une feuille de style séparée

Lorsque des règles de mise en forme sont définies dans une feuille de style séparée, il faut l’intégrer au document HTML concerné. Cela se fait à l’aide de l’élément HTML `<link>` :

```html
<link rel="stylesheet" href="print.css" media="print">
```

L’élément `link` contient les attributs obligatoires `rel` et `href` et peut, de manière optionnelle, être complété par les attributs `type` et `media`.

<table>
  <thead>
    <tr>
      <th><strong>Attributs de l’élément `link`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`rel`</td>
      <td>L’attribut `rel` définit le type de relation de l’élément. La valeur `stylesheet` indique qu’une feuille de style doit être liée.</td>
    </tr>
    <tr>
      <td>`href`</td>
      <td>L’attribut `href` référence le fichier à lier en tant que feuille de style.</td>
    </tr>
    <tr>
      <td>`type`</td>
      <td>L’attribut facultatif `type` décrit le type MIME du fichier à lier, dans le cas du CSS `text/css`.</td>
    </tr>
    <tr>
      <td>`media`</td>
      <td>L’attribut `media` permet de définir que la feuille de style référencée n’est utilisée que pour un support de sortie spécifique. Cela permet de proposer différentes feuilles de style selon les appareils. Les valeurs possibles incluent par exemple `screen` ou `print`.</td>
    </tr>
  </tbody>
</table>

## Indiquer les couleurs en CSS

Comme évoqué dans le chapitre d’introduction, les **attributions de couleurs via CSS** peuvent être définies à l’aide des noms de couleurs en anglais. En pratique, on rencontre toutefois assez rarement ce type d’instructions de mise en forme. Le [modèle RGB](https://www.ionos.fr/digitalguide/sites-internet/web-design/couleurs-rvb/) est plus souvent utilisé. Il offre nettement plus de nuances et permet ainsi aux propriétaires de sites Web d’effectuer des réglages de couleur précis. Les codes correspondants peuvent être obtenus via un **sélecteur de couleurs**, que Google propose par exemple sous la forme d’une réponse rapide.

[![Image: Sélecteur de couleurs dans le moteur de recherche Google](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/b/csm_screenshot-google-color-picker_4a1cfeccc6.webp "Sélecteur de couleurs dans le moteur de recherche Google")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/screenshot-google-color-picker.jpg) Avec un sélecteur de couleurs, vous pouvez afficher les valeurs de couleur de manière pratique. Les composantes de couleur sont définies dans le modèle RGB par des valeurs décimales comprises entre 0 et 255 : 0 signifie qu’aucune composante n’est présente, 255 correspond à une intensité maximale.

Depuis CSS3, vous pouvez ajouter une quatrième valeur, le **canal alpha (a)**, qui règle la transparence : 0 rend la couleur totalement transparente, 1 la rend totalement opaque (par exemple 0.8 pour une opacité de 80 %). La syntaxe est la suivante :

```css
rgba(<r>, <g>, <b>, <alpha>)
```

Ainsi, les valeurs RGBA suivantes donnent, par exemple, la couleur de base bleu avec une transparence de 50 % :

```css
color:rgba(0, 0, 255, 0.5);
```

Note Vous pouvez également indiquer les valeurs RGB en hexadécimal.

## Connaître les principales propriétés CSS

Avec CSS, vous disposez de nombreuses propriétés qui permettent de définir des règles de mise en forme pour les éléments HTML. Chaque propriété accepte un **ensemble de valeurs défini** dans la spécification. Pour plus de clarté, les propriétés CSS sont regroupées par domaines d’utilisation. Nous nous concentrons sur les propriétés les plus importantes.

### Typographie

Parmi les caractéristiques essentielles d’un site Web, on trouve la typographie. CSS vous offre diverses possibilités pour mettre en forme les **éléments de texte d’une page HTML**.

#### `font-family`

Si vous souhaitez définir une **police (font)** spécifique pour les éléments de texte d’un site Web, utilisez la propriété CSS `font-family`. Elle vous permet de créer ce que l’on appelle une pile de polices (font stack). Il s’agit d’une liste priorisée de polices adaptées. Les piles de polices sont conçues de sorte que la police souhaitée soit indiquée en premier, suivie d’une liste d’alternatives d’affichage appropriées :

```css
.content {
font-family: Georgia, Garamond, serif;
}
```

L’exemple montre une règle de mise en forme dans le fichier CSS. La police **prioritaire** est Georgia, et la police **alternative** Garamond. Un navigateur Web est ainsi invité à afficher le passage de texte en Garamond si la police Georgia n’est pas installée sur le système.

Conseil En tant que mécanisme de repli, il s’agit d’un nom générique utilisé comme valeur de remplacement. Ce placeholder regroupe plusieurs polices aux caractéristiques similaires et permet au navigateur d’en choisir une disponible si la police principale ne peut pas être chargée.

#### `font-style`

La propriété CSS `font-style` concerne le style de police d’un paragraphe et vous permet de définir des **règles de mise en forme pour l’inclinaison** des caractères ainsi mis en évidence.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs d’inclinaison du texte</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`normal`</td>
      <td>Style de police normal, valeur par défaut</td>
    </tr>
    <tr>
      <td>`italic`</td>
      <td>Affiche le texte en italique lorsque la police dispose d’une variante correspondante</td>
    </tr>
    <tr>
      <td>`oblique`</td>
      <td>Incline artificiellement la police, même si aucune variante italique n’est disponible</td>
    </tr>
  </tbody>
</table>

L’exemple suivant montre une règle de mise en forme pour le style de police italique :

```css
.special-content {
font-family: Arial;
font-style: italic;
}
```

#### `font-variant`

La propriété CSS `font-variant` est utilisée pour définir des **variantes de police**.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour les variantes de police</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`normal`</td>
      <td>Variante de police normale, valeur par défaut</td>
    </tr>
    <tr>
      <td>`small-caps`</td>
      <td>Affiche les lettres minuscules sous forme de petites capitales, à la hauteur des minuscules</td>
    </tr>
    <tr>
      <td>`all-small-caps`</td>
      <td>Affiche les majuscules et les minuscules sous forme de petites capitales</td>
    </tr>
  </tbody>
</table>

L’exemple suivant définit la variante de police `small-caps` :

```css
.content {
font-family: Arial;
font-variant: small-caps;
}
```

#### `font-size`

Avec la propriété CSS `font-size`, vous définissez la taille d’affichage des éléments de texte. Celle-ci peut être exprimée à l’aide de valeurs absolues ou relatives. La valeur définie correspond au **corps de la police**, c’est-à-dire à la taille de référence à partir de laquelle le navigateur calcule la hauteur visible des caractères et les espacements associés.

#### Unités de mesure absolues

Les unités de mesure absolues reposent sur des longueurs physiques. À l’écran, les navigateurs les convertissent toutefois en **pixels CSS**, en se basant sur une résolution de référence de **96 dpi**. En pratique, seule l’unité `px` est couramment utilisée en Webdesign. Les autres unités absolues sont surtout pertinentes pour les mises en page destinées à l’impression.

<table>
  <thead>
    <tr>
      <th><strong>Unité</strong></th>
      <th><strong>Notation CSS</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pixel</td>
      <td>`px`</td>
      <td>L’unité `px` définit la taille d’un élément en pixels CSS. Son affichage dépend de la densité de pixels de l’écran. Par convention, 1 pixel CSS équivaut à 1/96 de pouce. Cette correspondance peut être ajustée par l’utilisateur en modifiant le niveau de zoom du navigateur.</td>
    </tr>
    <tr>
      <td>Centimètre</td>
      <td>`cm`</td>
      <td>Définit une taille exprimée en centimètres</td>
    </tr>
    <tr>
      <td>Millimètre</td>
      <td>`mm`</td>
      <td>Définit une taille exprimée en millimètres</td>
    </tr>
    <tr>
      <td>Pouce</td>
      <td>`in`</td>
      <td>Définit une taille en pouces, avec 1 in équivalant à 2,54 cm</td>
    </tr>
    <tr>
      <td>Point</td>
      <td>`pt`</td>
      <td>Définit une taille en points, où 1 pt correspond à 1/72 de pouce</td>
    </tr>
    <tr>
      <td>Pica</td>
      <td>`pc`</td>
      <td>Définit une taille en picas, avec 1 pica équivalant à 12 points</td>
    </tr>
  </tbody>
</table>

De plus, la taille de police peut être définie à l’aide de **mots-clés absolus** :

<table>
  <thead>
    <tr>
      <th><strong>Mot-clé</strong></th>
      <th><strong>Description</strong></th>
      <th><strong>Exemple</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`xx-small`</td>
      <td>Très petit</td>
      <td>9 px</td>
    </tr>
    <tr>
      <td>`x-small`</td>
      <td>Très petit</td>
      <td>10 px</td>
    </tr>
    <tr>
      <td>`small`</td>
      <td>Petit</td>
      <td>13 px</td>
    </tr>
    <tr>
      <td>`medium`</td>
      <td>Moyen, taille de police par défaut du navigateur</td>
      <td>16 px</td>
    </tr>
    <tr>
      <td>`large`</td>
      <td>Grand</td>
      <td>19 px</td>
    </tr>
    <tr>
      <td>`x-large`</td>
      <td>Très grand</td>
      <td>24 px</td>
    </tr>
    <tr>
      <td>`xx-large`</td>
      <td>Très grand</td>
      <td>32 px</td>
    </tr>
  </tbody>
</table>

#### Unités de mesure relatives

Les unités de mesure relatives correspondent à des valeurs de taille de police calculées en fonction d’une taille déjà définie. Les éléments HTML héritent de leur taille de police de l’élément parent concerné. La référence d’une taille de police relative peut également être un **repère technique** comme la taille d’écran d’un appareil ou une valeur par défaut du navigateur Web.

<table>
  <thead>
    <tr>
      <th><strong>Unité</strong></th>
      <th><strong>Syntaxe CSS</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valeur en pourcentage</td>
      <td>`%`</td>
      <td>L’unité `%` indique la taille de police en pourcentage par rapport à la taille de police héritée.</td>
    </tr>
    <tr>
      <td>em (hauteur de police)</td>
      <td>`em`</td>
      <td>L’unité `em` est relative à l’élément parent. Ainsi, `1em` correspond à 100 % de la taille de police héritée. Si aucune taille n’est définie pour l’élément parent, la taille de police par défaut de l’appareil est utilisée.</td>
    </tr>
    <tr>
      <td>Hauteur d’x</td>
      <td>`ex`</td>
      <td>L’unité `ex` se base sur la hauteur de la lettre minuscule x de la police utilisée. Si cette valeur n’est pas définie, `1ex` équivaut à `0.5em`.</td>
    </tr>
    <tr>
      <td>Root-em</td>
      <td>`rem`</td>
      <td>L’unité `rem` se rapporte à l’élément racine du document, par exemple l’élément HTML. `1rem` correspond à 100 % de la taille de police définie pour cet élément racine.</td>
    </tr>
    <tr>
      <td>Largeur du viewport</td>
      <td>`vw`</td>
      <td>L’unité `vw` se base sur la largeur de la zone d’affichage de l’appareil. `1vw` correspond à 1 % de la largeur du viewport.</td>
    </tr>
    <tr>
      <td>Hauteur du viewport</td>
      <td>`vh`</td>
      <td>L’unité `vh` se base sur la hauteur de la zone d’affichage de l’appareil. `1vh` correspond à 1 % de la hauteur du viewport.</td>
    </tr>
  </tbody>
</table>

La taille de police peut aussi être définie à l’aide de **mots-clés relatifs**. Le point de référence est ici la taille de police par défaut du navigateur.

<table>
  <thead>
    <tr>
      <th><strong>Relatif</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`smaller`</td>
      <td>L’élément actuel est affiché avec une taille inférieure à celle de l’élément parent.</td>
    </tr>
    <tr>
      <td>`larger`</td>
      <td>L’élément actuel est affiché avec une taille supérieure à celle de l’élément parent.</td>
    </tr>
  </tbody>
</table>

Pour garantir un affichage optimal de la taille de police sur différents appareils des utilisateurs, il est recommandé d’utiliser **des unités de mesure relatives comme `em` ou `%`**.

Le schéma de base du formatage de la taille de police via CSS correspond à l’exemple de code suivant :

```css
.content {
font-size: 1em;
}
```

#### `line-height`

La propriété CSS `line-height` est utilisée pour définir la **hauteur de ligne** d’un paragraphe de texte. Les mêmes unités de mesure que pour `font-size` s’appliquent, les pourcentages se référant à la `font-size` du texte concerné. Vous pouvez aussi définir `line-height` avec des nombres sans unité. D’autres valeurs possibles sont `normal` (valeur par défaut) et `inherit` (conformément à l’élément parent).

Une `line-height` de 1,5 correspond par exemple à une hauteur de ligne de 150 % de la taille de police concernée, soit `1.5em`.

```css
.content {
line-height: 1.5;
}
```

#### `font-weight`

La propriété CSS `font-weight` définit la **largeur de ligne** d’un élément de texte. Les designers l’utilisent pour mettre en gras certains passages. Les valeurs peuvent être définies de manière absolue ou relative par rapport à l’élément parent.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs absolues pour la propriété `font-weight`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`1–1000`</td>
      <td>Valeurs numériques de 1, très fin, à 1000, très gras</td>
    </tr>
    <tr>
      <td>`normal`</td>
      <td>Épaisseur normale, correspond à la valeur 400</td>
    </tr>
    <tr>
      <td>`bold`</td>
      <td>Texte en gras, correspond à la valeur 700</td>
    </tr>
  </tbody>
</table>

Les valeurs numériques ne sont pertinentes que pour les [Webfonts](https://www.ionos.fr/digitalguide/sites-internet/web-design/webfont-le-pouvoir-de-lecriture-moderne-du-web/). En pratique, deux **épaisseurs de texte** suffisent généralement : `normal` et `bold`.

```css
.content {
font-weight: normal;
}
.content {
font-weight: bold;
}
```

Les valeurs relatives pour la propriété CSS `font-weight` définissent la largeur de ligne d’un élément de texte par rapport à la largeur de ligne héritée de l’élément parent.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs relatives pour la propriété `font-weight`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`bolder`</td>
      <td>Affiche le texte avec une épaisseur plus élevée que celle définie pour l’élément parent</td>
    </tr>
    <tr>
      <td>`lighter`</td>
      <td>Affiche le texte avec une épaisseur plus faible que celle définie pour l’élément parent</td>
    </tr>
  </tbody>
</table>

### Formatage du texte

En plus de la mise en forme de la police, CSS met à votre disposition diverses **propriétés de mise en forme du texte**. Elles vous permettent de définir l’alignement du texte ainsi que l’espacement entre les caractères et les mots, ou d’ajouter des décorations aux éléments de texte.

#### `text-align`

La propriété CSS `text-align` sert à **aligner le texte et les éléments inline**, c’est-à-dire les éléments intégrés au flux de texte, par exemple des images ou des boutons. Les valeurs courantes sont :

- `left` (aligné à gauche)
- `right` (aligné à droite)
- `center` (centré)
- `justify` (justifié)
- `inherit` (comme l’élément parent)

Le code suivant entraîne un alignement centré du texte d’exemple :

```css
.content {
text-align: center;
}
```

D’autres valeurs pour la propriété `text-align` définissent l’**alignement du texte par rapport au sens d’écriture d’un texte** (`direction`).

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour l’alignement relatif du texte</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`start`</td>
      <td>Le texte est aligné du côté où il commence. Avec un sens d’écriture de gauche à droite `{ direction: ltr; }`, cette valeur correspond à `left`. Avec un sens d’écriture de droite à gauche `{ direction: rtl; }`, elle correspond à `right`.</td>
    </tr>
    <tr>
      <td>`end`</td>
      <td>Le texte est aligné du côté où il se termine.</td>
    </tr>
  </tbody>
</table>

La valeur `start` est considérée comme la valeur par défaut (dépend de `direction`).

Tous les navigateurs courants affichent par défaut la **dernière ligne d’un texte justifié** alignée à gauche. Si ce comportement n’est pas souhaité, il est possible de la mettre en forme séparément à l’aide de la propriété CSS `text-align-last`. Les valeurs disponibles correspondent à celles de la propriété `text-align`.

#### `hyphens`

De plus, CSS offre, avec la propriété `hyphens`, la possibilité de mettre en place une **césure automatique**. Le langage de feuille de style met à disposition les valeurs suivantes pour la propriété `hyphens` :

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour la propriété `hyphens`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`manual`</td>
      <td>La césure est effectuée manuellement : seuls les tirets conditionnels sont pris en compte, ce qui correspond au comportement par défaut.</td>
    </tr>
    <tr>
      <td>`none`</td>
      <td>Aucune césure, les tirets conditionnels ne sont pas pris en compte. Les retours à la ligne se font uniquement aux espaces.</td>
    </tr>
    <tr>
      <td>`auto`</td>
      <td>La césure est effectuée automatiquement selon les règles linguistiques définies par l’attribut HTML `lang`.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>Les paramètres sont hérités de l’élément parent.</td>
    </tr>
  </tbody>
</table>

#### `word-spacing`

La propriété CSS `word-spacing` règle l’**espacement entre les mots** au sein d’un élément de texte. Les exploitants de sites Web ont la possibilité de définir les espaces entre les mots **via des valeurs de taille**. Pour cela, les unités présentées sous `font-size` sont disponibles, à l’exception du pourcentage. Les autres valeurs possibles pour la propriété `word-spacing` sont `normal` (valeur par défaut) et `inherit` (selon l’élément parent).

L’exemple de code suivant définit un espacement entre les mots de `2em`. Celui-ci s’ajoute à l’espacement par défaut entre les mots.

```css
.content {
    word-spacing: 2em;
}
```

#### `letter-spacing`

Si ce n’est pas l’espacement entre les mots, mais l’**espacement entre les lettres** qui doit être défini, on utilise la propriété CSS `letter-spacing`. Ici aussi, des valeurs de taille (à l’exception du pourcentage) ainsi que les valeurs `normal` et `inherit` sont disponibles.

L’exemple de code suivant montre un passage de texte dans lequel un mot est mis en évidence grâce à un espacement supplémentaire entre les lettres de `1em`.

```css
.special-content {
    letter-spacing: 1em;
}
```

#### `text-indent`

Avec la propriété CSS `text-indent`, vous avez la possibilité de définir des **retraits** qui ne s’appliquent qu’à la première ligne d’un paragraphe. Les valeurs possibles incluent des valeurs positives, négatives ainsi que des pourcentages, en relation avec la largeur du **bloc de texte** concerné.

L’exemple de code suivant définit un retrait de la première ligne de 5 %. La classe est attribuée dans le code source HTML via des éléments `span` :

```css
.content {
    text-indent: 5%;
}
```

Pour définir des paragraphes à retrait négatif (alinéa suspendu), la propriété `text-indent` est définie avec une valeur négative.

#### `text-decoration`

La propriété CSS `text-decoration` permet d’appliquer des **effets visuels** aux éléments de texte, par exemple le soulignement.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour la propriété `text-decoration`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Aucun effet appliqué au texte.</td>
    </tr>
    <tr>
      <td>`underline`</td>
      <td>Chaque ligne du texte concerné est soulignée.</td>
    </tr>
    <tr>
      <td>`overline`</td>
      <td>Une ligne est affichée au-dessus de chaque ligne du texte concerné.</td>
    </tr>
    <tr>
      <td>`line-through`</td>
      <td>Chaque ligne du texte concerné est barrée.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>Les effets appliqués au texte correspondent à ceux de l’élément parent.</td>
    </tr>
  </tbody>
</table>

L’exemple de code suivant définit des soulignements pour des groupes de mots sélectionnés au sein du passage de texte :

```css
.content-underline {
text-decoration: underline;
}
```

#### `text-transform`

La propriété `text-transform` permet d’effectuer des **transformations de texte via CSS**. Vous pouvez ainsi afficher des zones de texte en majuscules ou en minuscules, sans avoir à modifier le texte d’origine. La propriété permet les transformations suivantes :

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour la propriété `text-transform`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`capitalize`</td>
      <td>La première lettre de chaque mot est affichée en majuscule.</td>
    </tr>
    <tr>
      <td>`uppercase`</td>
      <td>L’ensemble du texte est affiché en majuscules.</td>
    </tr>
    <tr>
      <td>`lowercase`</td>
      <td>L’ensemble du texte est affiché en minuscules.</td>
    </tr>
    <tr>
      <td>`none`</td>
      <td>Aucune transformation n’est appliquée au texte.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>La transformation correspond à celle de l’élément parent.</td>
    </tr>
  </tbody>
</table>

Si vous souhaitez afficher les premières lettres d’un passage en majuscules, indépendamment du texte d’origine, la mise en forme suivante est recommandée :

```css
.content {
text-transform: capitalize;
}
```

### Couleurs du texte et d’arrière-plan

Lors du choix des couleurs du texte et d’arrière-plan, les Webdesigners utilisent généralement les codes couleur déjà expliqués, en écriture décimale ou hexadécimale. Un certain nombre de propriétés utilisent ces codes couleur.

#### `color`

La propriété CSS `color` sert à **mettre en forme la couleur** du texte. Les valeurs courantes sont des couleurs exprimées en RGB, en codes hexadécimaux ou en HSL. Pour gérer la transparence du texte, on peut utiliser la valeur transparent ou des couleurs avec canal alpha `(rgba()`, `hsl())`. La propriété `opacity` ne fait pas partie de `color` et modifie la transparence de l’élément dans son ensemble.

```css
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
}
```

#### `background-color`

La propriété CSS `background-color` est utilisée lorsqu’une **couleur d’arrière-plan** doit être attribuée à un élément. Les valeurs possibles correspondent à celles de la propriété `color`.

L’exemple de code suivant montre une **mise en forme de la couleur du texte et de l’arrière-plan** :

```css
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}
```

La mise en forme indique au navigateur Web d’afficher tous les éléments de texte de la classe `content` en bordeaux (`#d82451`) et de leur appliquer un arrière-plan vert turquoise (`#24d8ab`).

#### `background-image`

Comme alternative à une couleur d’arrière-plan, une **image peut être chargée en arrière-plan** d’un élément. Pour cela, les designers utilisent la propriété `background-image`, qui contient comme valeur le chemin d’accès vers l’image selon la syntaxe suivante :

```css
.content {
    background-image: url("chemin/vers/image.jpg");
}
```

Au lieu de `background-image` ou `background-color`, vous pouvez aussi utiliser la notation abrégée `background`.

De plus, CSS offre la possibilité de définir des **dégradés de couleurs en arrière-plan** :

<table>
  <thead>
    <tr>
      <th><strong>Dégradés CSS</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`linear-gradient()`</td>
      <td>Génère un dégradé linéaire</td>
    </tr>
    <tr>
      <td>`radial-gradient()`</td>
      <td>Génère un dégradé radial</td>
    </tr>
    <tr>
      <td>`repeating-linear-gradient()`</td>
      <td>Génère un dégradé linéaire répété</td>
    </tr>
    <tr>
      <td>`repeating-radial-gradient()`</td>
      <td>Génère un dégradé radial répété</td>
    </tr>
  </tbody>
</table>

Dans notre introduction au CSS pour débutants, nous nous limitons, à titre d’exemple, à la fonction `linear-gradient()`. Pour appliquer un dégradé linéaire à l’arrière-plan d’un élément, on utilise la fonction `linear-gradient()` comme valeur de la propriété `background`. Celle-ci attend **au moins deux couleurs en arguments**. Le format utilisé pour définir les couleurs n’a pas d’importance.

```css
.content {
width: 400px;
height: 400px;
background: linear-gradient( green, yellow );
}
```

### Bordures

CSS vous permet également d’ajouter une bordure aux éléments HTML. Cela est particulièrement recommandé pour les **éléments de niveau bloc** (block-level) comme les titres, les paragraphes, les [éléments `div`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-div/) ou les [tableaux HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/creer-un-tableau-html/), qui apparaissent dans l’élément `body`. Sans mise en forme supplémentaire, ces blocs de contenu s’étendent sur toute la largeur disponible et se placent les uns sous les autres.

Il convient de distinguer les éléments de niveau bloc des **éléments inline** tels que `<b>`, `<i>`, `<a>` ou `<span>`. Les éléments inline apparaissent exclusivement à l’intérieur des éléments de niveau bloc. La largeur d’un élément inline est déterminée uniquement par son propre contenu.

Pour qu’une bordure encadre entièrement un élément de niveau bloc ou un élément inline, on utilise la propriété `border`. Vous pouvez aussi définir séparément le **style de bordure** pour chaque côté d’un élément.

<table>
  <thead>
    <tr>
      <th><strong>Propriétés des bordures</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`border`</td>
      <td>Définit les propriétés de la bordure pour l’ensemble des côtés de l’élément</td>
    </tr>
    <tr>
      <td>`border-top`</td>
      <td>Définit les propriétés de la bordure supérieure de l’élément</td>
    </tr>
    <tr>
      <td>`border-right`</td>
      <td>Définit les propriétés de la bordure droite de l’élément</td>
    </tr>
    <tr>
      <td>`border-bottom`</td>
      <td>Définit les propriétés de la bordure inférieure de l’élément</td>
    </tr>
    <tr>
      <td>`border-left`</td>
      <td>Définit les propriétés de la bordure gauche de l’élément</td>
    </tr>
  </tbody>
</table>

La propriété `border` ainsi que les propriétés pour chaque côté de bordure peuvent être précisées davantage. Les valeurs correspondantes s’écrivent après la propriété, séparées par des espaces, selon le schéma suivant :

```css
.content {
border: style width color;
}
.content {
border: solid 4px #ff0000;
}
```

De plus, la propriété `border-radius` permet d’**arrondir les bords de la bordure**.

#### Type de bordure

En choisissant un type de bordure, vous définissez une **bordure décorative** pour l’élément concerné, de type block-level ou inline. Certains types de bordure ne prennent effet que si une largeur de bordure appropriée a été définie.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs possibles pour le type de bordure</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Aucune bordure</td>
    </tr>
    <tr>
      <td>`hidden`</td>
      <td>N’affiche aucune bordure et la supprime également pour les cellules de tableau adjacentes</td>
    </tr>
    <tr>
      <td>`dotted`</td>
      <td>Affiche une bordure en pointillés</td>
    </tr>
    <tr>
      <td>`dashed`</td>
      <td>Affiche une bordure en tirets</td>
    </tr>
    <tr>
      <td>`solid`</td>
      <td>Affiche une bordure continue</td>
    </tr>
    <tr>
      <td>`double`</td>
      <td>Affiche une bordure double</td>
    </tr>
    <tr>
      <td>`groove`, `ridge`, `inset`, `outset`</td>
      <td>Permettent de créer différents effets visuels de type 3D</td>
    </tr>
  </tbody>
</table>

Le graphique suivant compare les **types de bordures CSS** :

[![Image: Les types de bordures CSS](https://www.ionos.fr/digitalguide/fileadmin/_processed_/e/d/csm_css-border-types_50ce263eda.webp "Les types de bordures CSS")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-border-types.jpg) Il existe différents types de bordures CSS avec un rendu visuel différent. L’**indication du type de bordure est obligatoire**. Si aucun type de bordure n’est spécifié, le navigateur Web n’affichera pas la bordure, même si des valeurs de largeur ou de couleur de bordure sont définies.

#### Largeur de bordure

La largeur de bordure définit l’épaisseur de la ligne de la bordure.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs possibles pour la largeur de bordure</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indication de longueur</td>
      <td>La largeur de la bordure est définie à l’aide des unités de mesure utilisées pour `font-size`. Les pourcentages ne sont pas autorisés pour la largeur de bordure.</td>
    </tr>
    <tr>
      <td>`thin`</td>
      <td>Bordure fine</td>
    </tr>
    <tr>
      <td>`medium`</td>
      <td>Bordure de largeur moyenne</td>
    </tr>
    <tr>
      <td>`thick`</td>
      <td>Bordure épaisse</td>
    </tr>
  </tbody>
</table>

#### Couleur de bordure

Les paramètres de couleur de la propriété `border-color` correspondent à ceux des propriétés `color` et `background-color`.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs possibles pour la couleur de bordure</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valeurs de couleur</td>
      <td>Les couleurs de bordure peuvent être définies à l’aide de mots-clés, de valeurs HEX, ainsi qu’en RGB ou en HSL.</td>
    </tr>
    <tr>
      <td>`transparent`</td>
      <td>Rend la bordure invisible</td>
    </tr>
  </tbody>
</table>

L’exemple de code suivant combine la propriété `border` avec des réglages de police et de couleur d’arrière-plan. L’ensemble des règles est défini dans la feuille de style CSS pour la classe `rahmen` :

```css
.rahmen {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
border: 10px ridge #d82451;
}
```

#### `border-radius`

La propriété `border-radius` permet d’arrondir, de manière circulaire ou elliptique, les **coins d’une bordure**. L’arrière-plan éventuel est alors découpé selon la courbe définie, y compris lorsque l’élément ne possède pas de bordure. Utilisée correctement, `border-radius` permet aussi de créer des formes géométriques simples.

Les valeurs possibles pour la propriété `border-radius` correspondent à une à quatre valeurs de longueur, chacune étant associée à un coin de la bordure. Selon les besoins, l’affectation peut se faire avec une, deux, trois ou quatre valeurs.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour la propriété `border-radius`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Une valeur</td>
      <td>La valeur s’applique aux quatre coins de l’élément.</td>
    </tr>
    <tr>
      <td>Deux valeurs</td>
      <td>La première valeur définit les coins en haut à gauche et en bas à droite. La seconde valeur définit les coins en haut à droite et en bas à gauche.</td>
    </tr>
    <tr>
      <td>Trois valeurs</td>
      <td>La première valeur définit le coin en haut à gauche. La deuxième valeur définit les coins en haut à droite et en bas à gauche. La troisième valeur définit le coin en bas à droite.</td>
    </tr>
    <tr>
      <td>Quatre valeurs</td>
      <td>Chaque coin est défini individuellement. L’ordre suit le sens des aiguilles d’une montre : en haut à gauche, en haut à droite, en bas à droite, en bas à gauche.</td>
    </tr>
  </tbody>
</table>

Les différentes valeurs du **rayon de bordure** sont indiquées après la propriété `border-radius`, séparées par des espaces. On obtient ainsi, pour la déclaration, le schéma suivant (les valeurs numériques sont des exemples) :

```css
border-radius: 4em 2em 3em 1em;
```

La propriété `border-radius` peut être définie dans le même bloc de règles que la propriété `border` ou dans des classes séparées.

Le bloc de règles suivant définit une bordure avec un `border-radius` de 2 em :

```css
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}
```

[![Image: Bordure aux angles arrondis](https://www.ionos.fr/digitalguide/fileadmin/_processed_/6/4/csm_css-rounded-corners_d1e1f17f8c.webp "Bordure aux angles arrondis")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners.jpg) Une valeur de 2em donne des angles arrondis de manière uniforme. ```css
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}
```

[![Image: Bordure aux angles arrondis : une valeur différente a été définie pour chaque angle](https://www.ionos.fr/digitalguide/fileadmin/_processed_/e/5/csm_css-various-rounded-corners_a18bfed27a.webp "Bordure aux angles arrondis : une valeur différente a été définie pour chaque angle")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-various-rounded-corners.jpg) Une valeur différente peut être définie pour chaque angle. Dans les deux cas, les angles de la bordure sont arrondis de manière **circulaire**. Si l’arrondi doit être **elliptique**, deux valeurs sont nécessaires pour chaque angle. La déclaration d’une bordure aux angles arrondis de façon elliptique peut donc comporter jusqu’à huit valeurs :

```css
border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;
```

Les valeurs avant le slash (`/`) définissent le rayon sur le demi-axe horizontal de l’ellipse, celles après le slash définissent le rayon sur le demi-axe vertical.

```css
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}
```

[![Image: Bordure avec des angles arrondis de manière elliptique](https://www.ionos.fr/digitalguide/fileadmin/_processed_/2/f/csm_css-elliptically-rounded-edges_e0d03d1182.webp "Bordure avec des angles arrondis de manière elliptique")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-elliptically-rounded-edges.jpg) Les angles peuvent également être arrondis de manière elliptique. Tout arrière-plan éventuel est automatiquement découpé selon la courbe.

```css
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}
```

[![Image: Bordure avec des angles arrondis et un arrière-plan ajusté](https://www.ionos.fr/digitalguide/fileadmin/_processed_/7/3/csm_css-rounded-corners-background_927c19dc84.webp "Bordure avec des angles arrondis et un arrière-plan ajusté")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners-background.jpg) L’arrière-plan est automatiquement adapté à la bordure. Cela s’applique aussi bien aux couleurs d’arrière-plan qu’aux images d’arrière-plan, mais pas aux éléments de texte.

[![Image: Les éléments de texte ne s’adaptent pas automatiquement aux bords arrondis de la bordure](https://www.ionos.fr/digitalguide/fileadmin/_processed_/0/7/csm_css-rounded-corners-text_6b0678c2dd.webp "Les éléments de texte ne s’adaptent pas automatiquement aux bords arrondis de la bordure")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners-text.jpg) Les éléments de texte doivent être alignés séparément. ### Positionnement

La propriété CSS `position` permet de retirer une boîte du flux normal des éléments et de **la placer librement** à un endroit précis du site Web. Les autres boîtes, qu’elles fassent partie du flux ou qu’elles soient elles aussi positionnées, n’influencent pas la position d’un élément ainsi défini.

La propriété `position` accepte différentes valeurs, qui sont précisées à l’aide des propriétés `left`, `right`, `top` et `bottom`, ainsi que de valeurs exprimées dans des unités de mesure :

<table>
  <thead>
    <tr>
      <th><strong>Valeurs de la propriété `position`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`absolute`</td>
      <td>Positionne la boîte par rapport à l’élément parent le plus proche dont la propriété `position` n’est pas définie sur `static`</td>
    </tr>
    <tr>
      <td>`relative`</td>
      <td>Positionne la boîte par rapport à sa position normale dans le flux des éléments</td>
    </tr>
    <tr>
      <td>`fixed`</td>
      <td>Positionne la boîte par rapport à la fenêtre du navigateur et la maintient fixe lors du défilement</td>
    </tr>
    <tr>
      <td>`static`</td>
      <td>Position naturelle de la boîte dans le flux du document ; avec `position: static`, les propriétés de positionnement n’ont aucun effet ; il s’agit de la valeur par défaut</td>
    </tr>
    <tr>
      <td>`sticky`</td>
      <td>Positionne la boîte comme avec `position: relative` tant qu’elle reste dans le viewport ; lorsqu’elle atteint une limite définie, elle se comporte comme un élément `fixed` et reste visible lors du défilement</td>
    </tr>
  </tbody>
</table>

#### Positionnement absolu

Avec `position: absolute`, l’élément est retiré du flux normal du document et **positionné par rapport à son ancêtre positionné le plus proche**, c’est-à-dire le premier élément parent dont la propriété `position` n’est pas définie sur `static`. Si aucun ancêtre positionné n’existe, le positionnement se fait par rapport au bloc de référence (containing block), qui correspond généralement à l’élément racine du document (`<html>` ou le viewport).

Les propriétés `top`, `right`, `bottom` et `left` permettent alors de définir précisément la position de l’élément à l’intérieur de ce bloc de référence.

Les règles suivantes définissent un positionnement absolu pour les boîtes CSS `.rouge`, `.bleu` et `.vert` à l’intérieur de l’élément parent `.background`.

```css
.background {
    position: relative;
    height: 500px;
    width: 500px;
    border: 1px solid grey;
}
.rouge {
    height: 150px;
    width: 150px;
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 100px;
    left: 100px;
}
.bleu {
    height: 150px;
    width: 150px;
    background-color: rgba(0, 0, 255, 0.5);
    position: absolute;
    top: 150px;
    left: 150px;
}
.vert {
    height: 150px;
    width: 150px;
    background-color: rgba(0, 255, 0, 0.5);
    position: absolute;
    top: 200px;
    left: 200px;
}
```

Les boîtes de contenu `.rouge`, `.bleu` et `.vert` sont mises en forme comme des surfaces semi-transparentes de 150 px × 150 px. La boîte de contenu `.background`, d’une taille de 500 px × 500 px, est entourée d’une bordure grise.

Les instructions de mise en forme sont intégrées dans le code HTML via des classes.

```html
<div class="background">
<p class="rouge"> </p>
<p class="bleu"> </p>
<p class="vert"> </p>
</div>
```

L’affichage dans le navigateur montre le positionnement différent des boîtes à l’intérieur de l’élément `<div>`. Les éléments sont chacun décalés de 50 px vers la droite et vers le bas. La coloration transparente met en évidence la possibilité de chevauchement avec le positionnement absolu.

[![Image: Positionnement absolu de boîtes CSS](https://www.ionos.fr/digitalguide/fileadmin/_processed_/b/2/csm_css-position-absolute_9d1ed0e3c7.webp "Positionnement absolu de boîtes CSS")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-absolute.jpg) Trois boîtes CSS transparentes avec un positionnement absolu différent. #### Positionnement relatif

Avec le positionnement relatif, la boîte reste **intégrée dans le flux naturel des éléments**, mais peut être déplacée par des indications de positionnement relatives à ce flux. La boîte s’aligne donc sur elle-même. Les éléments précédents et suivants dans le flux se comportent comme si la boîte n’avait pas été déplacée.

Pour aligner une boîte à partir de sa position dans le flux des éléments, on complète la règle correspondante avec la déclaration `position: relative` ainsi qu’avec les valeurs de position souhaitées.

Le bloc de code suivant illustre cela à l’exemple de la boîte bleue :

```css
.bleu {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: relative;
left: 50px;
}
```

L’instruction de mise en forme `position: relative`, associée à l’indication de position `left: 50px`, provoque dans l’affichage du navigateur un décalage de la boîte bleue de 50 px vers la droite.

[![Image: Positionnement relatif à partir du flux naturel des éléments](https://www.ionos.fr/digitalguide/fileadmin/_processed_/6/8/csm_css-position-relative_9c6bf62d8b.webp "Positionnement relatif à partir du flux naturel des éléments")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-relative.jpg) Grâce au positionnement relatif, la boîte bleue est déplacée. Le positionnement relatif peut également s’appliquer aux éléments flottants.

#### Boîtes CSS fixes

L’alignement des boîtes fixes s’effectue, comme pour le positionnement absolu, indépendamment du flux des éléments. Toutes les indications de positionnement sont définies par rapport au viewport. Une boîte ainsi fixée apparaît toujours au même endroit à l’écran, même lorsqu’un utilisateur fait défiler la page. Vous pouvez ainsi épingler des **éléments de navigation**, comme des menus ou des boutons d’ancrage (p. ex. « Retour en haut de page »), dans la zone visible.

## Apprendre à utiliser le modèle de boîte CSS

Le modèle de boîte CSS décrit la manière dont les navigateurs affichent et positionnent les éléments HTML sous forme de surfaces rectangulaires (« boîtes »). Au cœur de tout site Web se trouve l’interaction de ces boîtes, dont la disposition est déterminée par ce que l’on appelle le flux des éléments : par défaut, les éléments sont placés de gauche à droite et de haut en bas.

CSS distingue deux types de boîtes :

- Les **boîtes de type bloc** (`div`, `p`) occupent par défaut toute la largeur de leur élément parent et commencent toujours sur une nouvelle ligne.
- Les **boîtes en ligne** (`span`, `b`, `i`) sont affichées dans le flux du texte et s’adaptent au contenu.

Les graphiques suivants permettent d’illustrer le **flux des éléments des boîtes de type bloc et des boîtes en ligne** :

[![Image: Trois boîtes de type bloc dans le flux des éléments CSS](https://www.ionos.fr/digitalguide/fileadmin/_processed_/3/e/csm_css-three-blocks_07c38c340f.webp "Trois boîtes de type bloc dans le flux des éléments CSS")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-three-blocks.jpg) Flux des éléments CSS : les boîtes de type bloc sont affichées chacune sur une nouvelle ligne. Les boîtes de type bloc structurent la mise en page, tandis que les boîtes en ligne gèrent le texte et les éléments inline. Les conteneurs vides comme `<div>` servent souvent uniquement au regroupement et à la mise en forme via CSS.

<table>
  <thead>
    <tr>
      <th><strong>Couches du modèle de boîte</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zone de contenu (content box)</td>
      <td>Cette surface correspond à l’espace occupé par le contenu, qui dépend du texte ou des dimensions d’une image ; pour les éléments de type bloc, sa hauteur et sa largeur peuvent être définies avec `height` et `width`. Pour les éléments inline, ce type de mise en forme n’est pas disponible.</td>
    </tr>
    <tr>
      <td>Espacement intérieur (padding box)</td>
      <td>La padding box définit l’espace entre la zone de contenu (content box) et la bordure (border box).</td>
    </tr>
    <tr>
      <td>Bordure (border box)</td>
      <td>La border box correspond à la bordure de l’élément.</td>
    </tr>
    <tr>
      <td>Marge extérieure (margin box)</td>
      <td>La margin box définit l’espace entre l’élément et son élément parent ou les éléments voisins. La propriété `margin` peut également prendre des valeurs négatives.</td>
    </tr>
  </tbody>
</table>

Si vous souhaitez mettre en forme simultanément les quatre côtés d’une boîte, utilisez les propriétés `padding`, `border` et `margin` :

<table>
  <thead>
    <tr>
      <th></th>
      <th><strong>Espacement intérieur</strong></th>
      <th><strong>Bordure</strong></th>
      <th><strong>Marge extérieure</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>haut</td>
      <td>`padding-top`</td>
      <td>`border-top`</td>
      <td>`margin-top`</td>
    </tr>
    <tr>
      <td>bas</td>
      <td>`padding-bottom`</td>
      <td>`border-bottom`</td>
      <td>`margin-bottom`</td>
    </tr>
    <tr>
      <td>gauche</td>
      <td>`padding-left`</td>
      <td>`border-left`</td>
      <td>`margin-left`</td>
    </tr>
    <tr>
      <td>droite</td>
      <td>`padding-right`</td>
      <td>`border-right`</td>
      <td>`margin-right`</td>
    </tr>
  </tbody>
</table>

Les valeurs possibles pour les propriétés listées sont des valeurs de taille ainsi que `inherit` (selon l’élément parent). Les marges extérieures peuvent également être définies avec la valeur `auto`.

Le graphique suivant illustre la structure schématique d’une **boîte CSS** :

[![Image: Modèle de boîte CSS](https://www.ionos.fr/digitalguide/fileadmin/_processed_/5/3/csm_css-box-model_dc7a85cd37.webp "Modèle de boîte CSS")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model.jpg) Représentation schématique du modèle de boîte CSS. ### Modèle de boîte CSS en pratique

On peut illustrer le modèle de boîte CSS en ajoutant, étape par étape, les différentes couches à une boîte de contenu. Le point de départ est un court extrait de texte qui, dans cet exemple, doit être mis en forme au moyen du **sélecteur de classe** :

```html
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
```

L’ensemble de règles suivant définit, pour la **boîte de contenu**, des dimensions de 150 px × 150 px. D’autres mises en forme définissent une police noire sur fond gris. De plus, le texte doit être justifié :

```css
.content {
height: 150px;
width: 150px;
color: #000000;
text-align: justify;
background-color: #808080;
}
```

Appliquées à l’extrait de texte, ces instructions de mise en forme donnent l’affichage suivant dans le navigateur Web :

[![Image: Boîte de contenu sans padding, border et margin](https://www.ionos.fr/digitalguide/fileadmin/_processed_/9/c/csm_css-boxmodell-standard_033275888d.webp "Boîte de contenu sans padding, border et margin")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-standard.jpg) Si une boîte de contenu est définie sans padding, border et margin, elle s’affiche en haut à gauche dans la fenêtre du navigateur L’extrait de texte apparaît, conformément au flux des éléments, dans l’angle supérieur gauche de son élément parent. Le texte et la couleur d’arrière-plan commencent sans marge sur le côté gauche de la fenêtre du navigateur et occupent toute la surface disponible. L’arrière-plan s’arrête exactement au bord du texte.

Un tel design est peu esthétique et rend la lecture plus difficile. La propriété `padding` permet donc aux Webdesigners de définir une **marge intérieure** afin de séparer les éléments de texte des éléments de mise en forme qui les entourent.

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
}
```

Ajoutée au jeu de règles, la déclaration `padding: 10px;` entraîne la modification suivante dans l’affichage côté frontend :

[![Image: Boîte de contenu avec padding](https://www.ionos.fr/digitalguide/fileadmin/_processed_/2/a/csm_css-boxmodell-padding_b8c162d7c4.webp "Boîte de contenu avec padding")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-padding.jpg) Le padding définit la marge intérieure. Le navigateur Web applique une **marge intérieure** de 10 px sur les quatre côtés de la **content box**. En complément, il est possible d’ajouter une bordure comme élément de mise en forme.

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
}
```

Dans l’exemple de code, la propriété `border` est utilisée pour ajouter à l’élément un cadre bordeaux, continu.

[![Image: Boîte de contenu avec padding et border](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/4/csm_css-box-model-border_d3bfe42d12.webp "Boîte de contenu avec padding et border")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-border.jpg) Le cadre englobe la zone de contenu et la zone de padding. Ainsi, un cadre est séparé du contenu par la valeur de padding.

Conformément au flux naturel des éléments, la boîte ainsi mise en forme se place sans espace dans l’angle supérieur gauche de l’élément parent. La propriété `margin` permet d’aérer le design d’un site Web grâce à une **marge extérieure**. Pour cela, il suffit d’ajouter la déclaration correspondante au jeu de règles existant :

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
margin: 40px;
}
```

Dans le navigateur Web, une marge extérieure de 40 px est appliquée comme suit :

[![Image: Boîte de contenu avec padding, border et margin](https://www.ionos.fr/digitalguide/fileadmin/_processed_/1/3/csm_css-boxmodell-margin_cdd7eede56.webp "Boîte de contenu avec padding, border et margin")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-margin.jpg) La propriété margin impose une marge extérieure entre la border-box et l’élément parent. Comme alternative à l’indication d’une valeur, la propriété `margin` peut être définie avec la **valeur `auto`**. Dans ce cas, la boîte s’aligne automatiquement au centre, horizontalement, à l’intérieur de l’élément parent. Verticalement, `auto` n’a aucun effet.

Note L’espace occupé par une boîte CSS se calcule en additionnant les valeurs de tous les éléments qui la composent.

### Mise en forme de la boîte avec `float`

Si la boîte à mettre en forme est une boîte de type bloc, les boîtes suivantes **passent automatiquement à la ligne suivante**, conformément au flux des éléments.

Le retour à la ligne automatique après une boîte de type bloc n’est pas toujours souhaité en pratique et peut être empêché à l’aide de la propriété `float`. Celle-ci retire les boîtes de type bloc du flux normal des éléments et les place à l’endroit souhaité.

<table>
  <thead>
    <tr>
      <th><strong>Valeurs pour la propriété `float`</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Aucun déplacement de l’élément n’est effectué. Il s’agit de la valeur par défaut d’une boîte CSS.</td>
    </tr>
    <tr>
      <td>`left`</td>
      <td>La boîte de type bloc est déplacée vers le bord intérieur gauche de l’élément parent.</td>
    </tr>
    <tr>
      <td>`right`</td>
      <td>La boîte de type bloc est déplacée vers le bord intérieur droit de l’élément parent.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>La valeur de `float` est héritée de l’élément parent.</td>
    </tr>
  </tbody>
</table>

Une boîte avec une mise en forme `float` est appelée **float**.

Lorsque plusieurs éléments flottants se rencontrent, ils sont disposés dans l’ordre où ils apparaissent dans le code source HTML, de gauche à droite (`float: left`) ou de droite à gauche (`float: right`).

L’exemple de code suivant montre un ensemble de règles incluant la propriété `float` :

```css
.content {
    height: 150px;
    width: 150px;
    color: #000000;
    background-color: #808080;
    text-align: justify;
    padding: 20px;
    border: 5px solid #d82451;
    margin: 40px;
    float: left;
}
```

Lorsqu’elle est appliquée à deux éléments HTML, ceux-ci sont **retirés du flux du document** et alignés à gauche l’un à côté de l’autre :

```html
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="content">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
```

[![Image: Deux boîtes de bloc sous forme d’éléments flottants alignés à gauche](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/3/csm_css-box-model-float_72901a12c7.webp "Deux boîtes de bloc sous forme d’éléments flottants alignés à gauche")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-float.jpg) Avec la propriété float, il est possible d’afficher des boîtes de bloc côte à côte sans retour à la ligne. Le grand espace s’explique par le fait que les marges externes des deux boîtes s’additionnent. Sans `float`, les marges des éléments adjacents se fusionneraient.

## Créer un Webdesign responsive avec CSS

Pour concevoir un [Webdesign responsive](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-responsive-design/), le langage de feuilles de style propose deux techniques de mise en page modernes : [Flexbox](https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/css-flexbox/) et [Grid](https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/grilles-css/). Ces deux systèmes adaptent les contenus de manière dynamique aux différentes tailles d’écran. En combinaison avec les [Media Queries CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/media-queries-css/), il est également possible d’ajuster les mises en page de façon ciblée à différents appareils et largeurs d’écran.

### Flexbox

Avec CSS Flexbox (Flexible Box Layout), il est particulièrement simple de concevoir des **mises en page unidimensionnelles**. Flexbox aligne les contenus horizontalement ou verticalement, ce qui en fait une solution idéale pour les navigations, les galeries ou des zones de contenu modulaires.

Un conteneur flex est défini via la propriété `display: flex;`. Tous les éléments enfants directs deviennent automatiquement des « flex items », dont il est possible de contrôler de manière flexible le positionnement, l’ordre et la taille.

<table>
  <thead>
    <tr>
      <th><strong>Propriété</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`flex-direction`</td>
      <td>Cette propriété détermine la direction principale des flex items. La valeur `row` correspond à un alignement horizontal, `column` à un alignement vertical. Les valeurs `row-reverse` et `column-reverse` inversent respectivement le sens d’alignement.</td>
    </tr>
    <tr>
      <td>`justify-content`</td>
      <td>Les flex items sont alignés le long de l’axe principal. `flex-start` aligne les éléments au début de l’axe, `flex-end` à la fin et `center` au centre. Les valeurs `space-between`, `space-around` et `space-evenly` définissent différents modes de répartition de l’espace entre les éléments.</td>
    </tr>
    <tr>
      <td>`align-items`</td>
      <td>Les flex items sont alignés le long de l’axe transversal. Les valeurs `flex-start`, `flex-end` et `center` fonctionnent de manière similaire à `justify-content`. Les valeurs supplémentaires `baseline` permettent un alignement sur la ligne de base et `stretch` étire les éléments pour remplir le conteneur.</td>
    </tr>
    <tr>
      <td>`flex-wrap`</td>
      <td>La propriété définit si les flex items peuvent passer à la ligne. Avec `nowrap`, valeur par défaut, tous les éléments restent sur une seule ligne. Les valeurs `wrap` et `wrap-reverse` autorisent les retours à la ligne, éventuellement dans le sens inverse.</td>
    </tr>
    <tr>
      <td>`gap`</td>
      <td>`gap` définit l’espacement entre les flex items</td>
    </tr>
  </tbody>
</table>

Un exemple simple montre l’agencement horizontal des éléments avec un espacement uniforme :

```css
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
```

Les règles s’appliquent au code HTML suivant :

```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```

De plus, il est également possible de contrôler individuellement le comportement de certains flex items. Avec la propriété `flex`, vous pouvez par exemple définir dans quelle mesure un élément peut **s’agrandir ou se réduire** par rapport aux autres. Ici, la valeur 2 correspond à un doublement :

```css
.item1 {flex: 2; }
```

### Mise en page en grille (Grid)

Avec un CSS Grid, les contenus d’un site Web peuvent être disposés dans une **grille bidimensionnelle**. Le système de grille permet un contrôle précis des lignes et des colonnes, ce qui facilite la mise en place de mises en page complexes de manière simple et flexible. Pour créer une grille, on **attribue à un élément parent la propriété `display: grid;`**. Tous les éléments enfants directs de ce conteneur deviennent automatiquement des grid items. Ensuite, la grille peut être ajustée à l’aide d’un grand nombre de propriétés.

<table>
  <thead>
    <tr>
      <th><strong>Propriété</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`grid-template-columns`</td>
      <td>Définit la structure des colonnes de la grille. L’unité `fr` indique des fractions de l’espace disponible. Avec `auto`, la taille est déterminée automatiquement.</td>
    </tr>
    <tr>
      <td>`grid-template-rows`</td>
      <td>Définit la structure des lignes de la grille ; les valeurs possibles sont les mêmes que pour `grid-template-columns`</td>
    </tr>
    <tr>
      <td>`gap`</td>
      <td>Définit l’espacement entre les grid items</td>
    </tr>
    <tr>
      <td>`justify-items`</td>
      <td>Définit l’alignement horizontal des grid items. `start` aligne au début, `end` à la fin et `center` centre l’alignement ; la valeur par défaut `stretch` étire l’élément pour remplir la cellule</td>
    </tr>
    <tr>
      <td>`align-items`</td>
      <td>Définit l’alignement vertical des grid items ; les valeurs possibles sont les mêmes que pour `justify-items`</td>
    </tr>
  </tbody>
</table>

Un exemple montre la structure d’une grille avec trois colonnes de même largeur et deux lignes, à l’aide de valeurs `fr` uniformes :

```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}
```

Chaque grid item peut également être **positionné de manière ciblée**, par exemple pour s’étendre sur plusieurs colonnes ou lignes. Pour cela, les propriétés `grid-column` et `grid-row` sont disponibles. On indique la ligne de début (inclusive) et la ligne de fin (exclusive), séparées par un slash (`/`). Dans l’exemple suivant, l’élément s’étend sur deux colonnes et une ligne.

```css
.item1 {
grid-column: 1 / 3; 
grid-row: 1; 
}
```

### Media queries

Les media queries permettent d’**appliquer des règles CSS en fonction des caractéristiques de l’appareil**. Ainsi, la mise en page peut différer sur smartphone, tablette et écran d’ordinateur, sans nécessiter plusieurs fichiers HTML. Une media query permet d’activer ou d’écraser des styles de manière ciblée dès que certaines conditions sont remplies. L’usage le plus courant est l’adaptation à différentes largeurs de viewport, pour laquelle les valeurs suivantes sont nécessaires :

<table>
  <thead>
    <tr>
      <th><strong>Propriété / syntaxe</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`@media`</td>
      <td>Introduit une media query</td>
    </tr>
    <tr>
      <td>`screen`, `print`, `all`</td>
      <td>Définit le type de média auquel les règles CSS s’appliquent</td>
    </tr>
    <tr>
      <td>`min-width`</td>
      <td>Active les règles CSS à partir d’une largeur minimale définie</td>
    </tr>
    <tr>
      <td>`max-width`</td>
      <td>Active les règles CSS jusqu’à une largeur maximale définie</td>
    </tr>
  </tbody>
</table>

Un exemple montre comment une media query peut être utilisée pour modifier la mise en page en dessous d’une certaine largeur :

```css
/ *Mise en page standard pour les écrans plus grands* /
.container {display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Adaptation pour les écrans plus petits* /
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
```

Plusieurs conditions peuvent aussi être combinées, par exemple pour modifier les mises en page uniquement sur les tablettes en mode portrait :

```css
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}
```

## Exploiter les variables CSS

Les variables CSS (aussi appelées **custom properties**) permettent de **stocker des valeurs de manière centralisée** et de les réutiliser plusieurs fois dans la feuille de style. Vous pouvez ainsi modifier des couleurs, des espacements ou des tailles de police à un seul endroit, sans devoir adapter tout le CSS. Le code est alors plus lisible, plus facile à maintenir et plus cohérent.

Les variables CSS sont définies avec un double tiret (`--`) et s’utilisent via la fonction `var()`.

<table>
  <thead>
    <tr>
      <th><strong>Syntaxe</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`--nom-de-variable`</td>
      <td>Définit une variable personnalisée</td>
    </tr>
    <tr>
      <td>`var(--nom-de-variable)`</td>
      <td>Récupère la valeur d’une variable définie</td>
    </tr>
    <tr>
      <td>`:root`</td>
      <td>La portée globale (correspond à l’élément HTML le plus haut)</td>
    </tr>
  </tbody>
</table>

Un exemple montre comment définir et utiliser des variables :

```css
:root {
    --main-color: #ff4081;
    --text-color: #333;
    --padding: 10px;
}
button {
    background-color: var(--main-color);
    color: var(--text-color);
    padding: var(--padding);
}
```

Ici, les variables `--main-color`, `--text-color` et `--padding` sont définies dans `:root`, donc globalement pour toute la page. Le bouton utilise ces variables avec `var()`, de sorte que la couleur d’arrière-plan, la couleur du texte et l’espacement **sont automatiquement repris à partir des valeurs des variables**.


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/](https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/) for AI/LLM consumption.