Pada video ini kita akan membahas mengenai CSS Reset. Pada video sebelumnya, kita sudah mempelajari bahwa setiap browser sudah menerapkan CSS default dari browser. Sebagai contoh, bisa dilihat disini bahwa saya sudah membuatkan satu buat file HTML, yang isinya hanya satu buah tag h1 dan satu buah paragraf. HTML ini memiliki tag link ke file CSS yang masih kosong.

Kita bisa lihat hasilnya pada browser. Kita bisa melihat bahwa ada sedikit jarak diantara huruf paling kiri judul ke tepi browser. Kemudian pada bagian atas judul juga ada jarak. Dan ada jarak juga diantara judul dengan paragraf. Mungkin dari video kurang begitu kelihatan ya. Agar lebih jelas saya klik kanan dan inspect.

Kalau saya arahkan ke tag body, maka bisa kita bisa melihat disekelilingnya ada kotak orange. Artinya secara default elemen body memiliki margin yang mengelilingi kontennya. Lalu kalau kita arah kan ke tag h1, maka ada margin di bagian atas dan bawahnya. Begitu juga kalau kita arahkan ke tag p.

Nah, margin disini adalah CSS bawaan dari browser, dalam hal ini kita sedang menggunakan Chrome. Banyak programmer yang mengganggap bahwa CSS default ini menyusahkan, karena menyebabkan browser menampilkan elemen HTML tidak sesuai dengan yang diinginkan. Apalagi nilai CSS default ini bisa berbeda-beda diantara satu browser dengan browser lainnya. Oleh karena itu muncul satu teknik untuk melakukan CSS Reset, dimana kita menghapus seluruh CSS default bawaan browser. Kemudian baru kita atur ulang melalui kode CSS kita.

Kita buka kembali source code tadi. Dan kita akan mencoba untuk menghilangkan semua margin pada semua elemen HTML.

Kita buka kode CSS kita. Untuk menuliskan kode CSS yang berlaku di semua elemen, kita bisa menggunakan selector *. Sebagai contoh, kita tambahkan selector *. Lalu kita tambahkan margin: 0px. Hal ini akan menghapus semua margin pada semua elemen HTML.

Kita simpan dan refresh browser. Sekarang semua elemen akan saling berdempetan, karena semua margin defaultnya sudah hilang.

Jadi secara teori, kita bisa menggunakan selector * ini untuk menghilangkan semua margin, padding, ataupun properti lainnya yang tidak diinginkan dari CSS Default. Namun cara seperti ini tidak disarankan ya. Mengapa? Karena selector * ini akan berlaku untuk semua elemen, sehingga akan memberatkan kinerja browser.

Jadi kita disarankan untuk menggunakan cara lain untuk melakukan CSS Reset. Dalam hal ini, kita bisa melakukan pencarian Google dengan kata kunci CSS Reset. Dan kita bisa menemukan teknik CSS Reset yang paling sering digunakan, yaitu dari situs Meyerweb.Com. Disini sudah ada sekumpulan kode CSS untuk melakukan reset. Kita tinggal copy dan paste ke kode CSS kita.

Sebaiknya pada bagian akhir dari kode ini, kita berikan komentar bagian akhir dari CSS Reset. Jadi kalau nantinya kita mau menambahkan kode CSS di file ini, kita bisa menambahkannya setelah kode Reset. Dan kita memiliki batas yang jelas, yang mana kode reset dan yang mana kode yang kita tulis sendiri.

Kita simpan dan refresh browser. Dan sekarang font yang digunakan oleh tag h1 pun ikut di reset menjadi sama dengan paragraf ya. Jadi setelah reset, nantinya kita mesti mengatur ulang lagi font dan ukuran yang akan digunakan oleh h1. Nantinya teman-teman bisa melihat lagi kode CSS Reset yang diberikan oleh Meyer, untuk melihat elemen-elemen apa saja yang di-reset, dan properti apa saja yang di-reset.

Dan nantinya setelah di-reset, kita akan menambahkan kode CSS untuk mengatur ulang elemen-elemen yang kita gunakan pada HTML kita. Sebagai contoh, apabila saya ingin ada jarak pada bagian atas dan bawah tag h1. Kita tambahkan selector h1, lalu kita tambahkan properti margin dengan nilai 10px 0. Artinya browser akan menambahkan jarak 10 pixel pada bagian atas dan bawah judul, dan 0 pixel pada bagian kiri dan kanan judul. Dan sekarang dibagian atas dan bawah judul sudah ada jarak.

Ingat ya, kita melakukan pengaturan ulang CSS di bagian bawah kode Reset. Jadi browser akan melakukan reset terlebih dahulu, baru kemudian browser menerapkan kode CSS kita. Kalau kode kita dipindahkan ke bagian atas, maka kode CSS kita akan turut di-reset sehingga tidak berfungsi.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.