CARA MELIHAT CSS WEBSITE

CSS adalah komponen penting dalam merancang website. Dengan melihat CSS, kamu dapat mengetahui bagaimana situs tersebut dirancang, dan mungkin saja mendapatkan inspirasi untuk proyekmu sendiri. Berikut adalah cara melihat CSS sebuah website.

Memanfaatkan Fitur Inspect Element

Salah satu cara melihat CSS suatu website adalah dengan memanfaatkan fitur Inspect atau Inspect Element yang disediakan oleh hampir semua browser.

Mengaktifkan Fitur Inspect Element

Untuk mengaktifkan Inspect Element, klik kanan pada elemen apa pun di halaman web dan pilih ‘Inspect’ atau ‘Inspect Element’. Sebuah panel akan muncul yang menampilkan HTML, CSS, dan JavaScript yang digunakan halaman tersebut.

Menjelajahi CSS Melalui Inspect Element

Setelah panel Inspect muncul, kamu dapat menjelajahi CSS yang digunakan pada halaman tersebut. CSS akan ditampilkan di panel sebelah kanan. Kamu bisa melihat setiap aturan CSS yang digunakan untuk elemen yang dipilih. Selain itu, kamu juga bisa melihat file CSS yang digunakan.

Menggunakan Alat Developer Tools

Selain fitur Inspect, browser juga dilengkapi dengan alat bernama Developer Tools yang membantu dalam menganalisis serta mengedit CSS situs langsung dari browser.

Mengaktifkan Developer Tools

Untuk mengakses Developer Tools, kamu bisa menggunakan shortcut F12. Alternatif lain adalah dengan klik kanan pada halaman web, lalu pilih ‘Inspect Element’, dan kemudian pilih tab ‘Styles’ atau ‘CSS’.

Menganalisis CSS Melalui Developer Tools

Dengan Developer Tools, kamu bisa melihat bagaimana perubahan CSS mempengaruhi situs secara real-time. Kamu bisa mengubah nilai atribut CSS dan melihat efeknya langsung. Perlu diketahui, perubahan ini tidak permanen dan hanya berlaku selama sesi browser kamu.

Menyimpan CSS

Jika kamu menemukan CSS yang menarik dan ingin menyimpannya untuk referensi masa depan, kamu bisa melakukannya dengan cara klik kanan pada elemen CSS dalam panel Inspect Element atau Developer Tools, kemudian pilih ‘Save as…‘.

Perlu dicatat bahwa ini hanya akan menyimpan CSS untuk elemen individual, bukan seluruh halaman.

Dengan mengerti cara melihat CSS sebuah website, kamu dapat belajar bagaimana situs tersebut dibangun dan mendapatkan inspirasi untuk situsmu sendiri. Selamat mencoba!