Syntaxe de base du CSS

Syntaxe CSS

Les règles CSS sont composées de deux parties principales : le sélecteur et une ou plusieurs déclarations.

selector {declaration1; declaration2; ... declarationN }

Le sélecteur est généralement l'élément HTML dont vous souhaitez changer le style.

Chaque déclaration est composée d'une propriété et d'une valeur.

Les propriétés (property) sont les attributs de style (style attribute) que vous souhaitez définir. Chaque propriété a une valeur. Les propriétés et les valeurs sont séparées par un deux-points.

selector {property: value}

Cette ligne de code définit la couleur du texte des éléments h1 en rouge et le taille de la police en 14 pixels.

Dans cet exemple, h1 est le sélecteur, color et font-size sont les propriétés, red et 14px sont les valeurs.

h1 {color:red; font-size:14px;}

Le schéma suivant vous montre la structure de ce code :

Syntaxe CSS

Astuces :Utilisez des accolades pour envelopper les déclarations.

Différentes formes d'écriture des valeurs et des unités

En plus du mot anglais red, nous pouvons utiliser la valeur de couleur hexadécimale #ff0000 :

p { color: #ff0000; }

Pour économiser des octets, nous pouvons utiliser la forme abrégée de CSS :

p { color: #f00; }

Nous pouvons utiliser les valeurs RGB de deux manières :

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Veuillez noter que lorsque vous utilisez les pourcentages RGB, même si la valeur est 0, il est nécessaire d'écrire le symbole de pourcentage. Cependant, cela n'est pas nécessaire dans d'autres cas. Par exemple, lorsque la taille est de 0 pixels, il n'est pas nécessaire d'utiliser l'unité px après 0, car 0 est 0, peu importe l'unité.

N'oubliez pas d'écrire les guillemets

Astuces :Si la valeur est composée de plusieurs mots, il est nécessaire d'entourer la valeur d'apostrophes :

p {font-family: "sans serif";}

Déclarations multiples :

Astuces :Si vous souhaitez définir plusieurs déclarations, il est nécessaire d'utiliser des points-virgules pour séparer chaque déclaration. L'exemple suivant montre comment définir un paragraphe centré en texte rouge. La dernière règle à suivre est de ne pas ajouter de point-virgule, car le point-virgule en anglais est un symbole de séparation, et non de fin. Cependant, la plupart des designers expérimentés ajoutent un point-virgule à la fin de chaque déclaration, ce qui permet de réduire au maximum les erreurs lors de l'ajout ou de la suppression de déclarations existantes. Voici comment :

p {text-align:center}; color:red;}

Vous devriez décrire une propriété par ligne pour améliorer la lisibilité de la définition de style, comme ceci :

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Espaces et casse

La plupart des feuilles de style contiennent plus d'une règle, et la plupart des règles contiennent plus d'une déclaration. L'utilisation de multiples déclarations et d'espaces rend les feuilles de style plus faciles à éditer :

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

L'inclusion ou non d'espaces n'affecte pas le fonctionnement du CSS dans le navigateur, tout comme, contrairement à XHTML, CSS est insensible à la casse. Toutefois, il existe une exception : si elle travaille avec un document HTML, les noms de class et d'id sont sensibles à la casse.