Intégrer du CSS dans une page HTML : guide pratique avec exemples

En matière de sites Web, il n’y a pas que le contenu qui compte : la présentation est aussi très importante. La feuille de style en cascade CSS est un langage généralement utilisé pour formater le HTML de manière appropriée. C’est ainsi que sont définis les attributs tels que la mise en page, la couleur et la forme des éléments HTML individuels. Les instructions de conception CSS existent indépendamment de HTML et doivent également être intégrées dans le document électronique.

Hébergement Web
Hébergement Web flexible, performant et sûr
  • Certificat SSL et protection DDoS
  • Sauvegarde et restauration des données
  • Assistance 24/7 et conseiller personnel

Comment intégrer du CSS dans une page HTML : les différentes méthodes

Associer du CSS à du HTML est possible avec des feuilles de style internes ou externes. Avec des feuilles de style internes, les instructions CSS sont situées dans le document HTML. Vous pouvez également intégrer du CSS au début du fichier HTML ou le placer dans le code source. Il est préférable d’avoir une bonne compréhension de base du HTML et de sa syntaxe pour utiliser cette méthode. Enfin, la façon la plus courante et la plus propre de développer des sites Web consiste à utiliser des feuilles de style CSS externes. Le CSS est intégré en liant le document HTML à un fichier CSS externe. Voici ci-dessous un aperçu des trois méthodes :

  • Style interne, c’est-à-dire directement dans le code source
  • Au début du document HTML
  • Externalisé vers un fichier CSS externe
Conseil

L’outil de création de site Web MyWebsite de IONOS comprend un vaste choix de templates afin que vous puissiez créer un site Web d’apparence professionnelle.

Intégrer le CSS dans une page HTML : style interne

Avec cette méthode, les instructions de conception sont intégrées directement dans le code source à l’aide d’une balise style. Les propriétés souhaitées sont attribuées uniquement à un seul élément, de sorte que des conceptions distinctes sont possible au fil du document HTML. Dans l’exemple ci-dessous, le titre h1 doit apparaître en bleu et avec une taille de police de 14 :

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

Avec ce type d’intégration, on perd beaucoup des avantages du CSS. Parmi ceux-ci, l’option de définir une commande unique qui s’appliquera, par exemple, à tous les éléments de h1 dans le document HTML. Dans certaines circonstances, cela suppose également plus de travail de maintenance, car des interventions directes sur le code HTML sont nécessaires.

Ajouter le CSS au début de la page HTML

Cette méthode permet d’intégrer le CSS dans l’en-tête de votre document HTML. La balise style est donc intégrée à l’élément head et s’applique à la totalité du fichier. Les instructions de conception sont contenues dans le document mais sont distinctes du code HTML. Dans l’exemple ci-dessous, on applique la même commande que dans l’exemple précédent. En revanche, tous les titres h1 seront formatés conformément aux instructions. 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>

Intégrer le CSS avec un fichier externe

Il s’agit sans doute de la meilleure méthode pour intégrer du CSS dans une page HTML. Comme un site Web est souvent constitué de multiples pages, il paraît sensé d’enregistrer les instructions de conception dans un fichier séparé. Cela permet une séparation claire entre contenu et conception et facilite la maintenance. Le fichier exporté renvoie simplement au document HTML. Vous enregistrez la feuille de style externe avec l’extension .css et utilisez ensuite une balise link pour l’intégrer dans votre fichier HTML. Dans l’exemple suivant, le fichier CSS est nommé stylesheet.css.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>

The rel attribute defines the logical relationship type; and href refers to the CSS file to be embedded. Note that the link element can take on other attributes. With media = "print" you specify, for example, that the stylesheet is only used in the print view. The external stylesheet does not contain any HTML tags, just the respective selector and curly brackets with the declarations as in the following example:

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

Découvrez les meilleures astuces CSS pour optimiser la conception de votre projet Web ou faites directement confiance au service de conception MyWebsite de IONOS pour un résultat professionnel.

Cet article vous a-t-il été utile ?