html-css

  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). Ce fichier pourra être utilisé par toutes les pages du site, ce qui garanti 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 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.

La balise <style> placée dans la section head de la page 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 ce n'est pas une bonne pratique.

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 par le standard 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 et 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 selectors, 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. Pour consulter les règles de priorité détaillées, reportez vous à la page Les règles de priorité.

De la priorité la plus forte à priorité la moins forte :

• Les styles définis directement dans la balise avec l'attribut style sont prioritaires.
• 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.

Enfin, lorsque deux règles sont définies au même endroit et se contredisent, la priorité revient à celle qui a le sélecteur le plus précis. Par exemple : p.edito est prioritaire sur p.

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

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-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.

A titre d'exemple, cliquez pour visualiser un document XML brut (non formaté) et le même document formaté par des styles CSS. C'est rigoureusement le même document mais les styles ont fait disparaître les informations non souhaitées, et mis en forme les autres.