/* --- STYLES DE BASE --- */ 
 
/* Page */ 
html { 
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */ 
  font-family: Arial, Helvetica, FreeSans, sans-serif;
} 
body { 
  margin: 0; 
  padding: 1em; /* Remettre à zéro si nécessaire. */ 
  /* Pensez à utiliser une collection de polices (2), par ex: 
  font-family: Arial, Helvetica, FreeSans, sans-serif; */ 
  font-family: Arial, Helvetica, FreeSans, sans-serif;
  font-size: .8em; /* À adapter pour la police choisie. (3) */ 
  line-height: 1.4; /* À adapter au design. (4) */ 
  color: black; 
  background: white; 
}
hr { 
	clear: both;
	width: 100%;
	border: 0; /* enleve toute bordure */
	border-bottom: 1px #004b52 solid; /* une seule bordure (sinon firefox met une bordure en haut ET en bas mais pas IE */
	height: 1px; /* pour IE */
	color: #2e758d;
}	
 
/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  font-family: Arial, Helvetica, FreeSans, sans-serif;
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */ 
  line-height: 1.2; 
  font-weight: bold; /* Valeur par défaut. (6) */ 
  font-style: normal;
  color: #2e758d;
  text-decoration: none;  
} 
h1 { 
  font-size: 1.75em; 
}
h1, h2, h3 {
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	font-size: 2.1em; /* -> 8 */
} 
h2 { 
  font-size: 1.5em; 
} 
h3 { 
  font-size: 1.25em;
  font-style: italic;  
} 
h4 { 
  font-size: 1em; 
} 
 
/* Listes */ 
ul, ol { 
  margin: .75em 0 .75em 32px; 
  padding: 0; 
}

 
/* Paragraphes */ 
p { 
  margin: .60em 0; /* Marges plus faibles que par défaut. (7) */ 
  text-align: justify;
} 
address { 
  margin: .75em 0; 
  font-style: normal; 
} 
/* identifiant */
#article  { 
	padding-bottom: 15px;
}
#photo_conteneur { 
	border: 0;
	display: block;
	width: 230px;
	float: left;
	margin: 5px 10px 5px 0px;
}
#photo_conteneur  img { 
	border: 0;
	display: block;
	width: 230px;
	height: 130px;
	float: left;
	margin: 0;
}
#bouton_menu { 
	border: 0;
	display: block;
	width: 95px;
	height: ;
	float: letf;
	margin: 0 0 10px 0;
	padding: 5px 10px 5px 5px;
	text-align: right;
	color: #2a5d58;
	background: #fdf9f6;
	font-weight: bold;
	font-stretch: extra-condensed;
}
#bouton_menu a { 
	color: #2a5d58;
	font-style: normal;
	font-size: ;
	font-weight: bold;
	text-decoration: none;
}
#bouton_menu a:hover, a:focus {
	color: #FF4C00;
}
 
/* Classes */ 
.espacedr {
	text-align:center;
	font-size: .85em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 0;
	padding-top: 0;
}
.floatLeft {
	background-color: #ebe1cb;
	float: left;
	width: 250px;
	margin-right: 10px;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
	text-indent: 0px;
	border: 2px #000000;
}
.photo { 
	border: 0;
	display: block;
	width: 300px;
	float: left;
	margin: 0px 10px 5px 0px;
}
.credits {
	border:0;
	text-decoration: none;
	display: block;
	padding: 2px 0px 0px;
	margin: 0;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	color: #666666;
	clear: left;
}
.gauche {
	margin-left: 0;
	margin-bottom: 5px;
	padding: 0;
	float: left;
	width: 100px;
}
.droite {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	float: right;
	width: 100px;
}
.flux-left { 
	clear: right;
	line-height: 0;
	margin: 0;
}
h3 img {
	float: left;
	margin: 0 10px 0 0;
	width: 250px;
	height: 100px;
}
.index {
	float: left;
	margin: 0 10px 0 0;
	width: 70px;
	height: 65px;
}
.logo {
	float: left;
	margin: 0 20px 10px 0;
	display: block;
	width: ;
	height: ;
}
 
 /* Liens */ 
a { 
  text-decoration: underline; 
} 
a:link { 
  color: #11C; 
} 
a:visited { 
  color: #339; 
} 
a:hover, a:focus, a:active { 
  color: #00F; 
}
.lien_texte {
	line-height: 1.5;
	clear: none ;
	text-align: left;
}
.liens_haut {
	text-align: center;
	font-size: 1em;
} 
/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:active { 
  outline: none; 
} 
/* Pas de bordure autour des images dans les liens */ 
a img { 
  border: none; 
} 
 
/* Divers éléments de type en-ligne (8) */ 
em { 
  font-style: italic; 
} 
strong { 
  font-weight: bold; 
}
blockquote {
  font-style: italic;
}
/*mise a jour */
#mise_a_jour {
	float: left;
	width: ;
	padding: 12px 20px;
	text-align: bottom;
	clear: both;
} 
 
/* Formulaires */ 
form, fieldset { 
  margin: 0; 
  padding: 0; 
  border: none; 
} 
input, button, select { 
  vertical-align: middle; /* Solution pb. d'alignement. (9) */ 
}

Certaines lignes de code sont commentées. Les numéros entre parenthèses renvoient aux notes suivantes:
1.	Bug décrit sur la page suivante: Bug avec l’unité relative em et Internet Explorer.
2.	Pour un choix de collections de polices (font-family, voir Quelles polices de caractères (fontes) utiliser sur le Web?.
3.	Ici, on utilise les styles de l'élément body pour définir la taille du texte globale pour le site. Une police Arial ou Helvetica à .8em, soit 80% de la taille du texte par défaut du navigateur, fournit une bonne lisibilité. Il faudra adapter cette valeur suivant la police choisie, les besoins du design, etc.
4.	Les valeurs 1.1 et 1.2 conviennent marchent bien pour les titres, voire pour le texte dans des colonnes étroites. Pour des lignes de texte plus longues, on utilisera plutôt des valeurs entre 1.2 (120%) et 1.8 (180%).
5.	Avec les styles par défaut des navigateurs, les titres ont souvent une marge supérieure et une marge inférieure égales. Du coup, on ne reconnait pas au premier coup d'œil que le titre se rapporte au texte qui le suit. Le style proposé corrige ce défaut. Pour retrouver le style par défaut des navigateurs, utilisez un margin: 1em 0;.
6.	Dans les styles par défaut des navigateurs, les titres sont en gras. Si vous souhaitez une graisse normale pour la plupart de vos titres, utilisez plutôt font-weight: normal.
7.	On utilise des em afin que les marges des paragraphes soient proportionnelles à la taille du texte, ce que ne font pas tous les navigateurs (notamment IE). On utilise une valeur de .75em, soit des retraits entre les paragraphes un peu plus faibles que ceux utilisés par défaut par les navigateurs. À modifier selon vos besoins.
8.	Ces styles correspondent aux valeurs par défaut des navigateurs, mais vous voudrez peut-être les modifier pour votre projet.
9.	Les éléments de formulaires sont assez difficiles à mettre en forme et à positionner. De plus, l'alignement vertical des boutons, cases à cocher et autres listes déroulantes est parfois difficile à gérer. Vu les différences de comportement entre navigateurs, il n'y a pas de solution parfaite, mais utiliser un alignement vertical centré dans la hauteur de ligne permet d'avoir un rendu décent avec tous les navigateurs.

Où placer ces styles?
Le plus simple est sans doute de placer ces styles dans un fichier séparé. Pour ma part, je l'enregistre séparément dans un fichier base.css. Ainsi, pour une page donnée, je peux avoir les appels de feuilles de styles suivants:
<link rel="stylesheet" type="text/css" media="all" 
      href="css/base.css" /> 
<link rel="stylesheet" type="text/css" media="screen" 
      href="css/screen.css" />
Si vous choisissez cette solution, appelez la feuille de styles de base en premier, de préférence.
Avantage possible de cette solution: vous pourrez utiliser la feuille de styles de base comme base pour tous les médias de restitution, par exemple pour les styles pour l'impression. On pourra avoir la feuille de styles de base, une feuille de styles pour l'affichage à l'écran, et une troisième pour l'impression.
L'autre solution, c'est de placer les styles de base au début de votre feuille de styles principale.