Program Reset CSS

Hello guys, Berjumpa lagi dengan Miniblog dari Inzaghi's Blog! Reset.css sangatlah penting agar Kode CSS benar-benar menyatu dan tidak terpacu dengan Browser apapun. Tujuan lainnya agar lebih rapi dan teratur. Kali ini kita akan memberikan Kode Program Reset CSS (reset.css).

Sumber : Meyerweb.com, Eplusgo.com, dan Ilmuwebsite.com

Reset CSS adalah kumpulan aturan CSS yang ditulis untuk mereset atau mengatur ulang semua elemen HTML agar tampil secara seragam di berbagai peramban web.

Harap dicatat bahwa setiap peramban web (seperti Firefox, Internet Explorer, Opera, Chrome, Safari, dll) memiliki aturan yang berbeda dalam menampilkan gaya CSS.

Bagaimana Cara Menuliskan CSS Reset?

Untuk membuat CSS Reset, perintah yang digunakan tetap berupa perintah CSS. Tidak ada kode atau perintah khusus yang diperlukan untuk mengimplementasikan CSS Reset. Mari kita lihat contohnya!

Perhatikan perintah di bawah ini :

* {
  margin: 0;
  padding: 0;
}

Perintah di atas akan mengatur ulang CSS untuk menghapus margin dan padding dari semua elemen menggunakan selektor universal. Namun, perintah reset tersebut dapat berdampak pada beberapa elemen yang sebenarnya tidak memiliki margin dan padding yang perlu dihapus.

Apa Saja Yang Perlu di Reset?

Beberapa hal yang perlu di-reset ialah :

• Mengatur margin dan padding ke nol (0)
• Mengatur border ke nol (0)
• Menghilangkan tampilan list-style
• Menentukan font default halaman web
• Mengatur ketebalan font (font-weight) dan tampilan font (font-style) normal

Contoh Beragam Perintah CSS Reset

Berikut beberapa perintah CSS Reset yang umum digunakan pada elemen yang sering bermasalah.

/* 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;
}

Kesimpulannya, Dengan menggunakan CSS Reset, Anda dapat mengharmonisasikan desain situs web agar memiliki tampilan seragam di berbagai jenis web browser. Ini bertujuan untuk mengurangi potensi masalah yang mungkin muncul akibat perbedaan interpretasi CSS oleh web browser yang berbeda.

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini. Dan Semoga Bermanfaat bagi kita semua!

Terima Kasih 😀😊😘👌👍 :)