Bước 1: Margin và padding: 0

Mặc định các trình duyệt sẽ thêm thuộc tính margin, padding vào rất nhiều thẻ html. Điều dễ thấy nhất đó là 6px margin ở thẻ body. Và trong thiết kế của bạn chắc rất ít khi có nó. Vậy hãy bắt đầu... cho nó về zero

Bạn có thể thêm 1 cách đơn giản

* {margin: 0; padding: 0;}

Hoặc liệt kê chi tiết các thẻ

body, html, div, blockquote, img, label, p, 
h1, h2, h3, h4, h5, h6, pre, ul,  ol, li, dl, dt,
 dd, form, a, fieldset, input, th, td  
{  
	margin: 0; padding: 0; border: 0; outline: none;  
}  

Bước 2: Nắm quyền điều khiển tất cả các thẻ

Bạn cũng cần chú ý là các thẻ có kích thước font khác nhau ở những trình duyệt khác nhau. Bạn có thể chỉnh về kích thước riêng của bạn hoặc chỉ đơn giản là giá trị 100%

h1, h2, h3, h4, h5, h6
{
	font-size: 14px;
}

Tiếp theo, chúng ta sẽ tạo margin và padding cho từng phần riêng biệt, và ở đây, tôi cũng gỡ bỏ style của thẻ ul, ol

body
{
    line-height: 1;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
    padding: 5px 0;
    margin: 0 15px;
}

ul, ol
{
	list-style: none;
}

img
{
	border: 0;
}

Bước 3: Mở rộng

Bạn có thể không cần làm bước này, trong bước này tôi chỉ đưa ra các class hay được sử dụng trong các project của mình

.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}

Và file reset.css của bạn

* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6
{
	font-size: 14px;
}
body
{
    line-height: 1;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
    padding: 5px 0;
    margin: 0 15px;
}

ul, ol
{
	list-style: none;
}

img
{
	border: 0;
}
a  
{  
    color: #000;  
    text-decoration: none;  
}  
  
a:hover  
{  
	text-decoration: underline;  
}  
.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}