Cours 2.4. CSS dans un fichier externe

Fichier externe

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.

Syntaxe

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 ...).

Exemple

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 :

Tester l'exemple en ligne

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 !

Exercice

Considérons la page HTML suivante. Charger les feuilles de styles suivantes:

commencez par https://lucidar.me/en/web-dev-class/files/css-style-1.css
puis, remplacez la par 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é:

Faire l'exercice en ligne

Solution

Cours 2.3 Sommaire Cours 2.5

Voir aussi

Dernière mise à jour : 26/05/2021