Cara melihat dan memahami kode CSS pada web/blog orang lain

Untuk melihat dan memahami kode CSS yang digunakan sebuah web/blog, biasanya kita melakukan klik kanan pada halaman dan memilih view page source/lihat sumber halaman, lalu menelusuri sumber text ataupun gambar yang ingin dilihat pada tumpukan html halaman tersebut, setelah terlihat kita mencari class yang digunakan pada sumber dan mencari letak class tersebut pada bagian atas halaman, yaitu style css.

Sungguh rumit bagi pemula seperti saya, karena terkadang CSS tidak tersusun dengan rapi. CSS menumpuk seperti sebuah paragraf. Dan sungguh tanpa unsur kesengajaan saya menemukan cara yang lebih efisien untuk melakukan semua hal diatas, dan menariknya, kita bisa mengganti code css pada halaman web/blog tersebut. Ikuti langkah-langkahnya.

Langkah-langkah

Saya akan memberi contoh untuk melihat, mengubah dan memahami code css yang digunakan oleh facebookdotcom pada bagian tombol/button MENDAFTAR. Pertama anda harus online terlebih dahulu. Buka facebook menggunakan browser mozilla firefox, klik kanan pada tombol hijau mendaftar dan pilih Inspect Element.

Memahani HTML dan CSS pada web orang lain

Jika ingin melihat code css sebuah tulisan, blok dahulu tulisannya barulah klik kanan pada tulisan tersebut lalu pilih inspect element. Tapi untuk artikel kali ini saya jelaskan pada tombol mendaftar dahulu. Setelah inspect element dipilih, maka akan keluar jendela inspector dan rules pada bagian bawah browser.

Memahani HTML dan CSS pada blog orang lain

Disana kita bisa melihat code css yang digunakan pada tombol mendaftar facebook. kita juga bisa mengubah font-size, margin dll. Atau meng-nonaktifkan css yang kita mau dengan cara menghilangkan centang pada checkbox di bagian rules.

Contoh dibawah saya meng-nonaktifkan background dan font-size pada tombol mendaftar.

Menggunakan inspect element untuk memahami CSS

Lihat gambar diatas. Saya menghilangkan centang/tanda betul pada checkbox background dan font-size. sehingga warna background menjadi putih dan ukuran font mengecil.
Sekarang saya mencentang kembali checkbox background, tapi mengubah code warna menjadi merah. Lihat contoh dibawah.

Menggunakan inspect element pada browser untuk memahami HTML

Lihat gambar diatas. Saya mengubah code 67AE55 menjadi FC0101. dan saya mengubah code disebelahnya menjadi FFFFFF.

Ket:
FC0101 adalah code warna merah digunakan untuk background.
FFFFFF adalah code warna putih digunakan untuk gradasi warna/gradient.
Sekarang mengganti tulisan mendaftar menjadi ayo login.Sebenarnya ini bukan code css tapi html pada halaman facebook, tapi setidaknya saya ingin memberikan sedikit pemahaman tentang siklus html dan css. Lihat contoh dibawah.

Kali ini bukan pada halaman rules melainkan inspector. pada bagian button saya mengubah tulisan mendaftar menjadi ayo login (seharusnya ayo sign in, tapi males ngubahnya lagi).
Dengan cara ini anda bisa melihat, mengubah dan memahami code css yang digunakan oleh web/blog orang lain dengan tujuan untuk mengimplementasikan code-code tersebut kedalam blog kita. Semoga bermanfaat.

Perhatian: Ini bukan teknik hacking. Cara ini tidak akan mengubah secara permanen halaman facebook. Kita akan melihatnya sementara waktu, dan ketika halaman dimuat ulang/refresh, maka halaman facebook akan terlihat seperti semula.

Mungkin anda ingin membaca artikel dibawah :