Introduction

Tout langage possède une syntaxe et c'est la même chose pour le CSS. Il faut cependant avouer que la syntaxe du CSS est un peu particulière. Nous allons voir ensemble comment elle se forme.

La syntaxe

Pour écrire du CSS, nous allons créer des « règles » à partir d'un sélecteur et d'un bloc de déclaration entre accolades. Une règle s'écrit donc de cette manière : 

selecteur {}

Dans un bloc de déclaration, on va avoir des propriétés et des valeurs :

selecteur { http://localhost:8080/public/img/la-une/
/* Ce qui suit est une déclaration*/
propriete1 : valeur1; 
/* Et voici une autre déclaration dans le même sélecteur */
propriete2 : valeur2; 
}

• Le sélecteur
    Il s'écrit toujours au début d'une règle et il permet de sélectionner les éléments HTML sur lesquels la déclaration va s'appliquer. Cela sera par exemple « p » pour les paragraphes, « h1 » pour un titre de premier niveau, « img » pour une image, et cela peut aussi être une classe ou un id.
  
  
• La déclaration  
  Elle détermine les propriétés qui vont mettre en forme le sélecteur. 
  
  
• Les propriétés  
  On va écrire la propriété et on va ensuite écrire deux points.   Il s'agit de mettre en forme des éléments du HTML grâce à des propriétés CSS. On va pouvoir par exemple mettre de la couleur à un paragraphe, donner une dimension à un élément ou même l'animer, etc. Nous verrons ces propriétés en détail dans d'autres articles.
  
  
• La valeur
  À droite de la propriété, après les deux points, on a la valeur de la propriété. Cela sera les paramètres qui nous permettront de créer la mise en forme de notre sélecteur.

Il est aussi tout à fait possible d'écrire une règle sur une seule ligne grâce au point virgule qui permet de séparer les déclarations : 

selecteur {propriete1 : valeur1; propriete2 : valeur2;}

Pour le code sur plusieurs lignes, il y a une convention généralement admises qui veut que les déclarations soient indentées. Cette indentation est en principe de 2 ou de 4 espaces. Il faut cependant rester cohérent et cette indentation doit être la même dans tout le projet.

selecteur {     
/* Ce qui suit est une déclaration */
propriete1 : valeur1;
/* Et voici une autre déclaration dans le même sélecteur */
propriete2 : valeur2;
}

La syntaxe des commentaires

Comme vous avez pu le voir dans le code au-dessus, on écrit les commentaires comme ceci :

/* Voici un commentaire */

Et on peut aussi l'écrire sur plusieurs lignes :

/* Voici un commentaire 
sur plusieurs
lignes.
*/