Syntaxe des feuilles de style des pages Web

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:

• Type.
  Par exemple H1, A, P, PRE, etc...
• Identifieur.
  Eléments avec un attribut ID="". La syntaxe est:
  

  #identifieur

• Classe.
  Elément avec un attribut CLASS="". La syntaxe est:
  

  .nomclass

• Descendant (sous élément).
  C'est le style d'une balise seulement quand elle est imbriquée (directement ou non) à l'intérieur d'une autre balise donnée.
  Exemple pour un lien quand il est affiché à l'intérieur d'une table:
  

  table a

• Adjacent (successeur avec le même parent).
  Elément suivant immédiatement un autre élément désigned. Syntaxe: x + y
• Enfant.
  Elément inséré directement dans un autre, mais pas ses enfants. Syntaxe: body > p
• Balise ayant un attribut donné.
  

  Syntaxe: nombalise[attribut="valeur"]
  Exemple: table[width="100"]

• Le sélecteur universel.
  * correspond à tout élément de la page. Utilisé seul et non pas pour remplacer une partie d'une chaîne de caractère.
  

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:

• em: valeur réelle s'appliquant à la fonte elle-même.
• px: pixel, valeur entière pour l'écran ou autre périphérique.
• %: pourcentage de la valeur héritée (la valeur initiale peut être 100% et elle sera prise dans la configuration du navigateur).
• pt: point, c'est à dire 1/72 de pouce.
• mm: millimètre.

Couleur

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

• rgb: #ffffff - Trois valeurs hexadécimales pour les composantes rouge, vert, bleu de la couleur.
• rgb court: #fff - Les chiffres seront doublés.
• décimal: rgb(255,255,255)

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