Faire le lien entre sa page HTML et les CSS


La première méthode 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 ternate 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 csss]".

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.



>
retour au sommaire

> voir la suite