Les feuilles de style en cascade (Cascadind Style Sheets) abréviativement appelées CSS, permettent de gérer l’apparence des éléments de votre page html, par un fichier externe que nous nommerons style.css (style externe). Ce lien sera réalisé par l’insertion dans l’en-tête votre page html de la balise :
<link rel= "stylesheet" href= "url/style.css" type= "text/css" />.
Cette méthode que nous emploierons très souvent, n’est pas la seule possible. Vous pouvez aussi inscrire le style directement comme attribut d’une balise (style en ligne) ou encore dans l’en-tête de votre page html entre les balises <style type="text/css"> et </style> (style interne).
Il existe une quatrième méthode (style incorporé) qui permet l’usage d’une feuille de style externe. Il s’agit de la propriéte @import que l’on utilisera dans la page html avec la syntaxe
<style type="text/css">@import url(style.css) ;</style>
mais aussi et surtout au début d’une autre feuille de style externe avec la syntaxe :
@import url(style.css) ;
Remarque sur l’effet cascade :
Lorsque vous faites cohabiter ces différentes méthodes de déclaration de style, il faut éviter les risques de conflit quant à la façon de définir le style d’un même élément. On utilise alors la règle de priorités suivante : on applique d’abord le style en ligne, puis le style interne et enfin le style externe ou incorporé.
Si vous voulez déroger à cette règle, et forcer une valeur de style a être appliquée à la place d’une autre qui lui est prioritaire, il suffit d’ajouter !important en fin de votre directive de style.
Les styles externes et incorporés ont la même priorité ; l’ordre dans lequel vous les déclarerez dans l’en-tête précisera le style utilisé (le deuxième écrasera le premier).
Remarque sur Internet explorer :
Il est parfois nécessaire de donner des valeurs de style particulière pour ce navigateur. Pour ce faire, vous ajouterez !ie en fin de votre directive de style ou vous préfixerez la propriété avec un underscore.
Ces deux méthodes sont très pratiques lors de la conception de votre feuille de style, mais elles ne vous permettront pas d’obtenir la validation CSS du W3C. Pour ce faire, il faudra placer toutes les règles de style spécifiques à Internet Explorer dans un fichier dont l’appel sera effectué après celui celui du style à commun à tous les navigateurs. Vous utiliserez alors la syntaxe suivante :
< !—[if IE ]>
<link rel= "stylesheet" href= "url/style.css" type= "text/css" />
< ![endif]—>
Pour lier à votre page une feuille de style spéciale lorsque le navigateur est Internet Explorer avec une version inférieure ou égale à 6 (la gestion des images transparentes de type png par exemple), vous écrirez :
< !—[if lte IE 6]>
<link rel= "stylesheet" href= "url/style.css" type= "text/css" />
< ![endif]—>