Selon l'endroit où elles sont définies, la portée des règles de style peut être :
- limitée à un endroit particulier de la page,
- étendue à toutes les occurrences des éléments dans une page
- étendue à toutes les occurrences des éléments dans un ensemble de pages.
Feuille de style externe
La méthode d'inclusion de règles de style dans du code HTML qui présente le plus d'avantages et qu'il faut donc toujours privilégier, consiste à écrire les règles de style dans un fichier séparé de celui du code HTML. On parle alors de feuille de style externe.
Les feuilles de style externes offrent une souplesse maximum car les mêmes styles pourrons être partagés par un nombre infini de pages HTML, garantissant ainsi une homogénéité parfaite du site, et une mise à jour extrêmement simple (une modification dans un seul fichier, un effet dans une multitude de pages).
Une feuille de style externe (ie fichier CSS) est un simple fichier texte (même format que les fichiers HTML).
Le fichier a l'extension .css.
Le fichier ne doit contenir que du code CSS, à l'exclusion de tout autre code (HTML, JavaScript, etc).
La liaison du fichier CSS avec la page HTML est faite dans l'en-tête de la page HTML avec l'élémentlink.
On peut bien sûr lier plusieurs fichiers CSS à une meêm page HTML. Il suffit d'utiliser
autant d'élémentlink
qu'il y a de fichiers à lier.
Par exemple cette page utilise 2 feuilles de styles qui sont liées
de la façon suivante :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Inclure des styles</title> <link href="../_local/codemirror.css" rel="stylesheet"> <link href="../_core/def.css" rel="stylesheet"> ...
Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille d'adopter les règles suivantes :
- les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
- utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
- n'utilisez jamais d'espaces.
Pour plus d'informations consultez 'Les liens' dans le tutoriel HTML
Feuille de style interne
Une feuille de style interne est une feuille de style CSS qui se trouve directement dans le code HTML d'une page .
Les règles de style sont écrites dans un élément HTML style.
L'inclusion d'une feuille de style directement dans le code HTML est bien plus limitée que la méthode de liaison d'une feuille de style externe car la portée de telles règles sera limitée à la page particulière dans laquelle elles sont définies.
Cette méthode est donc à choisir uniquement quand les règles de
styles sont très spécifiques et non ré-utilisées
par ailleurs.
Par exemple, dans ce tutoriel la 1ere page
utilise cette forme d'inclusion pour mettre en forme la partie
principale de la page qui est particulière et que l'on ne retrouve
dans aucune autre page.
On peut bien sûr utiliser une feuille de style dans un fichier externe lié avec link et en même temps une feuille de style interne définie dans style.
Règle de style locale
Une règle de style locale est une règle de style qui se trouve à l'intérieur du tag d'ouverture d'un élément HTML .
La règle est introduite dans l'élément avec l'attribut style
(à ne pas confondre avec l'élément style.
L'exemple précédent pourrait être écrit de cette façon en utilisant des règles de style locales.
L'utilisation de règles de style locales est à éviter absolument
car il n'y a plus aucune séparation du contenu et de la forme.
La maintenance d'une telle forme de code est très difficile, et l'évolution de pages conçues de cette façon est
pratiquement impossible.