Feuilles de style
Mini FAQ sur les styles

HomeUpDown

Les feuilles de style sont-elles case sensitive ?
Quels caractères peut-on utiliser en CSS ?
Peut-on utiliser dans la même page, à la fois
des éléments de style CSS et Html ?
Qui l'emportent, les attributs Html ou les propriétés CSS ?
Et s'il y a concurrence entre plusieurs éléments de style ?

Les feuilles de style sont-elles "case sensitive" ?

Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent.
Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive. Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.

Top

Quels caractères peut-on utiliser en CSS ?

Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9, le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret.
La documentation officielle affirme que les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter.

Top

Peut-on utiliser dans la même page, à la fois
des éléments de style CSS et Html ?

Oui. Les feuilles de style seront ignorées par les browsers qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs.

Top

Qui l'emportent : les attributs Html ou les propriétés CSS ?

Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés avec les browsers qui ne supportent pas les CSS et n'auront aucun effet avec les browsers qui supportent les feuilles de style.

Ainsi, <H3 style="color=red"><B><FONT COLOR="navy">Cascading Style Sheets </FONT></B></H3>

  • apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer).

  • et en bleu sous un browser qui ne reconnaît pas les feuilles de style (par exemple Netscape 3.0).

Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture.

Top

Et s'il y a concurrence entre plusieurs éléments de style ?

En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.

La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :

  • dans un fichier externe avec l'extension css.
  • dans la balise HEAD du document.
  • dans le BODY du document.

La règle de priorité appliquée par le browser sera :

  • d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.

Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}. Nous en resterons là dans le cadre de ce tutorial.

HomeDown