Jika website kalian memiliki banyak data yang akan dilist, kalian bisa menggunakan perintah list dengan tag <li>. Dengan perintah tag tersebut kalian dapat membuat banyak kata yang diurutkan berdasarkan list. Pada list dihtml memiliki ikon titik sebagai penanda listnya. Kalian bisa merubah ikon titik tersebut dengan CSS. Sesuai dengan pembahasan kita kali ini, kita akan belajar bagaimana cara mengganti icon list dengan CSS.
Caranya terbilang cukup mudah, hal yang perlu kalian ketahui adalah tentang dasar perintah HTML dan CSS. Perintah CSS yang akan kita gunakan untuk mengubah ikon titik menjadi gambar adalah st-style-image. Dengan perintah tersebut nilai awal dari perintah list HTML akan kita rubah sesuai dengan gambar apa yang kita inginkan. Untuk itu kita bisa langsung mulai prakteknya saja. Pertama buat tampilan list dengan HTML. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.
list.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <ul> <li>Kopi</li> <li>Teh</li> <li>Coca Cola</li> </ul> </body> </html>
Setelah sudah membuat file htmlnya, sekarang kita beralih untuk membuat file CSS. Kalian bisa ikuti code berikut ini.
style.css
ul {
list-style-image: url('sqpurple.gif');
}
Setelah sudah kalian simpan kedua file tersebut dengan nama dan format masing-masing seperti pada judul diatasnya. Agar file ini berjalan dengan lancar, kalian harus menyimpan kedua file tersebut dalam satu folder yang sama. Untuk melihat hasilnya kalian cukup membuka file htmlnya pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.
Pada gambar diatas adalah tampilan awal dari perintah list. Setelah kita rubah dengan perintah list-style-image maka tampilanya akan berubah seperti ini.
Dengan begitu tampilan list pada website kita akan lebih menarik dan tidak monoton. Tampilan website yang bagus dan rapih tentu akan berdampak pada seringnya pengunjung membuka website kita dan betah berlama-lama. Mudah bukan ?
Sekian pembahasan mengenai bagaimana cara mengganti icon list dengan CSS. Semoga artikel kali ini bermanfaat bagi kalian semua.
