Pada artikel ini saya akan berbagi tips untuk mengubah style css dengan cepat. Sebenarnya sangat sederhana, berdasarkan pengalaman saya membuat website cara ini sering saya gunakan.
Cara yang sering saya gunakan adalah dengan mengubah style langsung di browser, perubahan akan langsung terlihat, kemudian copas style ke file project kita. Cara ini jauh lebih cepat dibanding ketika kita ingin mengubah style sebuah elemen secara hardcode pada project file kita, kemudian cek hasilnya di browser, kalau tidak sesuai kembali ke editor lagi ubah code nya, setelah itu cek lagi hasilnya, ini akan memakan waktu yang lama karena kita harus bolak – balik mengecek hasilnya.
Meskipun cara ini sepele dan sangat simple, tapi sangat powerful bahkan masih banyak teman saya yang belum melakukan cara ini. Bagi yang belum tahu caranya, ikuti langkah berikut :
Langkah 1 – Inspect Elemen
Langkah pertama adalah buka browser ( Chrome, Firefox, dll ), kemudian buka inspect element dengan cara Klik Kanan > Inspeksi atau tekan F12. Maka akan muncul seperti berikut :
Langkah 2 – Pilih Element
Selanjutnya pilih elemen yang akan diubah style’nya, gunakan fitur select element dengan menekan tombol berikut :
Setelah select elemen aktif, geser cursor dan arahkan ke elemen yang ingin kita ubah stylenya.
Setelah diarahkan ke elemen yang diinginkan maka Tab Elements dan Styles akan aktif pada elemen tersebut, pada contoh ini saya mengarahkan ke elemen button.
Langkah 3 – Ubah Style
Selanjutnya kita bisa mengubah style pada elemen tersebut secara langsung melalui Tab Styles. Misalnya pada contoh ini saya akan mengubah elemen tombol saya supaya memenuhi space kosong. Jadi saya akan otak – atik Tab Styles supaya sesuai dengan keinginan saya.
Perlu diingat bahwa saat ini kita mengubahnya secara sementara, jadi jangan sampai halamanya ke refresh ya.
Langkah 4 – Simpan Style
Setelah style yang diinginkan sudah jadi, maka copy semua style tadi kemudian barulah kita paste ke file project kita. Terakhir cek hasilnya, maka elemen tersebut sudah permanen kita ganti style sesuai dengan keinginan.
Bagaimana ? lebih efektif bukan… Meskipun cara ini sangat sederhana tapi terbukti powerful.
