Un commentaire dans une feuille de style débute par /* et se termine par */.

/* Voici un exemple de
  commentaires */

Note : Les commentaires ne peuvent pas être imbriqués.

On définit un seul style pour plusieurs éléments en les séparant par une virgule dans la feuille de style CSS.

h1, .maclasse, #monparagraphe { 
  color : red;
  font-weight : bold; 
}

Ici, les éléments h1, les classes maclasse et l'identifiant monparagraphe seront affichés de la même manière (du même style).

On ne peut pas simplifier toutes les propriétés CSS. Cependant, il existe des raccourcis qui permettent, pour certaines des propriétés, de réduire la taille de la feuille de style, et une meilleure visibilité (parfois).

Les marges

.maclasse {
  margin-top : 1px;
  margin-right : 2px;
  margin-bottom : 3px;
  margin-left : 4px;
}

peut être raccourci en

.maclasse {
  margin : 1px 2px 3px 4px;
}

On peut aussi trouver d'autres formes de ce raccourci :

• Avec trois valeurs

.maclasse {
  margin : 1px 2px 3px; /* top | left et right | bottom */
}

• Avec deux valeurs

.maclasse {
  margin : 1px 2px; /* top et bottom | left et right */
}

• Avec une seule valeur :

.maclasse {
  margin : 1px; /* top, right, bottom et left */
}

Ces formes de raccourcis s'appliquent, aussi, aux propriétés : padding, border, border-color, border-style, et border-width.

Les bordures

.maclasse {
  border-width : 1px;
  border-style : solid;
  border-color : #F00;
}

peut être raccourci en

.maclasse {
  border : 1px solid #F00;
}

Ce raccourci peut être utilisé pour : border-top, border-right, border-bottom et border-left.

.maclasse {
  border-top : 1px solid #F00;
}

Les arrières plans

.maclasse {
  background-color : #F00;
  background-image : url('monimage');
  background-repeat : no-repeat;
  background-attachment : fixed;
  background-position : top center;
}

peut être raccourci en

.maclasse {
  background : #F00 url('monimage') no-repeat fixed top center;
}

Les polices de caractères

.maclasse {
  font-style : italic;
  font-variant : small-caps;
  font-weight : bold;
  font-size : 14px;
  line-height : 140%;
  font-family : Arial, Times, Serif;
}

peut être raccourci en

.maclasse {
  font : italic small-caps bold 14px/140% Arial, Times, Serif;
}

Les listes

.maclasse {
  list-style-type : disc;
  list-style-position : inside;
  list-style-image : url('monimage');
}

peut être raccourci en

.maclasse {
  list : disc inside url('monimage');
}

Note : Si les propriétés ne sont pas spécifiées dans leur forme raccourcie, elles prennent alors leurs valeurs initiales.

Le CSS offre plusieurs syntaxes permettant de définir une couleur.

Il s'agit de définir les composantes rouge, verte et bleue de la couleur (dans cet ordre).

Vous pouvez utiliser:

• La notation hexadécimale : avec un chiffre ou deux par composante précédé du caractère # (3 chiffres ou 6 chiffres pour une couleur) ;
• La notation décimale : en définissant chaque composante par un nombre entre 0 et 255 dans la fonction rgb();
• La notation en pourcentage : en définissant chaque composante par un pourcentage (donc entre 0% et 100%) dans la fonction rgb() ;
• rgba : ce n'est ni plus ni moins que la version rgb gérant la couche Alpha ou dite de transparence. Les valeurs varient entre 0 et 1 compris.

Attention : il s'agit d'une propriété CSS version 3 et n'est donc pas disponible sur tous les navigateurs. Assurez-vous de sa compatibilité avant de l'employer.

La fonction rgb() accepte parfaitement que certaines composantes soient définies en notation décimale et d'autres en pourcentage.

Par exemple, pour spécfier que la couleur de votre texte doit être en jaune pur (rouge et vert au maximum et pas de bleu), vous pourriez faire ainsi

body {
  color: #FFFF00;    /* notation hexadécimale avec deux chiffres par composante */
  color: #FF0;    /* notation hexadécimale avec un chiffre par composante */
  color: rgb(255,255,0);  /* notation décimale à l'aide de la fonction rgb() */
  color: rgb(100%,100%,0);  /* notation en pourcentage à l'aide de la fonction rgb() */
  color: rgb(255,100%,0);  /* mélange entre notation décimale et notation en pourcentage */
  color: rgba(0, 255, 0, 0.5); /* Rouge semi-transparent */
}

Pour définir le chemin d'une image en CSS, vous devez utilisez la notation fonctionnelle url().

Par exemple :

#mon-element {
  background-image: url("chemin-de-mon-image.gif");
}

Vous pouvez utilisez un chemin absolu ( http://... ) ou un chemin relatif.
Si vous indiquez un chemin relatif, alors ce chemin sera relatif à l'emplacement de la feuille de style.

Note : Les guillemets autour du chemin sont optionnels.