Kita buka kembali source code kita dari pelajaran sebelumnya. Sebelumnya kita telah membuat dua buah list, yaitu Daftar Buah dan Daftar Binatang Peliharaan. Dan kita telah belajar mengenai cara memberi warna pada konten list.
Kita akan belajar mengenai cara melakukan grouping pada konten kita, sebagai contoh disini kita akan grouping konten judul Daftar Buah dan isinya yaitu apel, jeruk dan lemon agar menggunakan warna latar belakang biru. Untuk melakukan grouping, kita akan menggunakan elemen div.
Kita lihat kembali ke kode kita. Dan kita pergi menuju kebawah header pertama Latihan CSS. Lalu kita tambahkan tag pembuka div, dan tag penutup div. Kita pindah ke browser dan refresh untuk melihat hasilnya.
Dari sisi tampilan, tag div yang barusan kita buat tidak memiliki perubahan apa-apa ya. Karena tag Div kita belum diiisi dengan konten. Kita coba buka developer tools pada Chrome. Kita lihat ke bagian elements. Lalu kita pilih tag div. Pada tampilan layar diatas tidak ada perubahan apa-apa. Namun di sebelah kanan developer tools, kita bisa melihat bahwa sebenarnya tag div kita sudah memiliki lebar sebesar 1902 pixel, namun tingginya hanya 0 pixel. Karena tingginya sebesar 0 pixel ini, maka div menjadi tidak kelihatan.
Kita bisa mengubah style dari tag div kita langsung dari developer tools. Misalkan kita tambahkan background-color menjadi blue. Masih belum ada perubahan apa-apa ya, karena tinggi div masih 0. Kita tambahkan lagi properti height menjadi 30px. Nah, sekarang kita sudah bisa melihat tag div kita akan membentuk satu buah kotak berwarna biru dengan lebar 1902 pixel dan tinggi 30 pixel.
Kita kembali ke tampilan kode. Ingat bahwa apa pun yang kita ubah pada developer tools tidak tersimpan ke dalam kode kita. Jadi apabila kita menekan tombol refresh pada browser, maka tampilannya akan kembali seperti semula.
Untuk memberikan warna latar belakang pada div, pertama kita tambahkan dahulu attribute class=”daftar-buah” pada kode html. Lalu kita buka kode css, dan kita tambahkan .daftar-buah dan kita isikan dengan properti background-color:blue.
Kita refresh browser. Dan sekali lagi, belum ada perubahan apa-apa pada tampilan browser ya, karena konten div masih kosong sehingga secara default tinggi div adalah 0. Kita pindahkan konten yang hendak kita group ke dalam div, yaitu dimulai dari tag h2 Daftar Buah, hingga ke tag ol. Dan kita refresh browser.
Nah sekarang kita bisa melihat bahwa seluruh konten Daftar Buah sudah menjadi satu group dan semuanya menggunakan warna latar belakang biru. Dengan menggunakan div seperti ini, kita bisa menambahkan style pada kelas daftar-buah, dan style tersebut akan digunakan di seluruh konten Daftar Buah, baik pada header maupun list-nya.
Satu hal yang perlu diperhatikan disini adalah kita bisa melihat pada developer tools Chrome, bahwa browser memberikan stylesheet default pada elemen div, dengan properti display yang nilainya block. Apakah itu block?
Nah, untuk menerangkan arti dari block, kita tambahkan satu buah paragraf pada akhir konten kita. Kemudian kita tambahkan konten lorem ipsum. Lorem ipsum ini adalah konten dengan kata-kata acak yang biasanya digunakan oleh designer untuk mengatur style dari situsnya.
Kita simpan dan kita refresh browser. Kita bisa melihat ada tambahan satu buah paragraf dengan konten kata-kata acak pada akhir halaman kita.
Misalkan kita mau grouping kata ketiga dan keempat dari paragraf tersebut. Maka kita menuju ke kode html kita, sebelum kata ketiga kita tambahkan tag pembuka div. Dan setelah kata keempat, kita tambahkan tag penutup div.
Kita simpan dan lihat hasilnya pada browser. Nah sekarang kita melihat bahwa kata ketiga dan keempat dari paragraf tersebut berada pada baris yang terpisah dari paragraf. Hal ini disebabkan karena elemen div bersifat block. Artinya konten yang berada di dalam div akan berada di dalam baris yang terpisah dari konten lainnya.
Untuk melakukan grouping pada konten yang tidak menyebabkan terjadinya pisah baris, kita dapat menggunakan elemen lain, yaitu span. Kita coba ganti kata div menjadi span pada kode kita. Kita refresh browser dan kita lihat paragraf sudah menyatu seperti sebelumnya. Namun kita tidak bisa melihat keberadaan span di dalam konten ya, karena kita belum mengatur style yang digunakannya.
Sekarang sebagai contoh saya tambahkan attribute class=”warnamerah” pada tag span. Kita simpan dan lihat hasilnya di browser. Nah sekarang kita sudah dapat di browser bahwa kata ketiga dan keempat dari paragraf sudah menggunakan warna latar belakang merah. Karena sudah kita gruping menggunakan tag span dan kita beri attribute class warnamerah.
Oke, pada video ini kita sudah mempelajari mengenai cara melakukan grouping dengan menggunakan elemen div dan span. Elemen div bersifat blocking, sehingga seluruh konten di dalam div akan berada di dalam baris yang terpisah dari konten lainnya. Sedangkan elemen span bersifat inline, sehingga konten tetap berada pada baris yang sama.
Kedepannya di dalam pemograman css, kita akan banyak menggunakan elemen div untuk mengatur style dari situs kita.