# Comment intégrer du CSS dans un document HTML ?
Pour mettre en forme un document HTML de manière attrayante, on utilise le langage de feuilles de style CSS. Il permet de définir des propriétés telleréacs que la mise en page, les couleurs ou la typographie des différents éléments HTML. Les instructions de style CSS sont indépendantes du code HTML et doivent d’abord être intégrées dans le document pour être appliquées.
## Quelles méthodes d’intégration existent ?
Lorsque vous intégrez du [CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-css/) dans un document HTML, cela peut se faire à l’aide de **feuilles de style internes** ou **externes**.
Avec les feuilles de style internes, les instructions CSS sont directement insérées dans le document HTML. Vous pouvez intégrer le CSS **dans l’en-tête du fichier HTML** ou l’ajouter **directement dans le code source**. Cette approche nécessite toutefois une bonne [connaissance de base du HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/apprendre-le-html-le-tutoriel-pour-debutant/) et de sa syntaxe.
La technique la plus courante et la plus propre dans le développement Web consiste à utiliser des feuilles de style externes. Dans ce cas, le document HTML est relié à un fichier CSS séparé qui contient toutes les instructions de mise en forme.
Voici un aperçu des trois méthodes possibles :
- **Style en ligne** : directement dans le code source
- **Feuille de style interne** : au début du document HTML
- **Feuille de style externe** : dans un fichier CSS externe
## Intégrer le CSS dans HTML : style en ligne
Avec cette méthode, les instructions de style sont intégrées directement dans le code source à l’aide de l’attribut `style`. Les propriétés choisies s’appliquent alors à un seul [élément HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-element/), ce qui permet de personnaliser individuellement certains éléments du document.
Dans l’exemple ci-dessous, le titre `h1` s’affiche en bleu avec une taille de police de 14 pixels :
```html
Ceci est un titre
```
Avec ce type d’intégration, il faut garder à l’esprit que de nombreux avantages du CSS sont perdus. Par exemple, il n’est plus possible de définir une règle globale applicable à tous les éléments `h1` du document HTML. De plus, cette approche rend la maintenance plus complexe, car chaque modification implique d’éditer directement le code source.
## Intégrer le CSS dans l’en-tête du document HTML
Dans cette variante, le CSS est intégré dans la section d’en-tête (`head`) du document HTML. La balise `style` y est insérée et les règles définies s’appliquent à tout le document.
Les [instructions de style CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/) restent incluses dans le document, mais sont nettement mieux séparées du contenu HTML.
Dans l’exemple ci-dessous, la même mise en forme que précédemment est utilisée, mais cette fois, elle s’applique à tous les titres `h1` du fichier.
```html
Ceci est un titre
Ceci est un paragraphe.
hash_2e356dcfc059a3c82be0c24e57703a3653add134
```
## Intégrer le CSS à partir d’un fichier externe
Il s’agit sans doute de la technique la plus efficace pour intégrer du CSS dans un document HTML. Comme un site Web se compose souvent de plusieurs pages, il est préférable de regrouper toutes les instructions de style dans un fichier séparé. Cette approche permet de **séparer clairement le contenu du design** et facilite considérablement la maintenance. Le fichier externe, enregistré avec l’extension `.css`, est ensuite lié au document HTML à l’aide de la balise `link`.
Dans l’exemple ci-dessous, la feuille de style externe s’appelle « **stylesheet.css** » :
```html
Ceci est un titre
Ceci est un paragraphe.
hash_2e356dcfc059a3c82be0c24e57703a3653add134
```
L’attribut `rel` définit le type de relation entre le document HTML et le fichier associé, tandis que `href` indique le chemin d’accès au fichier CSS à intégrer. L’élément `link` peut également comporter d’autres attributs : par exemple, avec `media="print"`, vous pouvez spécifier que la feuille de style ne s’appliquera qu’à l’impression. La feuille de style externe ne contient pas de [balises HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/), mais uniquement des sélecteurs suivis d’accolades contenant les déclarations CSS, comme dans l’exemple ci-dessous :
```css
h1 {
color: blue;
font-size: 14px;
}
```
## Aperçu des nouvelles fonctionnalités CSS les plus courantes
En complément des méthodes classiques d’intégration du CSS dans HTML, de nombreuses fonctionnalités récentes ont vu le jour, offrant une plus grande souplesse dans la conception des sites Web. Grâce à des sélecteurs modernes comme `:has()`, il est désormais possible de cibler des éléments parents en fonction de leurs enfants, tandis que les **requêtes de conteneur** permettent à des composants individuels de s’adapter à la taille de leur conteneur, indépendamment de la largeur de la fenêtre. Ces évolutions rendent la création d’interfaces plus **modulaires**, **dynamiques** et **ergonomiques**, sans recourir à des scripts complexes ni à JavaScript.
### Pseudo-classe CSS `:has()`
La pseudo-classe `:has()` agit comme un **sélecteur parent** capable d’appliquer des styles spécifiques selon la présence ou l’état de certains éléments enfants. Par exemple, un champ de formulaire peut s’afficher en rouge lorsqu’il contient une erreur et en vert lorsqu’il est correctement renseigné :
```css
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}
```
### Requêtes de conteneur
Les requêtes de conteneur permettent d’appliquer des règles CSS non plus en fonction de la taille de la fenêtre du navigateur (comme avec les [Media Queries](https://www.ionos.fr/digitalguide/sites-internet/web-design/media-queries-css/)), mais en fonction des **dimensions du conteneur parent**.
Chaque module ou composant peut ainsi s’adapter dynamiquement à l’espace dont il dispose, offrant un [design Web responsive](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-responsive-design/) **modulaire et réellement flexible**, indépendant de la largeur globale de la fenêtre.
Par exemple, vous pouvez configurer des cartes contenant une image et du texte pour qu’elles s’affichent **côte à côte** dès que leur conteneur devient suffisamment large.
Si le conteneur est plus étroit qu’une valeur définie (ici 400 pixels), l’affichage par défaut est conservé.
```css
@container (min-width: 400px) {
.card { flex-direction: row; }
}
```
### Imbrication CSS
L’imbrication CSS permet de **placer des sélecteurs à l’intérieur d’autres sélecteurs**, comme c’est déjà le cas avec SCSS ou [LESS](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/less-css/). Cette fonctionnalité rend le code plus lisible et mieux structuré, car les styles liés à un même élément sont regroupés en un seul bloc, sans avoir à répéter de longues chaînes de sélecteurs.
Dans l’exemple ci-dessous, tous les boutons partagent une mise en forme de base et, selon la classe supplémentaire (`primary` ou `secondary`), adoptent une apparence différente.
```css
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}
```
### Nouvelles fonctions de couleur
Les nouvelles fonctions CSS comme `color-mix()` et `light-dark()` offrent davantage de flexibilité dans la gestion des couleurs. Elles permettent de **mélanger dynamiquement des teintes** directement dans la feuille de style ou de **sélectionner automatiquement des variantes** selon la luminosité du thème. Grâce à ces fonctions, il devient possible de créer facilement des dégradés, des thèmes personnalisés ou des adaptations automatiques pour le mode sombre, sans devoir calculer manuellement les valeurs de couleur. Le CSS gagne ainsi en souplesse : les couleurs ne sont plus définies de façon statique, mais peuvent être **calculées et ajustées en temps réel**.
Dans l’exemple ci-dessous, la couleur de fond de tous les éléments possédant la classe `.btn` est générée à l’aide de la fonction `color-mix()` avec un ratio de 50:50 entre le rouge et le bleu, produisant ainsi un ton violet.
```css
.btn {
background: color-mix(in srgb, red 50%, blue);
}
```
### Scroll Snap
La propriété Scroll Snap en CSS permet de faire en sorte que certains éléments se **verrouillent automatiquement à des positions définies** lors du défilement. Cette fonctionnalité est particulièrement utile pour créer des galeries d’images, des carrousels ou des sections de page qui s’arrêtent exactement à un point précis lorsque l’utilisateur fait défiler le contenu. Elle améliore la fluidité et l’ergonomie de la navigation.
Dans l’exemple ci-dessous, le conteneur parent `.slider` défile **horizontalement** (`x`) et applique un verrouillage **obligatoire** (`mandatory`). Chaque élément enfant `.slide` s’aligne automatiquement pour se « verrouiller » **au début du conteneur** (`start`) lors du défilement.
```css
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}
```
This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/web-design/integrer-du-css-dans-une-page-html/](https://www.ionos.fr/digitalguide/sites-internet/web-design/integrer-du-css-dans-une-page-html/) for AI/LLM consumption.