La solution la plus répandue dans la conception de sites internet est l'utilisation
d'un ou plusieurs fichiers qui contiennent les styles de l'ensemble du site. Ces
fichiers doivent avoir une extension .css
et contenir des styles dont
la syntaxe est identique à celle des styles internes.
Il est nécessaire de spécifier dans l'en-tête de la page le chemin vers le fichier
CSS grâce à la balise <link>
:
<link rel="stylesheet" href="chemin/fichier.css">
L'attribut rel
signifie relationship qui correspond à la relation entre
le fichier et la page. Il peut être de différents types (stylesheet, icon ...).
Le code ci-dessous présente un exemple d'intégration de styles externes :
<!DOCTYPE html>
<html>
<head>
<!-- Police de caractère Google -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron">
<!-- Style du site lucidar.me -->
<link rel="stylesheet" type="text/css" href="https://lucidar.me/css/generic.css">
</head>
<body>
<h1>Titre</h1>
<h2>Sous-titre</h2>
<p>Paragraphe</p>
</body>
</html>
Le code précédent affiche le rendu suivant dans le navigateur :
La première balise <link>
importe des polices de caractères depuis le site
Google Font, la seconde importe les styles
de ce site ... que vous aurez sans-doute reconnus !
Considérons la page HTML suivante. Charger les feuilles de styles suivantes:
https://lucidar.me/en/web-dev-class/files/css-style-1.css
https://lucidar.me/en/web-dev-class/files/css-style-2.css
<!DOCTYPE html>
<html>
<head>
<!-- Load stylesheet here -->
</head>
<body>
<h1>One page, many styles</h1>
<h2>Heading 2 title</h2>
</body>
</html>
Voici le résultat escompté: