Les bases de la syntaxe CSS - Tutoriel
Composition d'une règle CSS.
Une feuille de styles CSS n'est rien d'autre qu'un ensemble de règles définissant chacune une caractéristique de la mise en forme. Par exemple, la règle suivante signifie que les titres h1 sont en caractères de taille 24 points et de couleur rouge.
Une règle est composée de:
Un sélecteur.
Le sélecteur désigne les éléments auxquels on souhaite attribuer la mise en forme. Cela peut être comme ici une balise HTML, mais des sélecteurs beaucoup plus sophistiqués sont disponibles. Quand vous aurez terminé cette lecture, reportez vous à la liste des sélecteurs.
Tout ce qui se rapporte à un sélecteur est groupé entre accolades.
Une ou plusieurs propriétés.
font-size
etcolor
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. Nous ne l'avons pas fait sur l'exemple ci-dessus.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 reconnaît 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
ouright
. 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". Il y a toujours une unité à indiquer, et elle est obligatoire, sauf dans quelques rares cas comme pour la propriétéorder
qui attend juste un numéro. Dans le cas où la valeur est zéro, on peut se permettre de ne pas préciser l'unité, car 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é.Quelques exemples:
margin:2cm; /* Une dimension en centimètres */ width:50%; /* Une dimension en pourcentages */ rotate:45deg; /* Un angle */
Quand vous aurez terminé cette lecture, vous pourrez consulter les 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.
Précisons également que CSS n'est pas sensible à la casse mais l'habitude a été prise d'écrire les CSS en lettres minuscules.
Les noms de propriétés ou les valeurs sont parfois des mots composés : un tiret est généralement utilisé comme séparateur de mots.
On appelle cette façon d'écrire les codes informatiques, le kebab-case
.
Exemple font-size
.
Soignez la présentation de vos CSS avec des sauts de ligne et, comme dans tout langage informatique, en gérant l'indentation (marges à gauche pour faire ressortir la logique). Le code ci-dessous :
body {
font-family:'Arial' sans-serif;
font-size:12pt;
color:red;
}
h1 {
font-size:18pt;
}
Est quand même plus lisible que :
body {font-family:'Arial' sans-serif;font-size:12pt;color:red;} h1 {font-size:18pt;}
Les propriétés résumées.
Afin de faciliter l'écriture des styles, CSS reconnaît de nombreuses propriétés résumées, c'est à dire des propriétés qui permettent de définir plusieurs valeurs en une seule fois, ce qui aurait nécessité normalement l'écriture de plusieurs propriétés. Les valeurs d'une propriété résumée sont séparées par des espaces.
Par exemple la propriété margin
est un résumé pour définir en une seule fois les quatre marges. Les deux écritures ci-dessous sont équivalentes.
Remarque : lorsque des valeurs correspondent aux quatre côtés d'un élément, CSS utilise toujours le même ordre pour les énumérer : on part du haut et on tourne dans
le sens des aiguilles d'une montre : haut, droite, bas, gauche.
margin:15px 0px 10px 0px;
margin-top:15px;
margin-right:0px;
margin-bottom:10px;
margin-left:0px;
De même, la propriété border
est un raccourci qui permet de définir en une seule fois le type de bordure, son épaisseur et sa couleur, et pour les quatre
côtés d'un élément.
border:3px double blue;
border-width:3px;
border-style:double;
border-color:blue;
Attention ! Les propriétés résumées définissent toutes les valeurs prévues, même si certaines ne sont pas précisées. Ces dernières sont alors remises à leur valeur initiale.
Par exemple border:double;
va fixer le style de bordure à double
mais également l'épaisseur à medium
qui est la valeur initiale, et remettre la couleur de la bordure identique à celle du texte.
border:double;
border-width:medium;
border-style:double;
border-color:currentcolor;
Conclusion : si vous utilisez une propriété résumée, autant définir toutes les valeurs pour laquelle elle est prévue.
Les directives.
Les directives (at-rule en anglais) sont des commandes plus globales que les propriétés. Leur nom commencent toujours par le caractère @
.
Leurs rôles sont très diversifiés :
@import
insère une autre feuille de styles à cet endroit.@charset
définit le jeu de caractères de la feuille de styles.@font-face
définit le téléchargement de polices de caractères.- Etc. Il y en a beaucoup d'autres. Vous en trouverez la liste sur ce site.
Les valeurs de type url.
Certaines valeurs sont des url vers un image ou un autre fichier. CSS adopte alors une syntaxe du type fonction. Par exemple, pour définir l'image à afficher en arrière-plan :
background-image:url('../images/fond.png');
Il peut s'agir d'une url absolue (qui commence par http://
) ou d'une url relative.
Dans ce dernier cas, le chemin est relatif à l'emplacement de la feuille de styles (et non pas des pages HTML qui utilisent ces styles).
Les commentaires.
Les commentaires sont ignorés par les programmes ; ils sont destinés aux humains qui peuvent avoir à déchiffrer la feuille de styles. Il peut s'agir d'explications sur des astuces utilisées, ou de simples petits aide-mémoire. On peut aussi utiliser les commentaires pour désactiver provisoirement une ou quelques règles, en général pour effectuer des tests.
Il est possible d'insérer des commentaires dans la définition des styles en les entourant de
/*
et*/
/* mise en forme du bandeau */ .panel { ... }