Browser (peramban) memiliki default value CSS-nya sendiri terhadap tag-tag html. Sialnya, default value CSS tiap-tiap browser berbeda. Itulah mengapa kita membutuhkan CSS Reset.
CSS Reset adalah serangkaian nilai CSS yang dibuat untuk me-reset default value browser menjadi nol. Dengan cara ini, tampilan markup setiap tag html yang belum di-styling akan menjadi sama di setiap browser.
File CSS Reset
Saya pribadi menggunakan file CSS Reset-nya Pak Jauhari. Hanya saja saya menambahkan nilai font-weight:normal untuk heading sehingga filenya menjadi seperti ini:
css_html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
font-weight:normal;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.hide {
display: none;
}
br.clear {
clear: both;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac */
* html .clearfix {
height: 1%;
}
hr {
display: none;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after,.post:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}
/* Makes clearfix actually work in IE */
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .post {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix, * html .post {height: 1%;}
.clearfix, .post {display: block;}
/* End hide from IE-mac */
img#wpstats{width:0px;height:0px;overflow:hidden}
Cara menggunakan CSS Reset
- Buat file
reset.css, letakkan di dalam direktori yang sama dengan file CSS anda - Copy paste kode diatas ke dalam file
reset.css - Embed
reset.csskedalam file CSS anda dengan menggunakan tag ini:@import url('reset.css');
Cara diatas berjalan dengan baik. Namun demi mengurangi http request, ada baiknya juga bila kode CSS diatas langsung disatukan ke dalam file CSS anda.
UPDATE 8/Jul/2010: Me”reset” CSS dengan cara yang lebih efisien
Setelah membaca artikel Thierry Koblentz mengenai Setting rather than Resetting Default Styling yang mengemukakan inefesiensi dalam penggunaan css-reset (thanks to @japestinho untuk linknya), artikel TJKDesign mengenai Implementing a starter CSS file rather than using a reset stylesheet dan artikel Steve Souders mengenai don’t use @import (karena lambat) akhirnya saya memodifikasi “cara” saya “me-reset” CSS.
Alih-alih membuat file reset.css yang kemudian di import ke file CSS utama, saya sekarang lebih pilih menambahkan instruksi ini di awal file CSS utama saya secara langsung:
/* Reset
---------------------------------------------*/
css_html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-size: 100%;
font-weight:normal;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
text-decoration:none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
Sesuai kebutuhan saja. Much more simple, isn’t it? What do you think? 
Layouting Menggunakan CSS « outstando
14 March 2010
[...] outstando We Do Outstanding Thing « Menggunakan CSS Reset [...]
Japestinho
15 March 2010
Wah oke brad
Kalo artikel ini http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ bagaimana pendapat lu brad?
fikrirasyid
17 March 2010
hmm… make sense juga sih .Sebenarnya sama aja kan, cuman kalo dia alih2 ngereset semuanya jadi 0, value-value yang berbeda itu disetting ulang defaultnya berapa. Jadi motong kerja browser juga.
Cuman masalahnya, kalau si elemen itu ternyata memang harus distyling berbeda, ujung2nya nambah eksekusi jg. intinya sih kalau ngereset CSS mungkin ngga perlu semua juga. cuman yang akan sering dipake aja.
fikrirasyid
17 March 2010
anyway, base.css-nya Thierry Koblentz di http://tjkdesign.com/ez-css/css/base.css perlu dipelajari lebih lanjut n diimplementasiin deh. baca komentar-komentar dalam stylesheet itu
Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia
13 May 2010
[...] Menggunakan CSS Reset [...]
Menulis CSS dengan lebih efisien | Outstando
08 July 2010
[...] Reset atau “setting” default CSS-nya – Setiap browser memiliki default value sendiri untuk setiap elemen. Membiarkannya berbeda-beda akan sangat memakan waktu penulisan CSS. [...]
ArdianZzZ
22 September 2010
CSS reset saya hanya 4 baris:
* {
margin:0;
padding:0;
}
fikrirasyid
28 September 2010
Hihi, benar juga. bisa saja sih disederhanakan seperti ini :p
Obi Mnaohonin
13 December 2010
trims…info bagus nh kebetulan sya jga lgi bkin theme baru