Syntaxe des feuilles de style

Présentation

Le principe et le but des CSS (Cascading Style Sheet) est de séparer le contenu et la présentation du document. La présentation est décrite dans la feuille de style qui est un fichier séparé ou imbriquée dans la balise <style>. Elle définit l'agencement, les polices de caractères, les couleurs, etc., pour des éléments donnés d'une page HTML ou d'un document XML. Ce document est un très court résumé de la spécification standard CSS 2.0 par le W3C.
CSS et HTML sont insensibles à la casse, XML ne l'est pas.

Composantes de base

Une feuille de style est un ensemble de règles. Chacune comprend un sélecteur et un descripteur.
L'ensemble de règles peut débuter par des règles-at comme par exemple @import.
Le sélecteur est le nom d'une balise et le descripteur est une liste de propriétés encloses entre crochets qui définissent la présentation pour cette balise.
Il est possible d'associer plusieurs sélecteurs, séparés par une virgule, avec le même descripteur (voir à "Partage d'un descripteur" plus loin).

Sélecteur

C'est le nom d'un élément de la page Web (ou du document XML) auquel vous voulez donner des propriétés d'affichage:

Voir l'article détaillé: Sélecteurs en CSS 2 et 3.

Descripteur

Le descripteur est une liste de déclarations qui associent par un double-point un attribut et sa valeur.

h2
{
  font-size:120%;
  color:blue;
} 
Partage d'un descripteur:
h2, h3
{
  color:green;
}

Certaines propriétés comportent plusieurs valeurs:

.title
{
  border: 2px solid black;
} 

Inclure le style dans le document

Dans la section head de la page HTML:

On peut placer les règles dans une balise style:

<style type="text/css">
...règles...
</style>

ou utiliser un lien (le document est un simple fichier de texte contenant l'ensemble des règles ou règles-at):

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

Comme propriété d'une balise

Exemple:

<table style="color:blue;">

Import

La command import est une règle-at, elle peut se trouver au début d'une feuille de style:

@import "monstyle.css"; 

Document XML

La première ligne du document inclut la feuille de style par une instruction procédurale (en fait cela dépend du parseur XML et du programme de rendu):

<?xml:stylesheet type="text/css" href="exemple.css" ?> 

Taille

La taille peut être exprimée selon diverses notations:

Couleur

Les codes de couleurs sont exprimés en codes RGB, en valeur hexadécimales ou décimales.

Compatibilité

On peut améliorer la compatibilité entre navigateurs en déclarant ces doctypes sur la première ligne de la page HTML:

<?DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"> 
or:
<?DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"> 

Références

© 2006-2012 Xul.fr