La syntaxe d'une règle CSS

Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Il a pour rôle d'indiquer au navigateur ce qui doit être mis en forme. Vous allez indiquer le ou les éléments (X)HTML auxquels une règle CSS va s'appliquer.

div {
        border :           1px solid blue;
        padding :          10px;
        color :            white;
        background-color : gray;
}
p.paragraphe {
        font-size :        1.6em;
        color :            red;
}

Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>.
La seconde règle déclare une taille de texte et la couleur rouge pour tous les paragraphes (balises <p> ) possédant l'attribut class avec la valeur 'paragraphe'.

Consultez l'exemple 01 sur le principe des sélecteurs dans une règle CSS.

Je détaillerai l'ensemble des sélecteurs disponibles dans le langage CSS dans un prochain article.

Les déclarations sont placées à la suite du sélecteur, entre des accolades. L'ensemble des déclarations d'une règle est appelé "bloc de déclaration".

Un bloc de déclaration est composé d'une ou plusieurs déclarations. Chaque déclaration est constituée de deux éléments : une propriété et une valeur.

sélecteur {
        propriété :        valeur;
        propriété :        valeur;
}

La propriété est un mot clé CSS permettant de modifier un point précis au niveau du rendu des éléments (X)HTML ciblés par le sélecteur. Par exemple les marges avec le mot clé margin, ou la taille du texte avec le mot clé font-size...

La valeur permet de spécifier une valeur différente que celle appliquée par défaut à la propriété en question.

Voici un exemple concret :

#contenu {
        position :         relative;
        top :              10px;
        left :             100px;
        width :            70%;
        border :           2px dashed #000000;
        padding :          12px;
        font-size :        1.2em;
        font-weight :      bold;
        background :       url('../images/logo.gif') no-repeat center;
        color :            rgb(125,200,100);
}

Consultez l'exemple 02 sur le principe des déclarations dans une règle CSS.

Vous voyez là aussi que toutes les déclarations sont fondées sur le même modèle : une propriété suivie de deux-points, lui-même suivi d'une valeur (composée d'un ou plusieurs éléments) et se terminant par un point-virgule.
Le point-virgule de fin est optionnel pour la dernière déclaration ; mais là encore il est conseillé de l'indiquer tout de même pour des questions de lisibilité et de maintenance du code.

Le W3C a introduit une nomenclature pour décrire la manière dont les valeurs des propriétés doivent être déclarées. Cette nomenclature vous servira tout au long de ce cours, et plus encore si vous voulez vous plonger dans les spécifications du W3C.

C'est cette nomenclature que nous allons voir maintenant en prenant quelques exemples de propriétés raccourcies.

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [/ <'line-height'> ]? <'font-family'>

<marge-largeur>{1,4} | inherit

Ces exemples nécessitent les explications suivantes :

• les crochets [ ] servent aux regroupements ;
• une barre | distingue deux ou plusieurs options : seule l'une d'entre elles doit survenir ;
• une barre double || distingue également deux ou plusieurs options, à la différence que l'une de ces options doit survenir et plusieurs peuvent survenir quel que soit leur ordre ;
• plusieurs mots juxtaposés signifient que tous doivent survenir dans l'ordre donné.

Il existe aussi des modificateurs :

• un point d'interrogation (?) signifie que ce qui le précède est optionnel ;
• un astérisque (*) signifie que ce qui le précède peut survenir de zéro à plusieurs fois ;
• un plus (+) signifie que ce qui le précède survient une ou plusieurs fois ;
• une paire de nombre entre accolades {A,B} signifie que ce qui précède survient au moins A fois et au plus B fois.

Pour bien comprendre ce système nous allons décortiquer la propriété raccourcie font qui va permettre de remplacer les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family.

Après ces explications nous pouvons traduire la ligne ci-dessous :

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?

Ceci signifie que ces trois propriétés sont regroupées (du fait des caractères '[ ]'), elles sont facultatives (du fait du caractère '?') et elles ne doivent pas forcément survenir toutes les trois ensemble (du fait des caractères '||') : soit on en indique une, soit deux, soit les trois et ceci dans l'ordre désiré.

<'font-size'>

Il faut ensuite indiquer font-size, c'est-à-dire la taille de la police, qui est obligatoire du fait de l'absence du caractère '?'.

[/ <'line-height'> ]?

Cette partie n'est pas obligatoire en raison de la présence du point d'interrogation, mais si nous l'indiquons, il faut séparer la valeur de font-size et celle de line-height avec la barre oblique (présence du caractère '/' entre les crochets et avant la propriété line-height).

<'font-family'>

Enfin la propriété font-family est obligatoire du fait de l'absence du point d'interrogation.

En résumé, seul font-size et font-family sont obligatoires. Pour les autres valeurs que vous avez omises, elles conservent leur valeur initiale.

p#exemple {
        font-family :      Arial, Verdana, sans-serif;
        font-size :        1.2em;
        font-weight :      bold;
        font-style :       italic;
        font-variant :     normal;
        line-height :      1.5em;
}

Cet exemple se réduira à ceci en utilisant les propriétés abrégées :

p#exemple {
        font :             italic bold 1.2em/1.5em Arial, Verdana, sans-serif;
}

Vous remarquerez que la propriété font-variant, qui a la valeur 'normal' dans le premier exemple, n'est pas présente dans la propriété raccourcie et ce pour la simple raison qu'elle a la valeur par défaut. Dans ce cas il n'est pas nécessaire de spécifier explicitement la valeur par défaut : une propriété absente dans la propriété raccourcie prend automatiquement sa valeur par défaut. Et cette valeur par défaut trouvera à s'appliquer même si une valeur contraire est appliquée à l'élément via l'héritage.

Voir l'exemple 07 sur les propriétés raccourcies : exemples avec la propriété font.

D'autres propriétés raccourcies s'appliquent directement aux boîtes que vont créer les balises (X)HTML. Elles sont particulières dans le sens où les propriétés peuvent avoir jusqu'à quatre valeurs différentes s'appliquant aux quatre côtés de ces boîtes. Il faut donc expliquer comment vont se répartir ces valeurs entre les quatre côtés.

Cela concerne les propriétés raccourcies margin, padding, ainsi que border-width, border-style et border-color.

Ces propriétés acceptent de une à quatre valeurs :

• pour la propriété margin : ce sont les propriétés margin-top, margin-left, margin-bottom et margin-right ;
• pour la propriété padding : ce sont les propriétés padding-top, padding-left, padding-bottom et padding-right ;
• pour la propriété border-color : ce sont des valeurs de couleur ou la valeur transparent (de une à quatre valeurs) ;
• pour la propriété border-style : ce sont des valeurs de style (de une à quatre valeurs) ;
• pour la propriété border-width : ce sont des valeurs d'épaisseur (de une à quatre valeurs).

Les valeurs sont spécifiées dans l'ordre horaire en partant de midi. Vous pouvez vous référer à la liste ci-dessus indiquant les propriétés qui sont regroupées dans la propriété raccourcie : on indique d'abord la valeur s'appliquant à 'top' (haut), puis 'right' (droite), puis 'bottom' (bas) et enfin 'left' (gauche).

Prenons l'exemple de la propriété border-color parce qu'elle permet de très bien distinguer les côtés en fonction des couleurs appliquées :

div {
        border-color :     red blue green yellow;
}

Si vous indiquez quatre valeurs : la première vaut pour le haut, la seconde pour la droite, la troisième pour le bas et la quatrième pour la gauche.

div {
        border-color :     red blue green;
}

Si vous indiquez trois valeurs : la première vaut pour le haut, la seconde pour la droite et la gauche, la troisième vaut pour le bas.

div {
        border-color :     red blue;
}

Si vous indiquez deux valeurs : la première vaut pour le haut et le bas, la seconde pour la droite et la gauche.

div {
        border-color :     red;
}

Si vous indiquez une valeur : elle vaut pour les quatre côtés.

Consultez l'exemple 08 sur les propriétés raccourcies s'appliquant aux bordures des boîtes.

Cette répartition dans le sens des aiguilles d'une montre ne concerne pas seulement la propriété border-color, mais s'applique à l'ensemble des propriétés listées ci-dessus : margin, padding, ainsi que border-width, border-style et bien sûr border-color.

La règle @import permet, en lieu et place de la balise <link>, de lier des feuilles de style à un document (X)HTML. Elle peut tout autant être insérée dans le fichier (X)HTML que dans un fichier CSS.

Cette règle sera étudiée dans le prochain article.

La règle @media permet d'appliquer un ensemble de règles en fonction du type d'agent utilisateur qui va afficher la page. Ce peut être un navigateur (média 'screen'), l'impression de la page web (média 'print'), un synthétiseur vocal (média 'speech')...

Ainsi dans l'exemple suivant, toutes les règles déclarées à l'intérieur de la règle @media ne vont s'appliquer que si vous imprimez la page :

@media print {
        #menu {
                display :      none;
                border :       0 none;
        }
        p {
                background-color : none;
        }
}

La règle @charset permet de déclarer le codage qui est utilisé dans le fichier CSS extérieur. Précisez le au début du fichier CSS externe et de la manière suivante :

@charset "UTF-8";

/* Les différentes déclarations CSS */

@charset "ISO-8859-15";

/* Les différentes déclarations CSS */

Cette règle ne doit s'appliquer qu'aux fichiers CSS externes et non aux règles intégrées dans un fichier (X)HTML car elle est inutile dans ce cas (les navigateurs Safari et Google Chrome peuvent même rencontrer des soucis dans ce cas d'utilisation). Vous ne pourrez indiquer qu'une seule règle @charset par fichier CSS.

De même que la règle @import, cette règle at-rule doit être la première du document. Il ne doit y avoir ni ligne, ni aucun caractère avant, cela inclut également les commentaires qui sont donc également interdits.

Vous pouvez retrouver la liste des codages autorisés ici : liste des codages autorisésliste des codages autorisés par l'IANA.

La règle @font-face permet d'afficher une police originale sur votre site Internet. En principe pour que la police que vous avez choisie grâce à la propriété font-family s'affiche effectivement, il faut qu'elle soit présente sur l'ordinateur du visiteur.

Pour mettre un terme à cette limitation nous avons à notre disposition la règle at-rule @font-face, qui permet d'appeler une police que vous aurez au préalable placée sur le serveur et qui sera téléchargée sur le poste local (mise en cache).

@font-face {
        font-family :      nom-dappel;
        src :              url(nom-police-sur-le-serveur.eot);
}

/* appel à cette police pour les paragraphes : */
p {
        font-family :      nom-dappel;
}

La propriété font-family, dans le cadre de la règle @font-face, sert à attribuer un nom quelconque à la police. Ce nom servira dans le document pour faire appel à cette police, comme vous le montre l'exemple ci-dessus dans la règle s'appliquant au paragraphe. La propriété src sert à indiquer le chemin vers le fichier de police se trouvant sur le serveur.

La règle @page est destinée aux médias paginés, et permet donc d'appliquer un style spécifique aux pages Web en mode impression. Dans cette configuration le modèle de mise en forme visuel est quelque peu modifié par la création d'un nouveau modèle de boîte : la boîte de page. Ce nouveau modèle de boîte permet de gérer les différents aspects spécifiques à une page qui sont de pouvoir déterminer la taille de la page, ses marges, les sauts de page...

@page {
        size :             16cm 20cm;
        margin :           1cm;
}