Par exemple :

peut s’écrire :

Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de « l’horloge » ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :

div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}

Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :

div {margin:20px 10px}

Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :

div {padding:3em 1em 2em}

Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :

• background : color, image, repeat, attachement, position (vertical, horizontal)
• border : epaisseur, style, couleur
• border-top : epaisseur, style, couleur
• border-right : epaisseur, style, couleur
• border-bottom : epaisseur, style, couleur
• border-left : epaisseur, style, couleur
• border-color : couleurs dans le sens de « l’horloge »
• border-style : style dans le sens de « l’horloge »
• border-width : valeurs dans le sens de « l’horloge »
• font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
• list-style : type, position, image
• margin : valeurs dans le sens de « l’horloge »
• padding : valeurs dans le sens de « l’horloge »

Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.

<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />

plutôt que

Le séparteur

A la fin d’une déclaration, on met un  » ; ».
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.

plutôt que

Les couleurs

La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.

color:#ABC

plutôt que

color:#AABBCC

Les unités

Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.

margin:0 5em

plutôt que

margin:0px 5em

Les valeurs par défaut

Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.

div {border:1px solid #A1F5C3}

plutôt que

div {position:static; border:1px solid #A1F5C3}

Les propriétés raccourcies

(Voir Les propriétés raccourcies)

Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]

border: solid #DEF; border-width: 0 2px 2px 0;

plutôt que

border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;

Les déclarations communes

Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages. Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]

#footer, #footer a, #footer span {font-size: smaller}

plutôt que

Les propriétés qui héritent

Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]

* {font-family: Arial, Helvetica, sans-serif}

plutôt que

Les selecteurs qui appartiennent déjà à une classe

Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.

et <div id="footer"><span>Réalisation&nbsp;:</span><a href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

plutôt que

et <div id="footer"><span class="footerTexte">Réalisation&nbsp;:</span><a class="footerLiens" href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>