CSS externe

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 8 sur 76.

Le CSS externe est une méthode d'ajout de styles CSS à un document HTML en les plaçant dans un fichier CSS séparé et en liant ce fichier au document HTML à l'aide de la balise <link>. Cette approche vous permet d'appliquer les mêmes styles à plusieurs pages HTML, ce qui facilite la maintenance et la mise à jour du design de votre site web. Le CSS externe est idéal pour les grands projets où la cohérence et l'efficacité sont cruciales.

Voici comment utiliser du CSS externe :

Créez un fichier CSS (par exemple, styles.css) avec vos règles CSS :

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Liez le fichier CSS à votre document HTML en ajoutant une balise <link> dans la section <head> :

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Dans cet exemple, la balise <link> connecte le fichier styles.css au document HTML. L'attribut rel spécifie la relation entre le document HTML et le fichier lié (feuille de style), et l'attribut href spécifie le chemin vers le fichier CSS.

Défi

Facile

On vous fournit des fichiers HTML et CSS (index.html et styles.css), ajoutez une balise link dans le fichier HTML pour connecter les fichiers et ajouter les styles au fichier HTML !

Aide-mémoire

Le CSS externe vous permet de placer les styles CSS dans un fichier séparé et de le lier aux documents HTML à l'aide de la balise <link>.

Créez un fichier CSS avec vos styles :

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Liez le fichier CSS dans la section <head> du HTML :

<link rel="stylesheet" href="styles.css">

L'attribut rel spécifie la relation (stylesheet) et href spécifie le chemin vers le fichier CSS.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>