Tutorial CSS: Membuat Tampilan Blog/Website Seragam Di Semua Browser Dengan CSS RESET

Seperti yang kita ketahui bahwa setiap browser (chrome, firefox, safari, edge, internet explorer) memiliki pembacaan CSS yang berbeda-beda. Sehingga terkadang mengakibatkan tampilan halaman website atau blog menjadi berantakan.

Untuk mengatasi masalah inkonsistensi browser tersebut maka dibutuhkan sebuah tekhnik agar nantinya blog atau website kita memiliki tampilan yang sama meskipun diakses menggunakan browser yang berbeda-beda, salah satunya yaitu dengan menggunakan CSS RESET.

Tujuan dari CSS RESET ini adalah untuk mengurangi inkonsistensi browser dalam hal-hal seperti ukuran tinggi garis default, margin, ukuran font atau huruf, dan lain sebagainya.

CSS RESET yang akan saya bagikan disini bersifat general atau umum. Tidak ada warna default atau latar belakang ditetapkan untuk elemen body, dan sebagainya. Nantinya teman-teman tinggal menyesuaikan dengan setelan css dasar website masing-masing.

Baca Juga: Mengenal Bahasa Pemrograman Java

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;

}

YANG LAIN: