Sporniket Studio

A methodology for CSS (3)

• Web design

16 January 2009 — 08:55

Redefine the default HTML layout

One cause for the discrepancies of web pages layout among browsers lays in the default HTML layout that have been choosen by each browser developpment team. Thus the first thing a CSS stylesheet must do is setting this default layout explicitely : this is called "CSS reset stylesheet".

Example

This site uses the following reset stylesheet :

/*======================================================================
 *Réglages "utilisateur" pour ne pas dépendre des valeurs par défaut
 *du navigateur.
 */
address,
blockquote,
body,
caption,
center,
dd,
dir,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
li,
menu,
ol,
p,
table,
td,
th,
ul
{
font-size: 1em;
font-family: sans-serif;
}

a
{
cursor: pointer;
}
a:link
{
color: #3364a1;
background: transparent;
text-decoration: none;
}
a:visited
{
color: #337;
background: transparent;
text-decoration: none;
}
a:active
{
color: green;
background: transparent;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

address
{
margin: 0em 0% 0em 0%;
font: italic 1em/1em sans-serif;
}

big
{
font-size: 1em;
}

blockquote
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

body
{
margin: 0em 0% 0em 0%;
font: 1em/1em sans-serif;
background: #fff;
cursor: default;
}

button
{
cursor: auto;
}

caption
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

code
{
font-size: 1em;
font-family: monospace; /*evite de redéfinir le gras/italique, ce qui
arrive avec font*/
}

div
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

dd
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

dl
{
margin: 0em 0% 0em 0%;
}

dt
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

h1
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h2
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h3
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h4
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h5
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

h6
{
margin: 0em 0% 0em 0%;
font: bold 1em/1em sans-serif;
}

hr
{
margin: 0em 0% 0em 0%;
}

html
{
margin: 0;
background: #fff;
}

input
{
cursor: auto;
}

kbd
{
font: 1em monospace;
}

li
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

ol
{
margin: 0em 0% 0em 5%;
list-style: decimal;
}

ul ul ol ol,
ul ol ul ol,
ol ul ol ol,
ol ol ul ol,
ol ul ol,
ol ol
{
list-style: lower-alpha;
}

ol ul ol ol,
ol ol ul ol,
ul ol ol ol,
ol ol ol
{
list-style: lower-roman;
}

ol ol ol ol
{
list-style: decimal;
}

p
{
margin: 0em 0% 0em 0%;
line-height: 1em;
}

pre
{
margin: 0em 0% 0em 0%;
font: 1em/1em monospace;
}

samp
{
font: 1em monospace;
}

small
{
font-size: 1em;
}

sub
{
font-size: 1em;
}

sup
{
font-size: 1em;
}

td
{
line-height: 1em;
}

textarea
{
cursor: text;
}

th
{
font: bold 1em/1em sans-serif;
}

tt
{
font: 1em monospace;
}

ul
{
margin: 0em 0% 0em 5%;
list-style: disc ;
}

ul ul,
ol ol ul ul,
ol ul ol ul,
ul ol ol ul,
ol ul ul,
ul ol ul
{
list-style: circle;
}

ol ul ul ul,
ul ol ul ul,
ul ul ol ul,
ul ul ul
{
list-style: square;
}

ul ul ul ul
{
list-style: disc;
}

img
{
border-width:0;
}