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 avec conseiller personnel !
Hébergement Web puissant, flexible et performant avec boîte email, conseiller personnel et domaine inclus la 1ère année !
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
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;
}
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.
Articles similaires
Compresser des fichiers CSS pour améliorer la performance
Il est rare de trouver des données qui permettent la mise en page d’un site dans des codes HTML. Les couleurs, les polices voire les tailles de ces éléments HTML sont de plus en plus souvent définies dans des feuilles de style telles que CSS. Lorsqu’un site Internet devient complexe, on constate souvent qu’il y a de plus en plus de fichiers CSS inutiles, et cela peut avoir un effet très négatif…
Grille CSS : layout avec fonctionnalités intelligentes
Comment créer une belle mise en page si vous ne connaissez pas la taille de la zone d’affichage ? Avec les grilles CSS, ce n’est pas un problème ! Cette technique permet aux concepteurs de sites Web de définir leur propre grille et d’y placer tous les éléments. Grâce à des automatismes et des fonctions intelligentes, le layout grille CSS s’adapte à différents affichages de façon dynamique.
Responsive Web design et CSS
Les polices de caractères sont bien trop souvent oubliées en Responsive Web design bien qu’il soit relativement aisé de les mettre en place de manière adaptative. Mais comment y parvenir ? Quelles polices de caractères sont adaptées à votre présence sur le Web ? Nous vous donnons un aperçu des procédés techniques et des commandes CSS à mettre en place pour votre projet Web.
Sinart CreativeShutterstock Tailwind CSS : qu’est-ce qui rend ce framework utility-first si exceptionnel ?
Si vous êtes déjà expert en codage en CSS et que vous cherchez un framework particulièrement flexible et individuel, Tailwind CSS est une bonne option. Cette solution destinée aux professionnels simplifie le travail et offre un vaste éventail d’options de design. Lisez cet article dédié pour en savoir plus sur ce framework et pourquoi les débutants devraient plutôt utiliser une alternative à…
CSS : padding et margin, différents formatages
La liste des propriétés du langage de programmation CSS peut vite paraître sans fin… Pour y voir plus clair, nous vous expliquons ici les différences entre les propriétés de formatage CSS padding et margin. Pour distinguer facilement les deux commandes CSS, vous trouverez aussi un modèle de boîte en CSS facile à mémoriser.
