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.

Hébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Quelles méthodes d’intégration 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 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 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
Créer un site Internet
Votre site en un éclair grâce à l'intelligence artificielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Générateur d'images et de textes avec optimisation SEO
  • Domaine, SSL et boîte email inclus

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

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

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

<!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 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 » :

<!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’appliquera qu’à l’impression. La feuille de style externe ne contient pas de balises HTML, mais uniquement des sélecteurs suivis d’accolades contenant les déclarations CSS, comme dans l’exemple ci-dessous :

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

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

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

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

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

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

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

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