List CSS

List digunakan untuk membuat sebuah daftar, dalam HTML ada dua jenis list utama, yaitu list tidak berurutan <ul> dan list berurutan <ol>. CSS pada list digunakan untuk membuat tampilan list (daftar) lebih menarik.

Properti List HTML dan List CSS

Dalam HTML, ada dua jenis list utama:

• List (daftar) tidak berurutan (<ul>) - item daftar ditandai dengan peluru
• List (daftar) terurut (<ol>) - item daftar ditandai dengan angka atau huruf

Properti list CSS memungkinkan Anda untuk:

• Menetapkan penanda item list (daftar) yang berbeda untuk daftar yang berurutan
• Menetapkan penanda item list (daftar) yang berbeda untuk daftar yang tidak berurutan
• Menetapkan gambar sebagai penanda item daftar
• Menetapkan warna latar belakang ke list dan item list

Penanda Item List yang Berbeda

Properti list-style-type menetapkan jenis item list penanda.

Contoh berikut menunjukkan beberapa penanda item daftar yang tersedia.

Contoh

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Gambar sebagai Penanda Item List

Properti list-style-image menetapkan gambar sebagai item list penanda.

Contoh

ul {
  list-style-image: url('sqpurple.gif');
}

Posisi Penanda Item List

Properti list-style-position menentukan posisi daftar item list (poin-poin).

"list-style-position: outside;" berarti bahwa poin-poin akan berada di luar item list. Awal setiap baris item list akan disejajarkan secara vertikal, dan ini secara default.

"list-style-position: inside;" berarti bahwa poin-poin akan berada di dalam item list. Karena ini adalah bagian dari item list, itu akan menjadi bagian dari teks dan mendorong teks di awal.

Contoh

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Menghapus Pengaturan Default

Properti list-style-type:none juga dapat digunakan untuk menghapus tanda peluru. Perhatikan bahwa list juga memiliki margin dan padding default. Untuk menghapus ini, tambahkan margin:0 dan padding:0 ke <ul> atau <ol>.

Contoh

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

List - Properti shorthand (singkatan)

Properti list-style adalah properti shorthand (singkatan). Ini digunakan untuk mengatur semua properti daftar dalam satu deklarasi.

Contoh

ul {
  list-style: square inside url("sqpurple.gif");
}

Saat menggunakan properti shorthand, urutan nilai properti adalah:

• list-style-type (jika list-style-image ditentukan, nilai properti ini akan ditampilkan jika gambar karena alasan tertentu tidak dapat ditampilkan)
• list-style-position (menentukan apakah penanda item daftar akan muncul di dalam atau di luar aliran konten)
• list-style-image (menentukan gambar sebagai penanda item daftar)

Jika salah satu nilai properti di atas tidak ada, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

List Style dengan Warna

Kita juga bisa membuat list dengan warna, agar terlihat sedikit lebih menarik.

Apa pun yang ditambahkan ke tag <ol> atau <ul>, memengaruhi seluruh daftar, sementara properti yang ditambahkan ke tag <li> akan memengaruhi item daftar individual.

Contoh

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Sumber referensi: w3schools