Intégrer le CSS¶

Maintenant que vous êtes un cador du HTML, nous allons voir comment styliser tout ça. Alors que le HTML sert à structurer notre contenu au moyen de balises, le CSS sert lui à mettre en forme ce contenu.

Où coder en CSS ?¶

Commençons par connaître les moyens d'intégrer du CSS à nos pages HTML.

1. CSS en ligne¶

Le CSS en ligne consiste à ajouter l'attribut style directement dans un élément HTML. Voici un exemple :

HTML

<p style="color: red; font-size: 20px;">This is a red paragraph.</p>

Attention! Cette méthode encombre le HTML, qu'il est difficile à maintenir et qu'il n'est pas évolutif pour les grands sites Web. S'il est utilisé de manière excessive, il peut conduire à un code répétitif et rendre les mises à jour fastidieuses, voir pénalisé la vitesse de rendu de la page.

2. CSS interne¶

Le CSS interne utilise la balise <style> placée dans la section <head> de votre document HTML.

Le CSS en ligne consiste à ajouter l'attribut style directement dans un élément HTML. Voici un exemple :

HTML

<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            text-align: center;
        }
    </style>
</head>

Notez: Le CSS en ligne ne peut pas être réutilisé dans plusieurs fichiers HTML, ce qui rend les modifications à l’échelle du site plus fastidieuses.

3. CSS externe¶

Le CSS externe consiste à créer un fichier .css distinct et à le référencer dans le <head> de votre code HTML à l'aide de la balise <link>. Voici comment cela fonctionne :

Nous allons maintenant quitter nos fichiers .html pour ouvrir style.css. En effet, le CSS est à coder de préférence dans les fichiers type .css.

Avant toute chose, il va falloir dire à notre fichier .html où se trouve notre feuille de style .css. Pour cela, nous allons ajouter une ligne de code dans la balise <head> :

HTML

<link rel="stylesheet" type="text/css" href="style.css">

Cette balise <link> est auto-fermante. Elle contient 3 attributs :

rel : qui défini la relation entre le fichier .html et le fichier lié. Ici, il s'agit de notre feuille de style.
type : qui définit le type de document lié. Ici, il s'agit d'un fichier .css.
href : permet d'indiquer le chemin vers notre fichier.

Pour info

Le CSS externe est l’approche recommandée pour la plupart des projets Web en raison de sa maintenabilité, de son évolutivité et de ses avantages en termes de performances.