http://www.haizea.fr/--> Cours HTML : Les bases du CSS

Cascading Style Sheets
Feuilles de Style en Cascade

Petit historique et version

La version actuelle du CSS est la version 2. Le CSS a été inventé après le HTML car ceui ci ne répondait pas à la demande croissante en design des documents HTML. Avant le CSS, les designers étaient obligés d'utiliser des attributs HTML qui rendaient difficiles la lecture et la mise à jour des documents qui contenaient alors du code concernant le contenu et du code concernant le design.

Aujourd'hui, le design d'un site se fait en externalisant le code CSS, (ce n'est pas du HTML) dans des fichiers distincts des documents HTML. La mise à jour du design d'un site ou du contenu est maintenant plus facile et le même design (le même fichier) peut être partagé par plusieurs documents HTML.
Les attributs html qui permettaient de faire du design sont maintenant pour la grande majorité déconseillés voire obsolètes.

Principes de fonctionnement

Dans notre contexte, nous utiliserons uniquement le principe de la feuille de style externalisée. Cela veut dire :

Votre document HTML doit faire référence à la feuille de style, pour que le navigateur puisse faire la mise en page.
Votre ou vos fichiers CSS doivent être disponibles sur le Web, généralement sur le même site.

1. L'élément link

L'élément link permet à un document HTML de faire référence à un fichier externe.Il se place exclusivement dans l'élément head du document. Il ne possède pas de balise fermante. Il nécessite 4 attributs :

L'attribut rel (relation): Cet attribut spécifie la relation entre le document courant et le fichier externe.
Le mot clé stylesheet sera utilisé dans le cas d'un fichier CSS.
L'attribut type: Cet attribut spécifie le type mime du fichier à lier. Il s'agit de text/css.
L'attribut media: Cet attribut spécifie le média destiné à lire ou à interpréter le document HTML. Il peut s'agir de l'écran d'un téléphone portable, d'un périphérique braille ou auditif CSS est capable de faire du design sonore ), etc. Dans notre cas, (l'écran d'un ordinateur), nous utiliserons le mot clé screen.
L'attribut href: Comme pour les ancres de destination, cet attribut spécifie l'adresse du fichier externe. Il est possible d'utiliser bien évidemment des liens relatifs comme absolus.

A titre d'exemple, regardez le code source de cette page :

2. La cascade

Il est possible de lier plusieurs fichiers CSS à un seul et même document HTML; Cela nécessitera autant d'éléments link que de fichiers à lier.

Cela peut servir à différents objectifs comme par exemple, d'avoir sur un fichier un style principal et sur un autre un style temporaire. Pour éviter d'avoir à modifier votre style principal lors de la mise en place du style temporaire et lors de son annulation, on spécifie les propriétés de style que l'on souhaite modifier par rapport au style principal, ou que l'on souhaite rajouter. Il n'est pas nécessaire de retaper le code du style principal, le style temporaire vient s'ajouter en cascade, c'est à dire après le premier style.

Le principe de la cascade permet le conflit entre propriétés. Par exemple, si vous spécifiez une même propriété de design dans le style principal et dans le style temporaire, le navigateur tiendra compte de la propriété contenue dans la dernière feuille de style liée au document HTML. L'ordre des éléments link> est important et il peut ainsi y avoir plusieurs feuilles de styles liées à un seul document. Généralement le design entier d'un site entier se fera dans une seule feuille de style.
Regardez le code source pour un exemple de conflit sur la propriété background-color qui spécifie la couleur du fond de l'élément body, et color qui spécifie la couleur du texte contenu dans le body --> conflit entre la première feuille de style et la seconde : chacune des feuilles spécifie les deux propriétés, seules les propriétés de la seconde sont prises en compte dans l'interprétation de la page par le navigateur).

Documentation et validation

La documentation du W3C traduite en français concernant le CSS se trouve sur le site de yoyodesign.

Le code CSS peut être validé. Pour cela, validez toujours le HTML en premier, puis en bas de la page du validateur, cliquez sur check it lorsqu'il est question de valider votre CSS.