Tutorial CSS

Introduction.

Syntaxe.

Association à HTML.

Héritage.

Médias.

Association de styles CSS une page HTML.

Feuille de styles externe.

Tous vos styles ont t crits dans un document part (qui souvent l'extension css, on se demande pourquoi). Il suffit d'ajouter une balise <link> dans la section <head> de chacune de vos pages HTML :

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

Feuille de styles interne.

Certaines pages particulires de votre site doivent peut-tre avoir une mise en forme diffrente (page d'accueil, menus du site, etc). Dans ce cas, vous pouvez dfinir les styles dans la section <head> de la page elle mme en utilisant une paire de balises <style> et </style>.

<style type="text/css">
        P {Background-Color: Blue; }
        H1 {Color: Blue; Font-Size: 12pt }
</style>

Les anciens navigateurs ne reconnaissent pas la balise <style> et affichent donc la description des styles sur la page, ce qui ne fait pas trs propre. Ce problme se produit de plus en plus rarement mais les puristes pourront le rsoudre en insrant le code CSS entre des commentaires HTML :

<style type="text/css">
<!--
        P {Background-Color: Blue; }
        H1 {Color: Blue; Font-Size: 12pt }
-->
</style>

Styles spcifiques une balise.

Enfin, vous pouvez aussi appliquer une mise en forme spciale un lment particulier de faon tout fait exceptionnelle, par exemple pour metttre en valeur une cellule d'un tableau. Utilisez pour cela l'attribut Style de la balise.

<TD Style="Background-Color:Blue">

Dans ce cas, vous noterez qu'il n'y a pas lieu d'enfermer les proprits entre des accolades puisqu'elles se rapportent ncessairement toutes la mme balise.

Priorit entre feuilles de styles.

Lorque plusieurs feuilles de styles dfinissemnt la mme proprit (et sur le mme slecteur) celle qui a la porte la plus faible est prioritaire. Autrement dit:

Pour toute utilisation des informations de cette page, reportez vous au copyright