Menambahkan CSS Reset pada Website

Update Terakhir pada

RESET-CSS

Oke teman-teman WebHozz kali ini kita akan coba bagaimana caranya menambahkan css reset pada website kita teman-teman.

Pada tutorial kali ini kita akan membahas mengenai CSS Reset. Langsung saja, perlu kita ketahui bahwa pada setiap browser internet mempunyai style bawaan sendiri, sebagai contoh padding & margin pada browser google chrome dan mozilla itu berbeda. Nah hal ini menyulitkan seorang web design ketika kita ingin website yang dibuat jalan disemua browser tanpa ada perbedaan antara browser yang satu dengan yang laiinya. Bagaimana caranya?

Kita bisa menambahkan CSS Reset, seperti  yang biasa saya gunakan bisa seperti ini :

*{padding: 0px; margiin:0px;}

atau bisa juga kalian menambahkan di style css, seperti berikut ini:

/* RESET */

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;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

height: auto;

border-top-width: 0;

border-bottom-width: 0;

border-left-width: 0;

}

blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}

blockquote, q {quotes: none;}

:focus {outline: 0;}

.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}

ins {text-decoration: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

body {background-color: white;background-position: center center;}

/* RESET */

reset-css1

setelah kita kasih jarak

reset-css2

hasilnya :

css_reset3

 

Masih ada beberapa cara lainnya tapi, saya terbiasa menggunakan seperti itu teman-teman. Nah mudah bukan, dicoba ya teman-teman ^^