Pernahkah Anda mendengar CSS reset? Untuk apa sebenarnya? Postingan cara menggunakan CSS Reset berikut akan menjawab semuanya. Simak pembahasan AneIqbal selengkapnya berikut ini.
Style bawaan browser
Setiap browser memiliki style default masing-masing. Style default tersebut dapat di atur ulang/direset dengan CSS.
Perhatikan gambar di bawah ini. Terdapat jarak yang ditandai dengan warna putih. Itu adalah style default browser dan dapat diatur ulang dengan CSS reset.
Jika style bawaan tersebut direset atau diatur ulang, maka pinggiran berwarna putih di atas hilang. Lihat gambar berikut dan perhatikan perbedaannya.
Terlihat perbedaannya bukan? Jarak yang ditandai dengan warna putih hilang dan warna biru tua mengikuti lebar browser. Margin dan padding browser di atur menjadi 0.
CSS reset sangat penting diaplikasikan supaya tampilan website menjadi sesuai dengan design yang sudah dibuat. Selain itu, CSS reset juga memudahkan kita dalam memberikan efek style CSS dengan lebih presisi dan tepat.
Nah, bagaimana cara membuatnya? Silakan simak terus sampai akhir pembahasan untuk mengetahui langkah-langkahnya.
Cara menggunakan CSS reset
Dalam percobaan CSS reset kali ini, kita akan membuat dua buah file; file HTML dan file CSS. File HTML tentu sebagai pondasi/struktur websitenya dan file CSS untuk mengatur style atau tampilannya serta ada barisan code CSS reset.
Pertama, silakan buat file html dengan nama css_reset.html. Berikut isi codingan dari file tersebut.
Script css_reset.html
<!DOCTYPE html>
<head>
<title>CSS Reset</title>
<style type="text/css">
#kotak {
width: 100%;
height: 100%;
background: #0c0c38;
}
</style>
</head>
<body>
<div id="kotak">kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak</div>
</body>
</html>
Setelah file HTML selesai dibuat, selanjutnya kita beralih ke file CSS. Ohiya, pastikan kedua file tersebut berada dalam satu folder yang sama.
File css yang akan kita buat diberi nama file css_reset.css. Berikut isi dari codingan file tersebut.
Script css_reset.css
* {
margin: 0;
padding: 0;
}
Kemudian, edit kembali file HTML yang sudah dibuat tadi. Kita tambahkan script pemanggilan file CSS dari file HTML. Scriptnya sederhana:
<link rel='stylesheet' href="css_reset.css">
Sehingga script akhirnya menjadi seperti berikut ini.
Script Akhir
<!DOCTYPE html>
<head>
<title>CSS Reset</title>
<link rel='stylesheet' href="css_reset.css">
<style type="text/css">
#kotak {
width: 100%;
height: 100%;
background: #0c0c38;
}
</style>
</head>
<body>
<div id="kotak">kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak kotak</div>
</body>
</html>
Silakan simpan kembali file tersebut dan lihat perbedaannya. Hasilnya akan terlihat seperti pada gambar di atas.
Script CSS Reset yang lain
Ohiya, script CSS Reset tidak hanya itu saja. Script CSS reset yang kita gunakan di atas adalah versi yang tersimpel. Untuk versi lainnya, Anda bisa lihat di https://www.cssreset.com/.
Bagaimana menurut Anda? Cukup mudah bukan untuk menggunakannya? Mudah namun seringkali terlupakan.
Tetapi, jika Anda sudah menggunakan framework CSS seperti Bootstrap atau lainnya, CSS reset ini sudah ada di dalamnya. Jadi, Anda tidak perlu menggunakan cara di atas.
Sekian panduan cara menggunakan CSS reset ini dan semoga bisa sedikit membantu Anda. Terima kasih sudah membaca sampai akhir pembahasan.
