{"id":61601,"date":"2026-03-12T09:14:10","date_gmt":"2026-03-12T02:14:10","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=61601"},"modified":"2026-03-12T09:14:53","modified_gmt":"2026-03-12T02:14:53","slug":"belajar-css-bagian-24","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-24\/","title":{"rendered":"Belajar CSS Bagian 24: Mengenal CSS List"},"content":{"rendered":"\n

Setelah pada bagian sebelumnya kita belajar tentang cara membuat dan mengatur tampilan CSS Button<\/a><\/strong>, pada seri Belajar CSS Bagian 24 ini kita akan membahas elemen lain yang juga cukup sering digunakan dalam pembuatan website, yaitu CSS List<\/strong>. <\/p>\n\n\n\n

List atau daftar biasanya digunakan untuk menampilkan informasi secara terstruktur, seperti menu navigasi, daftar fitur, hingga daftar langkah dalam sebuah tutorial.<\/p>\n\n\n\n

Dengan menggunakan CSS, kita tidak hanya bisa menampilkan list secara standar, tetapi juga dapat mengatur tampilan, posisi, hingga style marker<\/em> agar terlihat lebih menarik dan sesuai dengan desain website yang dibuat.<\/p>\n\n\n\n

Apa Itu CSS List? <\/h2>\n\n\n\n

CSS List adalah sekumpulan properti dalam CSS yang digunakan untuk mengatur tampilan daftar (list) pada elemen HTML. Secara default<\/em>, 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.<\/p>\n\n\n\n

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 <\/em>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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Secara umum terdapat tiga jenis elemen list dalam HTML, yaitu unordered list <ul><\/code><\/strong>, ordered list <ol><\/code><\/strong>, dan list item <li><\/code><\/strong>. 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.<\/p>\n\n\n\n

Fungsi CSS List<\/h2>\n\n\n\n

Fungsi CSS List untuk desain website digunakan untuk mengatur dan menyesuaikan desain daftar agar lebih menarik, rapi, dan selaras dengan konsep dan tema website. <\/p>\n\n\n\n

Dengan CSS, elemen list seperti <ul><\/code>, <ol><\/code>, dan <li><\/code> dapat diubah tampilannya, misalnya menghilangkan bullet default, mengganti dengan ikon, mengatur jarak antar item, membuat menu navigasi horizontal dan vertikal, hingga menambahkan efek hover. <\/p>\n\n\n\n

Hal ini sangat penting terutama dalam pembuatan menu navigasi, sidebar, maupun daftar konten, sehingga tampilan website menjadi lebih terstruktur, responsif, dan profesional.<\/p>\n\n\n\n

Contoh Implementasi<\/h2>\n\n\n\n

Seperti yang dibahas sebelumnya, Secara default<\/em>, 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.<\/p>\n\n\n\n

Berikut contoh kode html list default:<\/p>\n\n\n\n

<h3>An Unordered HTML List<\/h3>\n\n<ul>\n  <li>Kopi Tubruk<\/li>\n  <li>Kopi Joss<\/li>\n  <li>Kopi Luwak<\/li>\n  <li>Kopi Gayo<\/li>\n  <li>Kopi Mandailing<\/li>\n  <li>Kopi Sidikalang<\/li>\n  <li>Kopi Toraja<\/li>\n<\/ul>  \n\n<h3>An Ordered HTML List<\/h3>\n\n<ol>\n  <li>Latte<\/li>\n  <li>Cappuccino<\/li>\n  <li>Matcha Latte<\/li>\n  <li>Caramel Macchiato<\/li>\n  <li>Dalgona<\/li>\n  <li>Sea Salt Coffee<\/li>\n  <li>Butterscotch Latte<\/li>\n<\/ol> <\/code><\/pre>\n\n\n\n
Dan ketika di akses menggunakan browser<\/em>, tampilannya seperti berikut dan kurang menarik.<\/p>\n\n\n\n
An Unordered HTML List<\/h3>\n\n
    \n  
  • Kopi Tubruk<\/li>\n  
  • Kopi Joss<\/li>\n  
  • Kopi Luwak<\/li>\n  
  • Kopi Gayo<\/li>\n  
  • Kopi Mandailing<\/li>\n  
  • Kopi Sidikalang<\/li>\n  
  • Kopi Toraja<\/li>\n<\/ul>  \n\n
    An Ordered HTML List<\/h3>\n\n
      \n  
    1. Latte<\/li>\n  
    2. Cappuccino<\/li>\n  
    3. Matcha Latte<\/li>\n  
    4. Caramel Macchiato<\/li>\n  
    5. Dalgona<\/li>\n  
    6. Sea Salt Coffee<\/li>\n  
    7. Butterscotch Latte<\/li>\n<\/ol>\n\n\n\n
      Jika menggunakan CSS List, Anda dapat merubah style CSS untuk list agar tidak seperti default<\/em>, dan juga efek seperti ketika mouse di hover agar terlihat lebih menarik, Berikut contoh kode html list menggunakan CSS List:<\/p>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<head>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined\" rel=\"stylesheet\">    \n<style>\n.css-list-container {\n    padding: 10px;\n    border-radius: 10px;\n    background-color: bisque;\n}\n\n.css-list-menu {\n    display: flex;\n}\n\n.css-list {\n    width: 50%;\n    padding: 10px;\n}\n.css-list-container ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.css-list-container h3 {\n    margin: 10px 0px;\n    display: flex;\n    align-items: center;\n}\n\n.css-list-container h2 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.css-list-container li a {\n    display: flex;\n    justify-content: space-between;\n    margin: 5px 0;\n    padding: 10px;\n    border-radius: 25px;\n    background-color: #7e3b02;\n    color: white;\n}\n\n.css-list-container li a:hover {\n    background-color: #a56b39;\n}\n.css-list-container {\n    padding: 10px;\n    border-radius: 10px;\n    background-color: bisque;\n}\n.css-list-container .material-symbols-outlined {\n    margin-right: 5px;\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"css-list-container\">\n<H2><span class=\"material-symbols-outlined\"> menu_book_2 <\/span>Daftar Menu<\/H2>\n<div class=\"css-list-menu\">\n<div class=\"css-list\">\n<h3><span class=\"material-symbols-outlined\"> coffee <\/span>Kopi Tradisional Indonesia<\/h3>\n<ul>\n  <li><a><span>Kopi Tubruk<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Joss<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Luwak<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Gayo<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Mandailing<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Sidikalang<\/span><span>15K<\/span><\/a><\/li>\n  <li><a><span>Kopi Toraja<\/span><span>15K<\/span><\/a><\/li>\n<\/ul>  \n<\/div>\n<div class=\"css-list\">\n<h3><span class=\"material-symbols-outlined\">coffee_maker<\/span>Kopi Cafe & Kekinian<\/h3>\n<ul>\n  <li><a><span>Latte<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Cappuccino<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Matcha Latte<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Caramel Macchiato<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Dalgona<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Sea Salt Coffee<\/span><span>25K<\/span><\/a><\/li>\n  <li><a><span>Butterscotch Latte<\/span><span>25K<\/span><\/a><\/li>\n<\/ul> \n<\/div>\n<\/div>\n<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      Dan ketika di akses dengan browser, tampilannya akan lebih menarik dan rapi sesuai dengan visual tema website. Berikut contohnya:<\/p>\n\n\n\n\n    \n