Belajar CSS - Mengenal CSS Reset

Di dalam pembangunan sebuah Website, tentu kita sudah mengenal banyak hal, salah satu nya yaitu CSS, dan karena banyak nya perkembangan web browser yang berbeda beda, kita sebagai seorang Desain Web, ataupun seorang Web Developer harus bisa menangani sebuah masalah yang timbul di setiap Browser.

CSS Reset

Nah untuk mengatasi masalah tersebut, kita akan membutuhkan teknik , yaitu CSS Reset.

Beberapa Pembahasan

• Apa itu CSS Reset
• Hal Apa saja yang harus di reset
• Cara Penulisan CSS Reset
• Contoh syntax CSS Reset
  

Apa itu CSS Reset

CSS Reset adalah aturan yang ada di dalam CSS, yang memiliki tujuan untuk me-Reset atau mengatur ulang semua elemen HTML di dalam sebuah browser agar rapih atau seragam.

 Belajar HTML

Beberapa web browser yang kita ketahui, seperti Firefox, IE, Opera, Chrome, Safari, UC Browser. Mereka memiliki aturan tersendiri di masing masing web Browser dalam menampilkan sebuah Style CSS.

Hal Yang Harus di Reset 

Beberapa hal yang harus di reset yaitu

1. Mengatur margin dan padding ke value 0.
2. Mengatur border ke value 0.
3. Menghilangkan tampilan list-style.
4. Menentukan font default halaman web.
5. Mengatur ketebalan font (font-weight) dan tampilan font (font-style) normal.

Cara Penulisan CSS Reset

Di dalam penulisan Sebuah Syntax CSS Reset, tidak ada kode atau perintah khusus dalam menuliskan nya. Mari kita coba

* {
margin:0;
padding:0;
}

Jika teman teman perhatikan, perintah diatas digunakan untuk menghilangkan atau mengatur ke value 0 pada margin dan padding, Namun perintah diatas dapat mempengaruhi beberapa elemen lainnya lagi, oleh karena itu kita perlu mengetahui Beragam CSS Reset lainnya.

Contoh Syntax CSS Reset

Berikut adalah beberapa contoh syntax css reset yang sering digunakan pada elemen di web browser yang sering bermasalah

Menghapus border pada fieldset dan image 
fieldset, img {
border:0;
}
 
Mengatur border dan spacing tabel 
table {
border-collapse:collapse;
border-spacing:0;
}

Menghilangkan margin dan padding pada beberapa elemen kunci 
html, body, ul, ol, li, form, fieldset, legend {
margin:0;
padding:0;
}
 
Menghapus margin top di heading dan paragraf 
h1, h2, h3, h4, h5, h6, p {
margin-top:0;
}

Mengatur ukuran font dan ketinggian paragraf pada input, textarea dan select 
input, textarea, select {
font-size:110%;
line-height;1.1;
}
 
Menghilangkan list bullet
li {
list-style:none;
}

Mengatur caption, header tabel dan data cell tabel 
caption, th, td {
text-align:left;
vertical-align:top;
font-weight:normal;
}
 
Memberikan warna pada fieldset (Mengatasi masalah warna pada IE) 
legend {
color:#000;
}

Mengatur border-bottom dan cursor pada abbr dan acronym
abbr, acronym {
border-bottom:.1em dotted;
cursor:help;
}
 
Mengatur vertical-align pada sup dan sub
sup {
vertical-align:text-top;
}
 
sub {
vertical-align:text-bottom;
}

Selain menggunakan code diatas teman teman juga bisa menggunakan code dibawah ini

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

Kesimpulan

Jadi, dengan menggunakan CSS Reset, seorang Web Desain atau Web Developer, bisa mengatur sebuah desain web tampak rapih atau seragam di sebuah web browser, Dan Semoga bisa mengurangi masalah yang akan timbul.

Baik teman teman, mungkin cukup sekian untuk Sharing kita. Terimakasih sudah Berkunjung.

Salam Semangat!!

Berbagi :