Dito PriwantoSetelah pada bagian sebelumnya kita belajar tentang cara membuat dan mengatur tampilan CSS Button, pada seri Belajar CSS Bagian 24 ini kita akan membahas elemen lain yang juga cukup sering digunakan dalam pembuatan website, yaitu CSS List.
List atau daftar biasanya digunakan untuk menampilkan informasi secara terstruktur, seperti menu navigasi, daftar fitur, hingga daftar langkah dalam sebuah tutorial.
Dengan menggunakan CSS, kita tidak hanya bisa menampilkan list secara standar, tetapi juga dapat mengatur tampilan, posisi, hingga style marker agar terlihat lebih menarik dan sesuai dengan desain website yang dibuat.
Apa Itu CSS List?
CSS List adalah sekumpulan properti dalam CSS yang digunakan untuk mengatur tampilan daftar (list) pada elemen HTML. Secara default, browser menampilkan list dengan gaya standar, seperti bullet pada daftar tidak berurutan atau angka pada daftar berurutan. Tampilan bawaan ini sering kali terlihat terlalu sederhana dan kurang sesuai jika dipadukan dengan desain website yang lebih modern.
Dengan menggunakan CSS List, desainer web dapat mengubah tampilan list agar tidak lagi menggunakan gaya default. Misalnya dengan mengatur jenis penanda (bullet atau angka), posisi penanda, jarak antar item, hingga mengganti bullet dengan ikon atau simbol tertentu. Selain itu, CSS juga memungkinkan kita untuk menyesuaikan ukuran font, warna, dan berbagai aspek visual lainnya agar daftar terlihat lebih menarik.
Dalam HTML sendiri, list merupakan elemen yang digunakan untuk menampilkan informasi secara terstruktur. Elemen ini sering digunakan untuk menyusun data seperti menu navigasi, daftar fitur, langkah-langkah tutorial, atau poin-poin penting agar informasi lebih rapi dan mudah dipahami.
Secara umum terdapat tiga jenis elemen list dalam HTML, yaitu unordered list <ul>, ordered list <ol>, dan list item <li>. Dengan bantuan CSS List, tampilan daftar dapat dibuat lebih rapi, menarik, serta selaras dengan desain website secara keseluruhan sehingga dapat meningkatkan keterbacaan dan pengalaman pengguna.
Fungsi CSS List
Fungsi CSS List untuk desain website digunakan untuk mengatur dan menyesuaikan desain daftar agar lebih menarik, rapi, dan selaras dengan konsep dan tema website.
Dengan CSS, elemen list seperti <ul>, <ol>, dan <li> dapat diubah tampilannya, misalnya menghilangkan bullet default, mengganti dengan ikon, mengatur jarak antar item, membuat menu navigasi horizontal dan vertikal, hingga menambahkan efek hover.
Hal ini sangat penting terutama dalam pembuatan menu navigasi, sidebar, maupun daftar konten, sehingga tampilan website menjadi lebih terstruktur, responsif, dan profesional.
Contoh Implementasi
Seperti yang dibahas sebelumnya, Secara default, browser memberikan tampilan list standar dan biasanya kurang menarik jika diakses oleh pengguna. Dengan CSS List kita akan belajar untuk mendesain agar tampilannya lebih menarik.
Berikut contoh kode html list default:
<h3>An Unordered HTML List</h3>
<ul>
<li>Kopi Tubruk</li>
<li>Kopi Joss</li>
<li>Kopi Luwak</li>
<li>Kopi Gayo</li>
<li>Kopi Mandailing</li>
<li>Kopi Sidikalang</li>
<li>Kopi Toraja</li>
</ul>
<h3>An Ordered HTML List</h3>
<ol>
<li>Latte</li>
<li>Cappuccino</li>
<li>Matcha Latte</li>
<li>Caramel Macchiato</li>
<li>Dalgona</li>
<li>Sea Salt Coffee</li>
<li>Butterscotch Latte</li>
</ol> Dan ketika di akses menggunakan browser, tampilannya seperti berikut dan kurang menarik.
An Unordered HTML List
- Kopi Tubruk
- Kopi Joss
- Kopi Luwak
- Kopi Gayo
- Kopi Mandailing
- Kopi Sidikalang
- Kopi Toraja
An Ordered HTML List
- Latte
- Cappuccino
- Matcha Latte
- Caramel Macchiato
- Dalgona
- Sea Salt Coffee
- Butterscotch Latte
Jika menggunakan CSS List, Anda dapat merubah style CSS untuk list agar tidak seperti default, dan juga efek seperti ketika mouse di hover agar terlihat lebih menarik, Berikut contoh kode html list menggunakan CSS List:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<style>
.css-list-container {
padding: 10px;
border-radius: 10px;
background-color: bisque;
}
.css-list-menu {
display: flex;
}
.css-list {
width: 50%;
padding: 10px;
}
.css-list-container ul {
margin: 0;
padding: 0;
list-style: none;
}
.css-list-container h3 {
margin: 10px 0px;
display: flex;
align-items: center;
}
.css-list-container h2 {
display: flex;
align-items: center;
justify-content: center;
}
.css-list-container li a {
display: flex;
justify-content: space-between;
margin: 5px 0;
padding: 10px;
border-radius: 25px;
background-color: #7e3b02;
color: white;
}
.css-list-container li a:hover {
background-color: #a56b39;
}
.css-list-container {
padding: 10px;
border-radius: 10px;
background-color: bisque;
}
.css-list-container .material-symbols-outlined {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="css-list-container">
<H2><span class="material-symbols-outlined"> menu_book_2 </span>Daftar Menu</H2>
<div class="css-list-menu">
<div class="css-list">
<h3><span class="material-symbols-outlined"> coffee </span>Kopi Tradisional Indonesia</h3>
<ul>
<li><a><span>Kopi Tubruk</span><span>15K</span></a></li>
<li><a><span>Kopi Joss</span><span>15K</span></a></li>
<li><a><span>Kopi Luwak</span><span>15K</span></a></li>
<li><a><span>Kopi Gayo</span><span>15K</span></a></li>
<li><a><span>Kopi Mandailing</span><span>15K</span></a></li>
<li><a><span>Kopi Sidikalang</span><span>15K</span></a></li>
<li><a><span>Kopi Toraja</span><span>15K</span></a></li>
</ul>
</div>
<div class="css-list">
<h3><span class="material-symbols-outlined">coffee_maker</span>Kopi Cafe & Kekinian</h3>
<ul>
<li><a><span>Latte</span><span>25K</span></a></li>
<li><a><span>Cappuccino</span><span>25K</span></a></li>
<li><a><span>Matcha Latte</span><span>25K</span></a></li>
<li><a><span>Caramel Macchiato</span><span>25K</span></a></li>
<li><a><span>Dalgona</span><span>25K</span></a></li>
<li><a><span>Sea Salt Coffee</span><span>25K</span></a></li>
<li><a><span>Butterscotch Latte</span><span>25K</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>Dan ketika di akses dengan browser, tampilannya akan lebih menarik dan rapi sesuai dengan visual tema website. Berikut contohnya:
FAQ
Berikut adalah beberapa pertanyaan popular tentang CSS Lists.
Apa itu CSS List?
CSS List adalah kumpulan properti CSS yang digunakan untuk mengatur tampilan elemen daftar HTML seperti ul, ol, dan li. Dengan CSS List, developer dapat mengubah jenis penanda daftar, posisi marker, serta mengganti marker dengan gambar agar tampilan daftar lebih menarik.
Apa saja properti yang digunakan pada CSS List?
Beberapa properti utama pada CSS List adalah list-style-type, list-style-position, dan list-style-image. Properti tersebut digunakan untuk mengatur bentuk marker, posisi marker, dan mengganti marker dengan gambar.
Apa fungsi list-style-type dalam CSS?
Properti list-style-type digunakan untuk menentukan jenis marker atau penanda pada daftar. Contohnya seperti disc, circle, square, decimal, atau bahkan none jika ingin menghilangkan marker.
Apa perbedaan ul dan ol dalam HTML List?
Elemen ul digunakan untuk membuat daftar tanpa urutan (unordered list), sedangkan ol digunakan untuk daftar yang memiliki urutan (ordered list) seperti angka atau huruf.
Kapan CSS List digunakan dalam pembuatan website?
CSS List sering digunakan saat menampilkan navigasi menu, daftar fitur produk, langkah-langkah tutorial, atau informasi lain yang berbentuk daftar agar lebih mudah dibaca oleh pengguna.
Kesimpulan
CSS List adalah fitur penting dalam CSS yang digunakan untuk mengatur tampilan elemen daftar pada halaman web, seperti <ul>, <ol>, dan <li>. Dengan memanfaatkan berbagai properti seperti list-style-type, list-style-position, dan list-style-image, Anda dapat menyesuaikan bentuk, posisi, hingga tampilan penanda daftar sesuai kebutuhan desain.
Penggunaan CSS List yang tepat tidak hanya membuat tampilan daftar menjadi lebih rapi dan menarik, tetapi juga membantu meningkatkan keterbacaan serta memperjelas struktur informasi pada halaman website.
Demikian artikel kami tentang belajar CSS bagian 24 tentang CSS Lists. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat belajar.
