CSS List Daftar

Membuat list di html memang mudah, tapi tampilannya hanya gitu-gitu aja. Kita bisa mengganti style list dengan menggunakan CSS.

Secara default html, list itu ada dua tipe. Yaitu unordered list (UL) atau list yang tidak ada urutannya. Dan ordered list (OL) yaitu list yang ada urutannya.

Contoh UL itu seperti daftar dengan titik atau strip, sedangkan contoh OL seperti daftar dengan angka, huruf.

List Style Type

Properti pertama yang bisa digunakan adalah list-style-type. Property ini digunakan untuk mengganti style tipe list yang digunakan.

List Style Type UL

Pertama adalah tipe ul, ada tiga tipe list-style untuk ul. Berikut contohnya langsung:

<style type="text/css">
ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.square {list-style-type: square;}
</style>

<ul class='.circle'><li>circle</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='.square'><li>square</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='.disc'><li>disc</li><li>Cendol</li><li>Dawet</li></ul>

Hasilnya:

• Tipe: circle
• Cendol
• Dawet

• Tipe: square
• Cendol
• Dawet

• Tipe: disc
• Cendol
• Dawet

List Style Type OL

Untuk ol jauh lebih banyak lagi, karena ada banyak bahasa dan karakter di dunia ini.

<style type="text/css">
.upper-roman{ list-style-type:upper-roman; }
.upper-latin{ list-style-type:upper-latin; }
.upper-greek{ list-style-type:upper-greek; }
.upper-alpha{ list-style-type:upper-alpha; }
.square{ list-style-type:square; }
.none{ list-style-type:none; }
.lower-roman{ list-style-type:lower-roman; }
.lower-latin{ list-style-type:lower-latin; }
.lower-greek{ list-style-type:lower-greek; }
.lower-alpha{ list-style-type:lower-alpha; }
.katakana-iroha{ list-style-type:katakana-iroha; }
.katakana{ list-style-type:katakana; }
.initial{ list-style-type:initial; }
.inherit{ list-style-type:inherit; }
.hiragana-iroha{ list-style-type:hiragana-iroha; }
.hiragana{ list-style-type:hiragana; }
.hebrew{ list-style-type:hebrew; }
.georgian{ list-style-type:georgian; }
.decimal-leading-zero{ list-style-type:decimal-leading-zero; }
.decimal{ list-style-type:decimal; }
.cjk-ideographic{ list-style-type:cjk-ideographic; }
</style>

<ul class='upper-roman'><li>Type: upper-roman</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-latin'><li>Type: upper-latin</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-greek'><li>Type: upper-greek</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-alpha'><li>Type: upper-alpha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='square'><li>Type: square</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='none'><li>Type: none</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-roman'><li>Type: lower-roman</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-latin'><li>Type: lower-latin</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-greek'><li>Type: lower-greek</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-alpha'><li>Type: lower-alpha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='katakana-iroha'><li>Type: katakana-iroha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='katakana'><li>Type: katakana</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='initial'><li>Type: initial</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='inherit'><li>Type: inherit</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hiragana-iroha'><li>Type: hiragana-iroha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hiragana'><li>Type: hiragana</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hebrew'><li>Type: hebrew</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='georgian'><li>Type: georgian</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='decimal-leading-zero'><li>Type: decimal-leading-zero</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='decimal'><li>Type: decimal</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='cjk-ideographic'><li>Type: cjk-ideographic</li><li>Cendol</li><li>Dawet</li></ul>

Hasilnya:

List Style Gambar

Kita bisa mengganti list-style dengan gambar. Caranya sangat mudah tinggal menggunakan format atribut:

list-style-image: url("gambar.jpg");

Contoh, saya punya 3 gambar. Yaitu: hati, lampu dan bintang. Tapi, yang jelas kamu harus paham url gambar yang akan dipanggil.

Dalam hal ini, saya buat di satu folder supaya lebih mudah.

Maka kode CSSnya adalah:

<style type="text/css">
.hati{ list-style-image:url(hati.png); margin-bottom:30px}
.bintang{ list-style-image:url(bintang.png); margin-bottom:30px}
.lampu{ list-style-image:url(lampu.png); margin-bottom:30px}
.centang{ list-style-image:url(centang.png); margin-bottom:30px}
</style>
<ul class='hati'><li>Type: hati</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='bintang'><li>Type: bintang</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lampu'><li>Type: lampu</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='centang'><li>Type: lampu</li><li>Cendol</li><li>Dawet</li></ul>

Hasilnya adalah:

• Type: hati
• Cendol
• Dawet

• Type: bintang
• Cendol
• Dawet

• Type: lampu
• Cendol
• Dawet

• Type: centang
• Cendol
• Dawet

Jadi, kamu bisa mengganti dengan gambar sesuai keinginan kamu. Kalau mau centang / checklist tinggal diganti gambar yang centang.

Darimana saya dapat icon tersebut? Kunjungi situs: https://www.flaticon.com/. Kemudian pilih ukuran 16px.

Property CSS List

Berikut ini adalah tabel daftar property untuk list css:

Sekian tutorial mengatur list style dengan css. Semoga paham ya.!