Tutorial CSS: Membuat Tampilan Blog/Website Seragam di Semua Browser Dengan CSS RESET
Muh. Ashhar Bustan

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.

Baca Juga: Kompiler dan Interpreter Java


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: Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website


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;

} 

 

Baca Juga: Cara Membuat dan Memasang Favicon di Blog atau Website


YANG LAIN:

Komentar

Cari Artikel Lainnya Disini