CSS : Poser les bases

Stéphane — Sun, 30 Mar 2008 09:58:15 +0000

Parfois avoir une base qui définit ses styles (css) c’est bien. Voici comment je fais dans la pratique pour remettre à plat les styles par défaut des navigateurs et pour les redéfinir selon mes besoins.

Reset

Le but du reset css est de supprimer tous les styles par défaut, enfin surtout ceux qui définissent des bordures, des décalages ou des tailles. Il existe déjà pas mal de reset css notamment ceux d’Eric Meyer et de Yahoo! J’ai pris celui de Yahoo! YUI et je m’en suis servi de base :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
img,abbr,acronym{border:0;}

Typographie

Pour gérer la typographie, à mon sens le font.css de Yui convient parfaitement, il permet de :

Gère correctement les tailles des polices et des lignes.
Dégrade correctement l’utilisation des famille de polices pour les différents OS,
Gère correctement les modifications des paramètres par défaut des navigateurs.

Il suffit par la suite de définir ses tailles en pourcentage et non plus en pixel, voici le tableau des correspondances à utiliser :

Pour une taille en pixels	Utiliser ce pourcentage
10	77
11	85
12	93
13	100
14	108
15	116
16	123.1
17	131
18	138.5
19	146.5
20	153.9
21	161.6
22	167
23	174
24	182
25	189
26	197

body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}

Pour plus d’informations sur Yui Fonts voir http://developer.yahoo.com/yui/fonts/

Styles par défaut

Il ne reste plus qu’a définir les styles par défaut, ceux dont vous êtes sûr qu’ils vous seront utiles comme par exemple la taille des titres ou les espaces après les paragraphes :

Taille est espacement des titres :

h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}
h1,h2,h3,h4,h5,h6{margin-bottom:1em;}

Listes :

ol li{list-style:decimal outside;}
dl dd{margin-left:1em;}

Tableaux :

th,td{border:1px solid #000;padding:.5em;}
th{font-weight:bold;text-align:center;}

Abréviations et acronymes :

abbr,acronym{border-bottom:1px dotted #000;cursor:help;}

Espace après les blocs :

blockquote,p,fieldset,table,pre{margin-bottom:1em;}

Le mot de la fin

Il est fort possible que cette redéfinition ne vous corresponde pas telle qu’elle, d’ailleurs le but n’est pas de faire une redéfinition des styles qui puisse correspondre à tous les cas mais plutôt de vous servir de base de travail.

N’hésitez pas à utiliser, modifier et partager votre expérience ici-même en nous laissant vos commentaires.

Voici le css final complet, c’est plus simple pour faire un copier-coller :

 
body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}
h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}
h1,h2,h3,h4,h5,h6{margin-bottom:1em;}
ol li{list-style:decimal outside;}
dl dd{margin-left:1em;}
th,td{border:1px solid #000;padding:.5em;}
th{font-weight:bold;text-align:center;}
abbr,acronym{border-bottom:1px dotted #000;cursor:help;}
blockquote,p,fieldset,table,pre{margin-bottom:1em;}

Développement Web Libre » css

CSS : Poser les bases

Reset

Typographie

Styles par défaut

Le mot de la fin