Kita buka kembali source code kita dari pelajaran sebelumnya. Sebelumnya kita telah membuat dua buah list, yaitu Daftar Buah dan Daftar Binatang Peliharaan yang telah kita atur dengan warna-warna yang menarik.

Selanjutnya, misalkan saya ingin mengubah warna tulisan pada daftar menjadi merah. Lalu saya buka kode coba.css dan saya menambahkan elemen ol, dengan properti color menjadi merah. Saya simpan dan refresh hasilnya pada browser. Ternyata warna daftar tetap, tidak berubah menjadi merah seperti kode yang barusan saya tuliskan.

Kira-kira apakah yang sedang terjadi? Dan bagaimana cara kita menyelidiki kesalahan kodenya ada di mana? Nah, untuk hal-hal seperti ini, kita bisa menggunakan Developer Tools.

Developer Tools dapat dibuka dengan cara mengakses icon menu Chrome yang berada di sudut kanan atas, lalu kita memilih More Tools, dan kemudian Developer Tools. Atau bisa juga dengan cara menekan shortcut Ctrl+Shift+I.

Setelah Developer Tools terbuka, pastikan terlebih dahulu tab yang terpilih pada bagian atas adalah Elements. Dan kemudian di bagian kiri dari Developer Tools, kita dapat melihat source code dari HTML kita.

Pada bagian kiri dari source code, terdapat icon anak panah. Apabila anak panah mengarah ke kanan, artinya source code tersebut sedang disingkat menjadi satu baris. Sedangkan apabila anak panah mengarah ke bawah, artinya kita sedang melihat seluruh source codenya secara lengkap. Kita bisa mengubah posisi anak panah dengan cara mengklik anak panah tersebut.

Pertama kita klik dahulu anak panah pada div daftar-buah untuk membuka source codenya. Dan kemudian kita buka lagi elemen ol-nya. Kemudian kita klik ke source code tag ol tersebut.

Pada sebelah kanan, pastikan tab berada pada bagian Styles. Dan kemudian kita bisa melihat kode CSS yang berkaitan dengan tag ol yang sedang kita pilih. Disini kita bisa menemukan properti color dengan nilai red, seperti kode css yang barusan saya tulis. Dan disebelah kanan dari Styles, kita dapat melihat bahwa properti ini didapatkan dari file coba.css pada baris ke 2. Artinya kode css sudah berhasil dituliskan dengan benar. Namun kenapa tulisan Apel, Jeruk dan Lemon tidak berwarna merah?

Selanjutnya kita selidiki lagi dengan cara mengklik baris yang mengandung source code li apel. Secara otomatis Chrome akan menampilkan style dari Apel. Disini kita bisa melihat bahwa pada bagian paling atas, apel menggunakan properti color dengan warna HotPink. Sedangkan di bagian bawahnya kita bisa menemukan ada property color dengan nilai red, yang merupakan inherited dari elemen ol, namun properti ini dicoret.

Artinya kode warna merah yang kita tulis barusan tidak digunakan. Dan digantikan oleh property color hotpink yang dituliskan dalam ID apel.

Sekarang kita tambahkan kode baru pada CSS. Kita tambahkan elemen li menggunakan properti color dengan nilai yellow. Kita simpan dan refresh browser. Dan kita lihat kembali, tidak ada perubahan warna pada browser.

Dan kita lihat lagi pada styles, bahwa pada elemen li terdapat properti baru yaitu color berwarna kuning seperti yang kita tulis barusan. Namun sekali lagi, color ini dicoret. Jadi warna akhir yang digunakan browser adalah HotPink.

Inilah yang kita sebut dengan kode yang tumpang tindih. Kita hendak mengubah warna dari tulisan apel, namun kita menuliskan kode untuk merubah warnanya sebanyak 3 kali. Sedangkan Chrome harus memilih hanya boleh menggunakan salah satu warna saja. Untuk itu kita harus mengerti bagaimana cara kerja Chrome dalam memilih properti mana yang akan digunakan.

Sebelum saya menjelaskan lebih lanjut, kita tambahkan satu kode lagi ya. Kita buka kode html-nya. Pada tag li Apel, kita tambahkan class=”binatang” sehingga ada tambah satu kode lagi yang mengatur properti color.

Kita simpan dan refresh browser. Disini kita bisa melihat bahwa kode yang dipakai oleh Chrome untuk menampilkan warna apel adalah kode pada ID Apel. Dari Developer Tools, kita bisa melihat bahwa Chrome telah mengurutkan kode css dengan menggunakan prioritas paling penting berada bagian paling atas, diikuti dengan prioritas berikutnya.

Disini kita bisa melihat bahwa Chrome memilih kode CSS yang paling spesifik untuk tag tersebut untuk menjadi prioritas utama. Pada tag li Apel, kita memiliki 3 buah kode pengatur warna. Dan kita bisa lihat pada Developer Tools bahwa yang paling didahulukan adalah kode CSS pada attribute ID. Pada urutan kedua adalah kode CSS pada attribute class. Dan yang paling terakhir adalah kode CSS untuk elemen li.

Selanjutnya, berhubung tag li berada di dalam tag ol, maka seluruh style yang diatur dalam tag ol akan diturunkan ke tag li. Disini kita bisa melihat tulisannya inherited from ol ya. Pada tag ol, Chrome akan menggunakan prioritas yang sama, dimulai dari attribute ID-nya, kemudian attribute Class-nya, dan yang terakhir adalah CSS untuk elemennya. Kebetulan di contoh ini kita hanya mengatur CSS pada elemen ol saja.

Penurunan style ini juga berlaku ke tag diatasnya. Jadi berhubung tag ol berada di dalam tag div yang memiliki attribute class=”daftar-buah”, maka seluruh style yang berada di dalam tag div tersebut akan digunakan juga di dalam tag ol. Hal ini bisa kita lihat dari warna latar belakang ungu yang diatur di dalam class daftar-buah.

Dan yang terakhir, berhubung tag div berada di dalam tag body, maka seluruh style yang ada di dalam tag body akan diturunkan juga ke tag div. Kebetulan di contoh ini kita tidak ada pengaturan css sama sekali pada tag body, sehingga kita tidak bisa melihat efeknya.

Kita lihat lagi ke bagian Apel. Jadi berdasarkan prioritas ini, kita bisa melihat bahwa warna pada class binatang tidak digunakan karena Chrome lebih mendahulukan ID Apel. Namun apabila kita klik properti color pada ID Apel untuk menghapus efeknya, maka Chrome akan mengganti warna apel menjadi warna pada class binatang. Untuk mendapatkan efek permanen, kita bisa membuka kembali kode html dan menghapus attribute id=apel. Kita simpan dan refresh browser. Maka kita akan mendapatkan hasil tulisan Apel yang menggunakan warna dari class binatang. Dan begitu juga efek berikutnya apabila kita menghapus attribute class=binatang, maka Chrome akan menggunakan warna berikutnya yang berasal dari elemen li.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.