Sommaire :
1. L'appel du fichier CSS : link ou import ?
2. La structure du fichier CSS
3. Les valeurs par défaut
4. Raccourcir le code
L'appel du fichier CSS
Il y a deux manières d'appeller le fichier CSS : l'importer ou utiliser une balise de style. Dans tous les cas il faut bien sur faire un fichier HTML et CSS distinct.

L'import :
<style type="text/css"media="Screen">
   @import url("style.css");
</style>
La balise de style
<link rel="stylesheet" type="text/css" href="formats.css" media="Screen" > La différence entre les deux est principalement pour les anciens navigateurs(ex Netscape 4), l'import étant du CSS2 n'est pas pris en compte, du coup on aura un site sans style mais lisible au lieu d'avoir des trucs qui partent dans tous les sens.

La structure du fichier CSS
Classer votre code par rapport au graphisme
Découper votre code en 3 rubriques :
- haut : entête et menu de votre site.
- milieu
- bas : signature

Séparer les styles de position et de texte
Pour éviter de mélanger les deux, et de risquer de déclarer plusieurs fois le même style, il vaux mieux séparer la typographie et le graphisme. Vous avez le choix entre faire 2 fichiers séparés (layout.css et style.css par exemple) ou dans le même fichier mais placer distinctement. Si vous le faites dans le même fichier (perso moi je fais comme ça), faire une rubrique spéciale pour la typographie, en utisant une grand balise comme dans le point suivant.

Structurer avec des commentaires
Pour les grandes parties utilisez de grandes balises : /* ---------------------------------------------*/
/* -------------->>> MILIEU <<<---------------*/
/* ---------------------------------------------*/
Classement alphabétique
Dans un soucis de ne pas faire de doublons et de retrouver facilement vos classes, mettez les classes en ordre alphabétique, ainsi que les propriétés. Par exemple : #boite{
   background:#cccccc;
   line-height:12px;
   margin:0;
   padding:0;
}
#cadre{
   border:1px solid #000000;
   padding:10px;
}
#dialog{
   background:#000000;
   padding:0;
}
Faire un sommaire
Pour avoir un aperçu très rapide du fichier css, et plus particulièrement si d'autres personnes sont suceptible de modifier votre code (travail collaboratif), un sommaire récapitulant les rubriques est une chose très apréciable.

Les valeurs par défaut
Les navigateurs définissent des valeurs par défaut aux éléments. Par contre il peut arriver parfois que ces valeurs ne soit pas les mêmes, notamment pour les marges internes et externes (padding et margin). pour éviter d'avoir une différence entre firefox et ie, j'utilise cette méthode :
* {    margin:0;    padding:0; } ici on affecte à tous les éléments (div, p, span, ...) des marges nulles. Je les redéfini ensuite suivant comme j'en ai besoin. Vous pouvez aussi définir élément par élément, en écrivant le nom de l'élément et en le définissant. Comme par exemple : p {    margin:10px 0 10px 0;    padding:0; }
Raccourcir le code
Vous pouvez utiliser beaucoup de raccourci, mais il faut faire très attention à la notation. Voici donc ce que l'on peut raccourcir :

Cascade de style
Lorsque plusieurs paramètres se répètent dans des classes différentes, vous pouvez utiliser le style en cascade, comme ceci : h1{
   color:#FFF;
   font-weight:bold;
   font-size:12px;
}
h2{
   color:#FFF;
   font-weight:bold;
   font-size:16px;
}
h3{
   color:#FFF;
   font-weight:bold;
   font-size:20px;
}
Avec le code en cascade, on regroupe les champs similaire et on obtient : h1,h2,h3{
   color:#FFF;
   font-weight:bold;
} h1{
   font-size:12px;
}
h2{
   font-size:16px;
}
h3{
   font-size:20px;
}
Les couleurs
Une couleur se compose de 6 chiffres, qui représente en fait 3 doublets pour Rouge, Vert, Bleu(#RRVVBB). Vous avez surement déjà rencontrer des couleurs avec 3 chiffres (#369). En fait le principe est de mettre seulement le premier chiffre de chaque doublet, ainsi #2266CC deviendra #26C.

Raccourci des propriétés Les propriétés font, background, margin... peuvent être regroupé dans une seule fonction. Exemple : margin-left:10px;
margin-top:5px;
margin-right:0;
margin-bottom:0;
va devenir : margin :5px 0 0 10px; Il faut bien sur respecter un ordre précis pour éviter tout problème. Détail : Les liens doivent être défini dans cet ordre :   a:link { color:red; text-decoration:underline; }
  a:visited { color: black; text-decoration:none;}
  a:hover { color: blue; text-decoration:underline; }
  a:active { color: red; text-decoration:none;}
Les marges se définissent dans cette ordre : margin: haut droite bas gauche :    margin:10px 0 10px 0;
   margin:0 auto; // équivalent à margin:0 auto 0 auto;
Les bords de cette façon : border:largeur style couleur;   border:1px solid #000; L'arrière plan est déclarer dans cette ordre : background: color image repeat attachment position;   background:#FFF url(fond.jpg) repeat-x; La police : font:font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;   font: italic small-caps bold 10px Arial;
Autres astuces ?
J'ai surement oublier d'autres astuces, et il y en a aussi que je connais pas... donc dites moi vos techniques en commentaire, et je les ajouterais !