cara reset css

Cara Reset CSS Default Bawaan Browser

Bagaimana cara reset CSS? Sering kali kita terganggu dengan pengaturan default CSS pada HTML. Terlebih ketika kita akan membuat theme untuk WordPress misalnya. Atau ketika kita ingin mengubah semua nilai dari CSS kita menjadi nol (0).

Untuk itulah kita perlu melakukan reset pada CSS kita. Tujuan dari reset stylesheet adalah untuk mengurangi ketidakkonsistenan browser dalam hal-hal seperti ketinggian garis default, margin dan ukuran font judul, dan sebagainya. Seperti kita ketahui, browser memiliki nilai-nilai default untuk beberapa tag dan element HTML. Dan untuk mempermudah kita dalam memanipulasi tag dan element HTML dengan CSS, kita bisa mereset CSS kita.

Nah, kali ini saya akan menunjukkan bagaimana cara melakukan reset CSS tersebut. Tentu saja, saya bukan orang pertama yang menggunakan cara reset CSS ini. Bahkan saya mendapatkannya dari blog-nya Eric A. Meyer.

Reset CSS Default

Oke, langsung saja. Kamu bisa menggunakan kode ini untuk mereset CSS default kamu. Kode ini sudah saya simpan di repository GitHub saya. Silakan kamu bisa melihatnya, atau copy paste atau bahkan download file reset CSS disini.

Atau kalau kamu juga bisa langsung saja copy paste kode di bawah ini.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Silakan kamu bisa menggunakan kode di atas ini sesuai dengan keinginan kamu. Bahkan, sama om Eric A. Meyer kita diizinkan untuk memodifikasi kode ini sesuai kebutuhan kita.

Kesimpulan

Jadi kesimpulannya, ketika kita merasa terganggu dengan nilai default dari sebuah element atau tag pada HTML, kita bisa menghapus nilai-nilai default tersebut dengan meresetnya melalui CSS.

Misalkan saja, secara default ketika kita menulis teks heading dengan <h1> maka teks di dalam tag <h1> tersebut akan menjadi paling besar. Tapi ketika kita menambahkan kode untuk mereset CSS di atas, maka teks dengan tag <h1> akan sama saja. Karena nilai default sudah kita reset. Yang perlu dilakukan selanjutnya adalah kita mengatur sendiri nilai untuk tag <h1> tersebut sesuai dengan keinginan kita.

Sampai disini, semoga bermanfaat…

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Berlangganan Email

Dapatkan informasi dan tutorial terbaru saya tentang pemrograman dengan mengisikan alamat email kamu di form berikut

Leave a Reply

Your email address will not be published. Required fields are marked *