La règle de style finalement appliquée à un élément HTML a 3 origines possibles :

- le navigateur,
- l'utilisateur,
- l'auteur du code.

La façon dont sera choisie telle ou telle règle est un algorithme simple qui s'appelle la cascade.

### Trois origines possibles

#### La feuille de style navigateur

Chaque navigateur (agent utilisateur dans le vocabuliare du W3C) applique aux pages HTML un ensemble de styles par défaut.

Ces styles par défaut se trouvent soit dans des fichiers externes soit directement dans le moteur de rendu du navigateur.
Par exemple, suivant les versions, la feuilles de style par défaut de Firefox sera visible dans ce navigateur avec l'URL `chrome://browser/content/browser.css`.
Pour webkit, on a la description dans le site des sources du moteur.
Le site iecss fournit les feuilles de style par défaut de certaines versions d'Internet Explorer.

Ces style par défaut doivent permettre que n'importe quelle page HTML soit correctement affichée quelque soit l'absence de styles fournis par l'auteur de la page.
Ils doivent garantir "l'interprétation conventionnelle" des éléments HTML :

- cacher les éléments situés dans la partie head
- afficher différemment les éléments blocs et les éléments en ligne
- afficher correctement des listes
- afficher des tableaux avec des colonnes

#### La feuille de style utilisateur

Pour plus de confort, ou pour une meilleure accessibilité en cas de handicap, le navigateur donne la possibilité à l'utilisateur de configurer certaines options de rendu et d'affichage. L'accès à cette configuration se fait par menu (Options->Option->Contenu dans Firefox, Paramètres->Afficher les paramètres avancés dans Chrome, Outils->Options Internet->Général dans Internet Explorer).

Les possibilités de définition sont généralement limitées aux

- couleurs et images de fond,
- couleurs des textes,
- polices de caractères préférérées et tailles par défaut
- apparences des liens (couleur, soulignement),
- affichage des images.

L'utilisateur peut toutefois aller plus loin en demandant au navigateur d'utiliser une feuille de style qu'il aurait spécifiquement écrite.
Dans ce domaine c'est Internet Explorer qui est le plus simple car il propose directement dans ses options (Général->Accessibilité) de télécharger la feuille de style à utiliser.
Avec Chrome et Firefox on peut placer un fichier appelé respectivement `Custom.css` et `userContent.css` dans les dossiers d'applications des navigateurs.

#### La feuille de style auteur

La feuille de style auteur est la feuille de style que nous écrivons en tant qu'auteur de la page HTML et qui sera attachée au fichier HTML avec l'élément link ou incluse dans le code HTML avec l'élément style.
C'est celle que nous étudions tout au long de ce tutoriel.

La feuille de style auteur permet de définir le style de n'importe quel élément que nous avons placé dans notre code et de spécifier des valeurs pour le rendu et l'affichage de cet élément.

### La cascade

Que se passe-t-il quand nous avons défini des styles pour un élement alors que des styles différents ont été définis par la feuille de style navigateur et/ou par la feuille de style utilisateur.
Comment le navigateur va-t-il choisir la règle à appliquer finalement à l'élément ?

L'algorithme de choix du navigateur est très simple et s'appelle la cascade.

la cascade

Pour chaque déclaration de style de chaque élément HTML de la page, le navigateur fait les choix suivants :

- si la déclaration est définie par l'utilisateur avec le mot-clé `!important` elle est utilisée (les options de configuration tombent dans ce cas)
- sinon si la déclaration est définie par l'auteur, elle est utilisée,
- sinon si la déclaration est définie par l'utilisateur, elle est utilisée,
- sinon c'est la déclaration définie par le navigateur qui est utilisée.

La cascade est la 1ère étape du choix d'une règle. Il peut arriver que 2 règles de même origine entre en concurrence. On complétera alors la 1ère étape avec une seconde : la détermination du poids d'une règle en fonction de ses sélecteurs ( Sélectionner des éléments -> Spécificité des sélecteurs)

Le principe de la cascade a une influence certaine sur les couleurs et polices de caractères utilisées pour le rendu des pages puisque l'utilisateur y a accès facilement dans les options de configuration de son navigateur, et qu'elles auront priorité sur celles que nous avons choisis. Il est donc important de ne jamais "calculer" et bâtir une mise en page en fonction d'une police particulière et/ou dans une taile particulière car rien ne garantit que la page sera rendue avec les valeurs que nous avons défini.

Prenons l'exemple des lien. Dans les navigateurs, ils sont définis comme :

    a {
    	display: inline;
    	color: blue;
    	text-decoration: underline;
    }

L'utilisateur a modifié les préférences de son navigateur pour avoir le rouge comme couleur des liens et qu'ils soient toujours soulignés. On obtient la règle de style utilisateur suivante :

    a {
    	color: red !important;
    	text-decoration: underline !important;
    }

L'auteur a défini les liens ainsi :

    a {
    	color: black;
    	text-decoration: none;
    	background: yellow;
    }

La règle de style pour les liens sera finalement :

    a {
    	display: inline;	/* navigateur */
    	color: red;			/* utilisateur */
    	text-decoration: underline;	/* utilisateur */
    	background: yellow;	/* auteur */
    }

### Eviter les différences des navigateurs

Bien que le W3C fournisse une feuille de style d'exemple rien n'est standardisé dans une représentation par défaut des éléments HTML.
Les navigateurs ont tous des différences (qui se réduissent mais subsistent) dans les déclarations de style qui régissent le rendu de tel ou tel élément. Les principales différences concernent les marges intérieures et extérieures, la taille ou la graisse de certains éléments textuels ou de titrage et les affichages des zones de formulaires.

Pour pallier ces différences de rendu entre les navigateurs, les auteurs de page ont le choix entre 2 techniques : le reset CSS et la normalisation

#### Reset CSS

Dans sa forme la plus simple, le reset CSS remet à zéro les marges internes et externes de pratiquement tous les éléments HTML et garanti la transmission de la taille de la police de caractères. Les plus connus sont celui de Eric Meyer et celui de Yahoo.

L'utilisation d'un reset CSS oblige l'auteur à redéfinir les marges des éléments blocs et les tailles différentes de police pour les éléments de titrage. C'est généralement très facile avec par exemple :

    p, h1, h2, h3, h4, h5, h6 {
    	margin: 1em 0;
    }
    h1 {
    	font-size: 2em; /*taille suivant convenance*/
    }
    h2 {
    	font-size: 1.8em;  /*taille suivant convenance*/
    }
    h3 {
    	font-size: 1.6em;  /*taille suivant convenance*/
    }

#### Normalisation

La normalisation corrige les différences sur les éléments qui en ont besoin. Elle nécessite une connaissance en profondeur de tous les comportements de toutes les versions de tous les navigateurs. La mise à jour n'est pas aisée et l'auteur doit suivre chaque nouvelle version pour être sans cess à jour.

La feuille de style de normalisation la plus connue et la plus utilisée est celle de Nicolas Gallagher. La lecture de cette feuille de style est intéressante pour se rendre compte des différences de rendus, d'autant plus que chaque correction est expliquée.