Faire le lien entre sa page HTML et les CSS

La première métode consiste à inclure la feuille de style dans le code HTML. On utilise alors la balise <style> </style>. Il est obligatoire de préciser que le langage utilisé est le CSS, avec l'attribut type="text/css.

1  <style type="text/css">
2  <!--
3    /* Le code css */
4  -->
5  </style>

On peut importer une feuille de style externe avec le code :

1  <style type="text/css">
2  <!--
3  @import url(style.css);
4  -->
5  </style>

La meilleure métode reste l'utilisation de la balise <link />, que l'on utilisera avec une série d'attributs :

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

Avec les navigateurs compatibles, vous pouvez indiquer plusieurs feuilles de style alternatives, pour changer de design sans recharger la page (vous pouvez voir un exemple, avec Mozilla ou Firefox sur OpenWeb), il faudra donc ajouter l'attribut title, et donner à l'attribut rel la valeur alternate stylesheet. (Seule la/les feuille(s) par défaut garderont la valeur stylesheet).

Il est également possible de charger plusieurs feuilles de style en même temps.

1  <!-- Deux feuilles de style chargées en même temps -->
2  <link rel="stylesheet" type="text/css" href="./style.css"
   title="Design par defaut" />
3  <link rel="stylesheet" type="text/css" href="./style2.css"
   title="Design par defaut" />
4  <!-- Feuilles de style secondaires -->
5  <link rel="alternate stylesheet" type="text/css" href="./alternate.css"
   title="Design secondaire" />
6  <link rel="alternate stylesheet" type="text/css" href="./bigfont.css"
   title="Design grosses polices" />

On peut aussi, mais cette méthode est de loin la moins propre et la moins commode, intégrer les données CSS directement à l'élément grace à l'attribut style="[code css]".
Pour certaines raisons, on peut y avoir ponctuellement recours, mais cette méthode n'est pas conseillé, puisque dans un premier temps, le design et le code HTML sont mélangés, et que l'on perd l'avantage de pouvoir modifier le design en modifiant simplement quelques lignes de code.

N'hésitez pas à poser vos questions sur le forum