En continuant, nous plongeons dans la syntaxe CSS de manière beaucoup plus détaillée, en examinant comment les propriétés et leurs valeurs forment des déclarations, des déclarations multiples forment des blocs de déclarations et les blocs de déclarations et les sélecteurs forment des règles CSS complètes. Nous complétons l'article en examinant d'autres caractéristiques syntaxiques CSS telles que les commentaires et les blancs.

Prérequis :

Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML) et une idée de Comment fonctionnent les CSS

Objectif : Apprendre ce que sont les CSS et comment elle opère au niveau basique.

Note : CSS est un langage déclaratif dont la syntaxe est plutôt facile et simple à comprendre. En plus, il y a un système de récupération d'erreurs très agréable qui tolère les erreurs sans rien casser — par exemple, les déclarations qui ne sont pas comprises sont généralement simplement ignorées. Le revers de la médaille est qu'il peut être plus difficile de comprendre l'origine des erreurs. Poursuivez la lecture et tout devrait devenir clair.

Un peu de vocabulaire

À leur niveau le plus bas, les CSS se fondent sur deux briques :

  • les propriétés : identifiants lisibles par tous définissant la caractéristique stylistique (par ex., police de caractères, largeur, couleur de fond) à modifier.
  • les valeurs : données à chaque propriété indiquée, elles définissent quelles modifications apporter aux caractèristiques stylistiques (par ex. , en quoi modifier la police, la largeur ou la couleur de fond).

Une propriété appairée à une valeur s'appelle une déclaration CSS. Les déclarations CSS sont placées dans des blocs de déclarations. Enfin, les blocs sont associés à des sélecteurs afin de créer des jeux de règles CSS (ou règles CSS).

Avant d'approfondir la théorie et les explications écrites, voyons un exemple concret (nous avons vu quelque chose de semblable dans l'article précédent).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon CSS expérimental</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Salut, ô Monde !</h1>
    <p>Ceci est mon premier exemple de CSS.</p>

    <ul>
      <li>Ceci est</li>
      <li>une liste</li>
    </ul>
  </body>
</html>

Et le fichier CSS :

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

La combinaison des deux donne le résultat suivant :

Regardons la syntaxe plus en détail.

Déclarations CSS

Définir des valeurs spécifiques, utilisées par des propriétés est un aspect clé du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chacun des éléments d'une page afin de pouvoir les placer et les mettre en forme correctement. Il est important de préciser ici, qu'en CSS, la casse (majuscule/minuscule) est importante. La propriété et la valeur dans chaque paire sont séparées par deux points (:).

Illustration d'une déclaration CSS

Il existe plus de 300 propriétés CSS différentes et quasiment une infinité de valeurs. Toutes les combinaisons propriété/valeur ne sont pas permise : chaque propriété définit un ensemble de valeurs qui peut lui être associé.

Important : Si une propriété est inconnue ou si une valeur est invalide pour une propriété donnée, la déclaration sera jugée invalide et sera alors complètement ignorée par le moteur CSS.

 Important : Pour les CSS (et autres standards du web), l'orthographe américaine a été retenue comme la norme à respecter en cas de doute. Par exemple, la couleur doit toujours être énoncée color. colour ne fonctionnera pas.

Apprentissage actif : repérez les déclarations

Dans l'exemple précédent, il y a cinq déclarations CSS séparées. Pouvez-vous reconnaître celle qui n'est pas valide (incorrecte ou erronée) et dire pourquoi elle est invalide ?

Blocs de déclarations CSS

Les déclarations sont groupées en blocs, chaque ensemble de déclarations étant mis entre accolades : une ouvrante ( { ) au début et une fermante ( } ) en fin de bloc.

Chaque déclaration contenue dans un bloc de déclarations est séparée des autres par un point-virgule ( ; ) ; à défaut, le code ne fonctionnera pas (ou donnera au minimum des résultats inattendus). La dernière déclaration d'un bloc peut ne pas être suivie d'un point virgule. Toutefois, il est considéré comme de bonne pratique de le mettre afin d'éviter un oubli lorsqu'on ajoute une nouvelle déclaration à un bloc.

Illustration d'un bloc de déclarations

Note : Les blocs peuvent être imbriqués ; dans ce cas, les accolades ouvrantes et fermantes doivent être imbriquées logiquement, de la même manière que les balises des éléments HTML. L'exemple le plus couramment rencontré est celui des @-rules, qui sont des blocs débutant par l'identifiant @ comme @media, @font-face, etc. (Voir Directives CSS plus bas).

Note : Un bloc de déclaration peut être vide — la chose est parfaitement valable.

Apprentissage actif : où sont les blocs de déclarations ?

Dans l'exemple précédent, avez-vous pu identifier les trois blocs de déclarations séparés ?

Sélecteurs et règles CSS

Il nous manque une partie du puzzle — nous devons traiter comment dire à quels éléments seront appliqués nos blocs de déclaration. Cela se fait en préfixant chaque bloc de déclaration par un sélecteur — un motif qui établit une correspondance avec certains éléments de la page. Les déclarations associées ne s'appliqueront qu'à ces éléments. Le sélecteur plus le bloc de déclaration s'appelle un ensemble de règles, ou souvent plus simplement une règle.

Illustration d'un ensemble de règles

 

Les sélecteurs peuvent devenir très compliqués — vous pouvez faire correspondre une règle à plusieurs éléments en incluant plusieurs sélecteurs séparés par des virgules (un groupe) et les sélecteurs peuvent être chaînés ensemble, par exemple Je veux sélectionner tout élément avec une classe de « blah », mais seulement s'il est à l'intérieur d'un élément <article> et seulement pendant le pointeur de la souris passe dessus. Ne vous inquiétez pas — les choses deviendront plus claires à mesure que vous aurez acquis de l'expérience à propos des CSS. Nous expliquerons les sélecteurs en détail dans le prochain article, Les sélecteurs.

Un élément peut être mis en correspondance avec plusieurs sélecteurs, donc plusieurs règles peuvent définir une propriété donnée plusieurs fois. CSS définit lequel prend le pas sur les autres et doit être appliqué : c'est ce qu'on appelle l'algorithme en cascade ; vous en apprendrez plus sur son fonctionnement dans Cascade et héritage.

 

Important : Si un seul sélecteur de base dans une chaîne ou un groupe est invalide, comme ce serait le cas en utilisant un pseudo‑élément ou une pseudo‑classe, le groupe de sélecteurs est toujours valide, excepté pour le sélecteur non valide qui sera ignoré.

Apprentissage actif : repérez les groupes de sélecteurs

Dans l'exemple utilisé avant, avez-vous pu identifier la règle qui s'applique à deux types d'éléments différents ?

Instructions CSS

Les règles CSS sont le matériau de base des feuilles de style — elle sont les entités les plus courantes que vous verrez dans les CSS. Mais il y existe d'autres types d'entités que vous rencontrerez à l'occasion — les règles CSS sont un des types désignés sous le vocable Instructions CSS. Les autres types d'instructions sont les suivants :

  • Les règles-@ (at-rules) sont utilisées pour transporter des métadonnées, des informations conditionnelles ou autres descriptions. Elles commencent par le symbole @, suivi d'un identifiant pour préciser le type de règle, puis un bloc syntaxique de quelconque sorte terminé par un point‑virgule (;). Chaque type de règle-@, défini par l'identifiant, peut avoir sa propre syntaxe et sa propre sémantique. Par exemple, nous avons : Exemple de syntaxe spécifique :
    @import 'custom.css';

    Cette règle-@ importe un autre fichier de CSS dans les CSS actuelles.

  • Les Instructions imbriquées sont un sous-ensemble particulier de règles-@, dont la syntaxe est un bloc de règles CSS imbriquées qui ne sont appliquées au document que si des conditions particulières sont rencontrées :
    • le contenu de la règle-@  @media n'est appliqué que si l'appareil sur lequel est le navigateur correspond à la condition exprimée ;
    • le contenu de la règle-@ @supports n'est appliqué que si le navigateur prend effectivement en charge la fonctionnalité testée ;
    • le contenu de la règle-@ @document n'est appliquée que si la page en cours respecte certaines conditions.
    Exemple de syntaxe spécifique :
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    L'instruction imbriquée ci-dessus n'applique la règle imbriquée que si la largeur de la page dépasse 800 pixels.

Vous en apprendrez davantage sur certains types de règles-@ ou d'énoncés imbriqués aux endroits appropriés dans le cours.

Important : Toute instruction qui n'est pas un jeu de règles, une règle-@ ou une instruction imbriquée est invalide et donc ignorée.

Au-delà de la syntaxe : écrire du CSS lisible

Comme vous avez pu le voir, la syntaxe CSS n'est pas si complexe. Il s'agit simplement d'écrire des règles et si celles-ci sont incorrectes, elles seront ignorées. Cependant, même quand tout fonctionne correctement, il peut être judicieux de respecter certaines bonnes pratiques qui vous aideront à lire, utiliser et maintenir votre code CSS.

Blancs

Les blancs sont les espaces traditionnelles, les tabulations et les sauts de lignes. Vous pouvez ajouter des blancs dans votre feuille de style afin que celle-ci soit plus lisible.

De la même manière qu'avec le HTML, le navigateur a tendance à ignorer une grande partie de l'espace blanc à l'intérieur des CSS ; elle est juste là pour faciliter la lisibilité. Dans notre premier exemple ci-dessous, nous avons chaque déclaration (et début/fin de règle) sur sa propre ligne — c'est sans doute une bonne façon d'écrire les CSS, car elles seront ainsi faciles à maintenir et à comprendre :

body
  {
  font      : 1em/150% Helvetica, Arial, sans-serif;
  padding   : 1em;
  margin    : 0 auto;
  max-width : 33em;
  }

@media (min-width: 70em)
  {
  body
    {
    font-size: 130%;
    }
  }

h1 
  {
  font-size: 1.5em;
  }

div p,
#id:first-line
  {
  background-color: red;
  background-style: none
  }

div p
  {
  margin : 0;
  padding: 1em;
  }

div p + p
  {
  padding-top: 0;
  }

Vous pouvez écrire exactement le même CSS en enlevant  la plupart des espaces blancs — il serait fonctionnellement identique à l'exemple ci‑dessus, mais je suis sûr que vous conviendrez qu'il est un peu plus difficile à lire :

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

La disposition du code que vous choisissez relève généralement d'une préférence personnelle, bien que lorsque vous commencez à travailler en équipe, vous pouvez constaterez que l'équipe existante a son propre guide de style définissant les  conventions à suivre.

L'espace blanche à laquelle vous devez faire attention dans les CSS est l'espace entre propriété et valeur. Par exemple, ce qui suit est un CSS valide :

 

margin: 0 auto;
padding-left: 10px;

Mais ceci n'est pas valide :

margin: 0auto;
padding- left: 10px;

 

0auto n'est pas reconnu en tant que valeur valide pour la propriété margin (0 et auto sont deux valeurs séparées).  Le navigateur ne reconnaîtra pas non plus padding- comme une propriété valide. Ainsi, vous devez toujours séparer les valeurs distinctes les unes des autres par au moins une espace, mais garder les noms de propriété/valeurs sous forme d'une chaîne unique de caractères sans coupure.

 

 

Commentaires

 

Comme pour le HTML, nous vous inviton à commenter vos CSS. Cela facilite la compréhension du fonctionnement du code, à vous si vous y revenez plusieurs mois après, mais aussi aux autres. Les commentaires sont également utiles pour commenter temporairement certaines parties du code à des fins de test, par exemple si vous essayez de trouver quelle partie de votre code cause une erreur.

Les commentaires des CSS commencent par /* et se terminent par */.

/* On gère ici la mise en forme des éléments basiques */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /*  Prenons le cas particulier de la taille de police globale. Sur grand écran ou 
      fenêtre, nous augmentons la taille de la police pour une meilleure lisibilité */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* On gère ici les éléments spécifiques, imbriqués dans le DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

 

Condensation de propriétés

Certaines propriétés comme font, background, padding, border et margin sont appelées shorthand properties (propriétés condenseées) — car, elle autorisent de définir plusieurs propriétés sur une seule ligne ; on gagne du temps et le code est rendu plus clair dans le processus.

Par exemple, cette ligne :

/* en écriture condensée, la définition des remplissages et la marge, les valeurs
   sont appliquées dans l'ordre haut, droite, bas, gauche (en tournant dans le sens
   des aiguilles d'une montre). Il existe également d'autres types de condensats,
   par exemple deux valeurs, définissant par exemple le remplissage pour le haut/bas,
   puis gauche/droite. */
padding: 10px 15px 15px 5px;

est équivalente à tout ceci ::

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Alors que cette ligne :

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

équivaut à cet ensemble :

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

Nous ne viserons pas l'exhaustivité — vous trouverez de nombreux exemples plus loin dans le cours. Nous vous conseillons de consulter les noms des propriétés tolérant les condensats dans notre référence CSS pour en savoir plus.

Les prochaines étapes

A ce stade, vous devriez maintenant comprendre les bases de la syntaxe CSS nécessaire pour écrire une feuille de style fonctionnelle facile à maintenir dans le temps. Dans le prochain article, nous examinerons plus en détail les sélecteurs des CSS ; nous verrons ceux dont vous disposez et leur fonctionnement.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, Loliwe, marcagba, SphinxKnight
Dernière mise à jour par : Dralyab,