Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet.

• Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!)

• Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. (Oh… du coup il faut réfléchir quand même?)

Quels objectifs?

Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux:

• Gommer certaines différences entre les styles par défaut des navigateurs. On pourra le faire en utilisant un Reset CSS, mais ici l'approche est légèrement différente: plutôt que de remettre à zéro (reset) les styles par défaut des navigateurs, on va se contenter de les corriger ou de les préciser quand ils divergent légèrement.

• Fournir un canevas avec des sélecteurs CSS pour les principaux éléments d'une page web. Cela permettra s'occuper dès le départ de choses que l'on fait presque systématiquement dans une intégration web: modifier les styles des liens, des paragraphes, des titres, etc.

Notre feuille de styles de base

/* --- STYLES DE BASE --- */

/* Page */
html {
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
}
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-size: .8em; /* À adapter pour la police choisie. (3) */
  line-height: 1.4; /* À adapter au design. (4) */
  color: black;
  background: white;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  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;
}
h1 {
  font-size: 1.75em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1em;
}

/* Listes */
ul, ol {
  margin: .75em 0 .75em 32px;
  padding: 0;
}

/* Paragraphes */
p {
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
address {
  margin: .75em 0;
  font-style: normal;
}

/* Liens */
a {
  text-decoration: underline;
}
a:link {
  color: #11C;
}
a:visited {
  color: #339;
}
a:hover, a:focus, a:active {
  color: #00F;
}
/* 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;
}

/* 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.

Modifiez ces styles!

Un des deux avantages de la feuille de styles par défaut proposée dans cet article, c'est qu'elle fournit un canevas à modifier. Besoin d'une police différente, de tailles de texte ou hauteurs de lignes qui s'écartent de ce qui est proposé? Corrigez les styles!

Pour chaque projet, identifiez dans la maquette les principales caractéristiques du texte (fonte, taille, graisse, hauteur de ligne), les couleurs des liens (y compris avec les états survolés!), la taille des retraits entre les paragraphes. Ensuite, modifiez la feuille de styles de base pour ce rapprocher autant que possible de ces caractéristiques.

Pour ne pas faire d'impasse, lisez la feuille de styles de base ligne par ligne et demandez-vous si les styles utilisés sont pertinents pour votre projet, ou s'il faut les corriger.

Bonus

Pour finir, voici quelques styles qui peuvent être intéressants, mais qui ne sont pas assez simples ou «universels» pour être inclus à la feuille de styles de base ci-dessus.

/* --- STYLES DE BASE SUPPLÉMENTAIRES --- */

/* Met en évidence les abréviations (ayant un attribut title) */
abbr[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* Met en évidence les citations */
blockquote {
  margin: .75em 0 .75em 20px;
  padding: 0 0 0 10px;
  border-left: solid 2px #ddd;
}
q, cite {
  font-style: italic;
}
q cite, q q {
  font-style: normal
}

/* Supprime les guillemets automatiques (citations courtes) */
q {
  quotes: none;
}
q:before, q:after {
  content: ""; /* Nécessaire pour Safari/Chrome */
}

/* Rapproche les paragraphes dans les listes et citations */
blockquote p, li p {
  margin: .5em 0;
}

/* Styles de base pour les listes de définition */
dl {
  margin: .75em 0;
}
dt {
  margin: .75em 0 0 0;
  font-weight: bold;
}
dd {
  margin: .25em 0 .25em 32px;
}

/* Mise en forme simple pour les tableaux */
table {
  margin: 0;
  border: 1px solid gray; /* Pas de bordure = "none". */
  border-collapse: collapse; /* Valeur par défaut: "separate". */
  border-spacing: 0;
}
table td, table th {
  padding: 4px; /* Pas de retrait autour du texte = "0". */
  border: 1px solid #ccc; /* Pas de bordure = "none". */
  vertical-align: top; /* Valeur par défaut: "middle" */
}

/* Conteneurs sémantiques de HTML 5 */
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {
  display: block;
}

Ces styles ne sont pas indispensables mais peuvent vous être utiles. Utilisez-les selon vos besoins ou inspirez-vous en.