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.

feuille de style externe

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.

Exemple : feuille de style interne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Feuille de style interne</title> <style> body { background: #000; color: #fff79f; } h2 { border-bottom: 3px solid; } p { text-align: center; } em { color: red; } .tel { margin: 2em auto; padding: 1em; width: 385px; } .tel img { border: 2px dashed; float: right; padding: 5px 5px 0; } .tel a { border-bottom: 2px dashed; color: #FFF79F; float: right; padding: 33px 35px 0 0; text-decoration: none; } .tel a:hover { color: #9ffeff; } </style> </head> <body> <h2>L'Arrière Des Etoiles</h2> <p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force !</strong></p> <p class="tel"> <img src="../exemples/img/yoda1.png"> <a href="#">Télécharger ce tutoriel tu dois.</a></p> </body> </html>

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.

Exemple : règle de style d'élément
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Règle de style d'élément</title> </head> <body style="background: #000; color: #fff79f;"> <h2 style=" border-bottom: 3px solid;"> L'Arrière Des Etoiles</h2> <p style="text-align: center;">Les CSS sont <strong> l'arme <em style="color: red;">secrète</em> de la Force !</strong></p> <p style="text-align: center; margin: 2em auto; padding: 1em; width: 385px;"> <img src="../exemples/img/yoda1.png" style="border: 2px dashed; float: right; padding: 5px 5px 0;"> <a href="#" style="border-bottom: 2px dashed; color: #FFF79F; float: right; padding: 33px 35px 0 0; text-decoration: none;"> Télécharger ce tutoriel tu dois.</a></p> </body> </html>

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.