Pour mettre en forme un document HTML de manière at­trayante, on utilise le langage de feuilles de style CSS. Il permet de définir des pro­prié­tés tel­le­réacs que la mise en page, les couleurs ou la ty­po­gra­phie des dif­fé­rents éléments HTML. Les ins­truc­tions de style CSS sont in­dé­pen­dantes du code HTML et doivent d’abord être intégrées dans le document pour être ap­pli­quées.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Quelles méthodes d’in­té­gra­tion existent ?

Lorsque vous intégrez du 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 ins­truc­tions CSS sont di­rec­te­ment insérées dans le document HTML. Vous pouvez intégrer le CSS dans l’en-tête du fichier HTML ou l’ajouter di­rec­te­ment dans le code source. Cette approche nécessite toutefois une bonne con­nais­sance de base du HTML et de sa syntaxe.

La technique la plus courante et la plus propre dans le dé­ve­lop­pe­ment 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 ins­truc­tions de mise en forme.

Voici un aperçu des trois méthodes possibles :

  • Style en ligne : di­rec­te­ment dans le code source
  • Feuille de style interne : au début du document HTML
  • Feuille de style externe : dans un fichier CSS externe
Créer un site Internet
Votre site en un éclair grâce à l'in­tel­li­gence ar­ti­fi­cielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Gé­né­ra­teur d'images et de textes avec op­ti­mi­sa­tion SEO
  • Domaine, SSL et boîte email inclus

Intégrer le CSS dans HTML : style en ligne

Avec cette méthode, les ins­truc­tions de style sont intégrées di­rec­te­ment dans le code source à l’aide de l’attribut style. Les pro­prié­tés choisies s’ap­pli­quent alors à un seul élément HTML, ce qui permet de per­son­na­li­ser in­di­vi­duel­le­ment 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 :

<h1 style="color: blue; font-size: 14px;">Ceci est un titre</h1>
html

Avec ce type d’in­té­gra­tion, 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 ap­pli­cable à tous les éléments h1 du document HTML. De plus, cette approche rend la main­te­nance plus complexe, car chaque mo­di­fi­ca­tion implique d’éditer di­rec­te­ment 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’ap­pli­quent à tout le document.

Les ins­truc­tions de style CSS 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é­dem­ment est utilisée, mais cette fois, elle s’applique à tous les titres h1 du fichier.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
html

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 ins­truc­tions de style dans un fichier séparé. Cette approche permet de séparer clai­re­ment le contenu du design et facilite con­si­dé­ra­ble­ment la main­te­nance. Le fichier externe, en­re­gis­tré 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 « sty­le­sheet.css » :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
html

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’ap­pli­quera qu’à l’im­pres­sion. La feuille de style externe ne contient pas de balises HTML, mais uni­que­ment des sé­lec­teurs suivis d’accolades contenant les dé­cla­ra­tions CSS, comme dans l’exemple ci-dessous :

h1 {
color: blue;
font-size: 14px;
}
css

Aperçu des nouvelles fonc­tion­na­li­tés CSS les plus courantes

En com­plé­ment des méthodes clas­siques d’in­té­gra­tion du CSS dans HTML, de nom­breuses fonc­tion­na­li­tés récentes ont vu le jour, offrant une plus grande souplesse dans la con­cep­tion des sites Web. Grâce à des sé­lec­teurs 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 per­met­tent à des com­po­sants in­di­vi­duels de s’adapter à la taille de leur conteneur, in­dé­pen­dam­ment de la largeur de la fenêtre. Ces évo­lu­tions rendent la création d’in­ter­faces plus mo­du­laires, dy­na­miques et er­go­no­miques, sans recourir à des scripts complexes ni à Ja­vaS­cript.

Pseudo-classe CSS :has()

La pseudo-classe :has() agit comme un sélecteur parent capable d’appliquer des styles spé­ci­fiques selon la présence ou l’état de certains éléments enfants. Par exemple, un champ de for­mu­laire peut s’afficher en rouge lorsqu’il contient une erreur et en vert lorsqu’il est cor­rec­te­ment renseigné :

.form-group:has(input:invalid) {
    border: 2px solid red;
}
.form-group:has(input:valid) {
    border: 2px solid green;
}
css

Requêtes de conteneur

Les requêtes de conteneur per­met­tent d’appliquer des règles CSS non plus en fonction de la taille de la fenêtre du na­vi­ga­teur (comme avec les Media Queries), mais en fonction des di­men­sions du conteneur parent.

Chaque module ou composant peut ainsi s’adapter dy­na­mi­que­ment à l’espace dont il dispose, offrant un design Web res­pon­sive modulaire et réel­le­ment flexible, in­dé­pen­dant de la largeur globale de la fenêtre.

Par exemple, vous pouvez con­fi­gu­rer des cartes contenant une image et du texte pour qu’elles s’affichent côte à côte dès que leur conteneur devient suf­fi­sam­ment large.

Si le conteneur est plus étroit qu’une valeur définie (ici 400 pixels), l’affichage par défaut est conservé.

@container (min-width: 400px) {
    .card { flex-direction: row; }
}
css

Im­bri­ca­tion CSS

L’im­bri­ca­tion CSS permet de placer des sé­lec­teurs à l’intérieur d’autres sé­lec­teurs, comme c’est déjà le cas avec SCSS ou LESS. Cette fonc­tion­na­lité 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é­lec­teurs.

Dans l’exemple ci-dessous, tous les boutons partagent une mise en forme de base et, selon la classe sup­plé­men­taire (primary ou secondary), adoptent une apparence dif­fé­rente.

button {
    padding: 0.5rem 1rem;
    border: none;
    &.primary {
        background: blue;
        color: white;
    }
    &.secondary {
        background: gray;
        color: black;
    }
}
css

Nouvelles fonctions de couleur

Les nouvelles fonctions CSS comme color-mix() et light-dark() offrent davantage de flexi­bi­lité dans la gestion des couleurs. Elles per­met­tent de mélanger dy­na­mi­que­ment des teintes di­rec­te­ment dans la feuille de style ou de sé­lec­tion­ner au­to­ma­ti­que­ment des variantes selon la lu­mi­no­sité du thème. Grâce à ces fonctions, il devient possible de créer fa­ci­le­ment des dégradés, des thèmes per­son­na­li­sés ou des adap­ta­tions au­to­ma­tiques pour le mode sombre, sans devoir calculer ma­nuel­le­ment 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, pro­dui­sant ainsi un ton violet.

.btn {
    background: color-mix(in srgb, red 50%, blue);
}
css

Scroll Snap

La propriété Scroll Snap en CSS permet de faire en sorte que certains éléments se ver­rouil­lent au­to­ma­ti­que­ment à des positions définies lors du dé­fi­le­ment. Cette fonc­tion­na­lité est par­ti­cu­liè­re­ment utile pour créer des galeries d’images, des car­rou­sels ou des sections de page qui s’arrêtent exac­te­ment à un point précis lorsque l’uti­li­sa­teur fait défiler le contenu. Elle améliore la fluidité et l’ergonomie de la na­vi­ga­tion.

Dans l’exemple ci-dessous, le conteneur parent .slider défile ho­ri­zon­ta­le­ment (x) et applique un ver­rouil­lage obli­ga­toire (mandatory). Chaque élément enfant .slide s’aligne au­to­ma­ti­que­ment pour se « ver­rouil­ler » au début du conteneur (start) lors du dé­fi­le­ment.

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}
css
Aller au menu principal