Syntaxe CSS de base
Cours pour apprendre la syntaxe CSS de base
Une feuille de style contient la définition de différentes règles CSS. C'est en appliquant ces règles qu'on peut mettre en forme les éléments, ou plus concrètement leur donner du style. Une règle CSS est divisée en 2 parties :
- le sélecteur
- le bloc de déclaration
C'est le sélecteur qui détermine ou identifie les parties du document auxquelles sera appliqué le style. Il sert à sélectionner l'élément que l'on a envie de mettre en forme. Le bloc de déclaration, quant à lui, contient les déclarations des styles à appliquer. Il est toujours mis entre 2 accolades :
Code CSS :
body
{
color:red
}
Ici, body est le sélecteur alors que le bloc de déclaration est la zone délimitée par les accolades. Autrement dit, les styles définis entre accolades seront appliqués à la balise body.
Le bloc de déclaration CSS
Dans un bloc de déclaration, on liste tous les styles que l'on veut utiliser pour l'élément sélectionné. Ce bloc est composé de déclarations qui elles-mêmes contiennent une propriété et une valeur. La propriété correspond à l'attribut qu'on souhaite changer. A chaque propriété peut être affectée une valeur. Une propriété et une valeur sont toujours séparées par le symbole "deux points" (:).
Reprenons l'exemple de tout à l'heure, tout en regardant bien le bloc :
Code CSS :
body
{
color:red
}
color est une propriété qui spécifie la couleur, red est une valeur de la propriété qui signifie rouge. Le style défini sous entend qu'il faut donc mettre la couleur des textes de la balise body en rouge. Si la valeur est composée de plusieurs mots, il serait mieux de le mettre entre guillemets comme dans cet exemple :
Code CSS :
body
{
font-family: "Times new roman"
}
Un bloc peut contenir plusieurs déclarations. Dans ce cas, les déclarations sont obligatoirement séparées par des points virgules (;).
Code CSS :
body color:red ; font-family: "Times new roman"; }
Il est d'usage d'écrire les déclarations ligne par ligne. Sachant que c'est facultatif, il est tout à fait possible de les écrire sur la même ligne. C'est juste une question de lisibilité. On peut omettre le point virgule sur la dernière déclaration. Il vaut mieux quand même le mettre partout afin d'éviter les oublis.
Le CSS n'est pas sensible à la casse. C'est-à-dire que cela ne change rien si vous écrivez 'MENU', ou 'MeNu' au lieu de 'menu'. Cependant, il est plus convenable de tout écrire en minuscules.
Les commentaires en CSS
Il est très conseillé de mettre des commentaires dans votre code CSS. L'avantage de les mettre est qu'ils permettent à d'autres utilisateurs de comprendre votre code facilement en cas de travail en groupe par exemple. Sinon, c'est aussi dans votre intérêt personnel. Si vous décidez de reprendre le code après un long moment sans l'ouvrir, les commentaires vous aideront beaucoup à vous rafraîchir la mémoire.
De plus, les commentaires permettent de structurer le code et le rend plus lisible. Délimités par slash étoile et étoile slash, les commentaires ne sont pas interprétés par les navigateurs. Vous pouvez mettre tout ce que vous voulez dedans, ils n'apparaîtront pas sur l'écran. N'ayez donc aucune crainte, ils n'ont aucune influence sur l'affichage des contenus.
Code CSS :
/*commentaire */
Par contre, il ne faut jamais les mettre en imbriqué comme suit :
Code CSS :
/* commentaire /* encore un commentaire */
A retenir dans ce tutoriel
Afin que nous puissions partir du bon pied, voici les essentiels à retenir :
- Il faut toujours bien fermer { .... } les "accolades" quand on définit des blocs
- N'hésitez pas à mettre une déclaration par ligne, pour plus de clarté
- Ne jamais oublier d'utiliser les " : " deux-points pour séparer la propriété de sa valeur
- Mettre un " ; " point-virgule en fin des blocs en cas de plusieurs déclarations
- Placer les commentaires entre /*et */ , ne jamais les emboîter
