Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment ajouter du CSS interne dans l’entête HTML. Dans ce tuto , nous allons voir le syntaxe CSS.
Définition d’un style
La définition d’un style se fait à l’aide de règles en texte simple permettant de décrire l’aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments :
- Un sélecteur de balises, permettant de préciser à quelles balises du document le style s’applique ;
- Une déclaration de style, définie entre accolades, permettant de préciser le style à appliquer aux balises sélectionnées. La déclaration est elle-même constituée :
- d’une ou plusieurs propriété(s), suivie du caractère « : » (double point),
- d’une ou plusieurs valeur(s) associée(s) à chaque propriété, entourée de guillemets s’il s’agit de plusieurs mots ou séparés par des virgules s’il y en a plusieurs, suivie d’un point virgule.
La syntaxe est ainsi la suivante :
La syntaxe suivante définit par exemple le style à appliquer aux liens hypertextes (balise <A>), c’est-à -dire une police Verdana de taille 20 pixels, en gras et de couleur rouge :
A { font-family: Verdana;
font-size: 20px;
font-style: bold;
color: red
}Une ou plusieurs propriétés:
font-size et color sont ce qu’on appelle des propriétés. Le nom des propriétés CSS laisse en général facilement deviner quel va être leur effet. CSS comporte de très nombreuses propriétés, ce qui fait sa richesse et laisse espérer des possibilités de mise en forme très étendues.Les propriétés sont séparées entre elles par un point virgule indispensable ( ; ). Il est recommandé, bien que ce ne soit pas obligatoire d’aller à la ligne après chaque propriété afin d’améliorer la lisibilité de la feuille de styles.
Des valeurs
Chaque propriété est suivie par une ou plusieurs valeurs. Un caractère deux points ( : ) sépare le nom de la propriété de sa valeur.Certaines valeurs sont des nombres mais CSS reconnait de nombreuses valeurs prédéfinies, comme sur notre exemple, le nom de la couleur. Les propriétés d’alignement reconnaissent les valeurs left, center ou right. Et il y a beaucoup d’autres valeurs prédéfinies que vous découvrirez au fur et à mesure de votre apprentissage des CSS.
Des unités
Les valeurs, lorsqu’il s’agit de nombres, sont la plupart du temps suivies par une unité. Sur notre exemple pt veut dire « point ». L’unité est obligatoire, même si certains navigateurs se débrouillent sans, il y a toujours un risque qu’ils interprètent mal la valeur. Il n’y a que dans le cas où la valeur est zéro qu’on peut se permettre de ne pas préciser l’unité. De toute façon, 0cm (0 centimètres) est identique à  0in (0 pouces).Il ne faut pas laisser d’espace entre la valeur et son unité.Quand vous aurez terminé cette lecture, vous pourrez consulter la liste des unités CSS. Vous verrez que CSS reconnaît bien sûr des unités de dimension, nécessaires pour fixer la taille des éléments ou des marges, mais aussi de très nombreuses autres unités, et même, ce qui peut surprendre, des unités de temps et de fréquence.
Les commentaires
Il est possible (et conseillé) de documenter ses feuilles de style en y incorporant des commentaires donnant des informations additionnelles (raison du choix de tel ou tel style, type de document auquel il s’applique, contexte, …). Les commentaires CSS sont délimités par les sigles /* et */ :
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/* Ceci est un commentaire */
baliseA {propriétés}
baliseB {propriétés}
baliseC {propriétés}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>