Associer HTML et CSS - Tutoriel

Associer une feuille de styles à une page HTML.

La meilleure pratique consiste à écrire les styles CSS dans un document séparé (un fichier qui a le plus souvent l'extension css) et qu'on nomme une feuille de styles. Ce fichier pourra être utilisé par toutes les pages du site, ce qui garantit une mise en forme homogène de tout le site.

Bien entendu, s'il est nécessaire de prévoir plusieurs mise en page pour différentes parties du site, il est tout à fait possible d'écrire plusieurs feuilles de styles.

Pour établir le lien entre les pages HTML et les styles, il suffit d'ajouter la balise suivante dans la section head de toutes les pages :

<link rel="stylesheet" href="toto.css" type="text/css" >

Dans cet exemple, toto.css est le nom (éventuellement l'url) de la feuille de styles.
L'attribut rel="stylesheet" est obligatoire.
L'extension du fichier contenant les styles n'est pas significative mais on choisit souvent .css (on se demande pourquoi).
La plupart des navigateurs reconnaissent la balise link même si elle est placée dans le body mais ce n'est pas une bonne pratique.
Plusieurs balises <link> peuvent se suivre, ce qui permet d'associer plusieurs feuilles de styles à la page.

Cette solution pour associer des styles à la page est de loin la meilleure car elle assure une séparation complète entre la page HTML et les styles CSS. Elle permet de plus d'attribuer les mêmes styles à toutes ou certaines des pages du site.

Écrire les styles dans la page.

Une balise <style> placée dans le code de la page HTML permet de définir des styles qui bien sûr ne seront valables que pour cette page uniquement. Les navigateurs reconnaissent la balise style également dans le body mais il est préférable d'inclure cette balise dans la section head.


	style
	   h1 {color:blue;}
	/style

L'attribut type="text/css" peut être ajouté à la balise mais n'est vraiment nécessaire que pour des styles qui ne seraient pas écrits en CSS.
Cette solution peut être mixée avec la précédente. En cas de conflit entre un style défini dans un document séparé et un style écrit dans la page, les règles de priorité ont été clairement définies dans la spécification du W3C.

Écrire les styles dans la page doit rester quelque chose d'exceptionnel car on perd la séparation entre le HTML et les CSS. Le volume de la page sera donc augmenté d'autant. De plus, ces styles ne seront pas utilisables sur une autre page.

Écrire des styles dans une balise.

Toutes les balises disposent d'un attribut style="..." qui permet d'affecter un style à cette balise en particulier.

p style="color:blue;"

L'écriture de styles dans les balises doit rester exceptionnelle. En connaissant bien les sélecteurs CSS, il est tout à fait possible d'appliquer des styles à UNE balise particulière dans UNE page particulière.

On note une petite différence de syntaxe : il n'est plus nécessaire de préciser de sélecteur, puisque le style s'applique là où il est écrit.

Les styles décrits dans la balise sont prioritaires par rapport aux styles décrits dans la page et bien sûr par rapport aux styles décrits dans un document séparé.

Les priorités.

Voici comment sont gérées les priorités lorsqu'il y a conflit entre deux styles ou entre un style et un attribut HTML :

Les styles définis directement dans la balise HTML avec l'attribut style sont prioritaires.
Viennent ensuite les styles définis dans la page et/ou dans une feuille de styles externe.
Enfin, en dernier viennent les attributs ou balises HTML. Les styles CSS prennent toujours la priorité sur les attributs ou balises HTML, qui d'ailleurs ne devraient plus être utilisés pour la mise en forme.

Lorsqu'il y a conflit entre plusieurs styles CSS entre eux, les règles de priorité sont clairement définies par le W3C. En gros, plus un sélecteur est précis, plus sa priorité est grande : un sélecteur par identifiant id (qui ne peut cibler qu'un seul élément), sera prioritaire sur un sélecteur par classe, qui peut lui cibler plusieurs éléments.

Dans le cas où les sélecteurs ont des précisions identiques, c'est la règle qui vient en dernier qui est prioritaire.

Pour approfondir ce sujet, reportez-vous au tutoriel sur les règles de priorité.

Associer un document XML et des styles CSS.

Ceci déborde un peu le cadre d'un tutoriel d'initiation, mais puisqu'il s'agit juste d'indiquer une syntaxe...
Pour associer une feuille de styles à un document XML, ajoutez simplement la ligne suivante au début de votre document XML, juste après la déclaration habituelle ?xml ... ?.

?xml version="1.0" encoding="UTF-8" ? ?xml-stylesheet href="toto.css" type="text/css" ?

toto.css est bien sûr le nom de la feuille de styles. Vous pouvez préciser une url à la place du nom.