Melihat dan mengubah CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Selesaikan tutorial interaktif ini untuk mempelajari dasar-dasar melihat dan mengubah CSS halaman menggunakan Chrome DevTools.

Melihat CSS elemen

  1. Klik kanan teks Inspect me! di bawah, lalu pilih Periksa. Panel Elements di DevTools akan terbuka.

    Periksa saya!

  2. Amati elemen Inspect me! yang ditandai dengan warna biru di Pohon DOM.

    Elemen yang ditandai.

  3. Di DOM Tree, temukan nilai atribut data-message untuk elemen Inspect me!.

  4. Masukkan nilai atribut di kotak teks di bawah.

  5. Di panel Elements > Styles, temukan aturan class aloha.

    Panel Styles mencantumkan aturan CSS yang diterapkan ke elemen apa pun yang dipilih di DOM Tree, yang seharusnya masih berupa elemen Inspect me!.

  6. Class aloha mendeklarasikan nilai untuk padding. Masukkan nilai ini dan unitnya tanpa spasi pada kotak teks di bawah.

Jika Anda ingin memasang jendela DevTools ke dok di sebelah kanan area pandang, seperti pada screenshot di langkah pertama, lihat Mengubah penempatan DevTools.

Menambahkan deklarasi CSS ke elemen

Gunakan panel Styles jika Anda ingin mengubah atau menambahkan deklarasi CSS ke elemen.

  1. Klik kanan teks Add a background color to me! di bawah, lalu pilih Periksa.

    Tambahkan warna latar belakang ke saya!

  2. Klik element.style di dekat bagian atas panel Styles.

  3. Ketik background-color dan tekan Enter.

  4. Ketik honeydew dan tekan Enter. Di hierarki DOM, Anda dapat melihat bahwa deklarasi gaya inline telah diterapkan ke elemen.

Menambahkan deklarasi CSS ke elemen melalui panel Styles.

Menambahkan class CSS ke elemen

Gunakan panel Styles untuk melihat tampilan elemen saat class CSS diterapkan atau dihapus dari elemen.

  1. Klik kanan elemen Add a class to me! di bawah, lalu pilih Periksa.

    Tambahkan kelas ke saya

  2. Klik .cls. DevTools menampilkan kotak teks tempat Anda dapat menambahkan class ke elemen yang dipilih.

  3. Ketik color_me di kotak teks Add new class, lalu tekan Enter. Sebuah kotak centang akan muncul di bawah kotak teks Add new class, tempat Anda dapat mengaktifkan dan menonaktifkan class. Jika elemen Add a class to me! memiliki class lain yang diterapkan ke dalamnya, Anda juga dapat mengalihkannya dari sini.

Menerapkan class color_me ke elemen.

Menambahkan pseudostate ke class

Gunakan panel Styles untuk menerapkan pseudostate CSS ke elemen. DevTools mendukung :active, :focus, :focus-within, :target, :hover, :visited, atau focus-visible.

  1. Arahkan kursor ke teks Hover over me! di bawah. Warna latar belakang berubah.

    Arahkan kursor ke atas saya!

  2. Klik kanan teks Hover over me!, lalu pilih Periksa.

  3. Di panel Styles, klik :hov.

  4. Centang kotak :hover. Warna latar belakang berubah seperti sebelumnya, meskipun Anda tidak benar-benar mengarahkan kursor ke elemen tersebut.

Mengaktifkan/menonaktifkan pseudostate pengarahan kursor pada elemen.

Mengubah dimensi elemen

Gunakan diagram interaktif Box Model di panel Styles untuk mengubah lebar, tinggi, padding, margin, atau panjang batas elemen.

  1. Klik kanan elemen Change my margin! di bawah, lalu pilih Periksa.

    Ubah margin saya!

  2. Untuk melihat Box Model, klik tombol Tampilkan sidebar. Show sidebar di panel tindakan di panel Styles. Tombol Tampilkan sidebar.

  3. Pada diagram Box Model di panel Styles, arahkan kursor ke padding. Padding elemen ditandai di area pandang. Padding elemen.

  4. Klik dua kali margin kiri di Box Model. Elemen tersebut saat ini tidak memiliki margin, sehingga margin-left memiliki nilai -.

  5. Ketik 100, lalu tekan Enter. Mengubah margin kiri elemen.

Model Kotak ditetapkan secara default ke piksel, tetapi juga menerima nilai lain, seperti 25%, atau 10vw.