Kita bisa mengatur style list pada ordered lists(ol) dan unordered lists(ul) dengan CSS. Ada beberapa properti yang disediakan seperti untuk mengatur tanda item list pada ordered lists dan unordered lists dan membuat tanda item list ordered lists dan unordered lists dengan gambar. Selain itu kita juga bisa mengatur penempatan tanda list pada oldan ul.
Sebelumnya perlu diingat kembali tentang List pada HTML ada dua, yaitu ordered lists dan unordered lists. Ordered lists adalah list dengan tanda item list berupa angka atau huruf sedangkan unordered lists adalah list dengan tanda item list berupa bullet/dot.
Ada dua cara dalam mengatur tampilan list OL dan UL dengan CSS, yaitu mengatur tampilan list dengan menggunakan properti list-style-type dan list-style-image.
1. list-style-type
Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan library dari CSS. Ada beberapa model yang bisa dipilih seperti circle (lingkaran) atau square (kotak) untuk tampilan unordered lists dan upper-roman atau lower-alpha untuk tampilan ordered lists.
Contoh penggunaan CSS list-style-type untuk ordered lists(ol) :
ul.x {
list-style-type: circle;
}
ul.y {
list-style-type: square;
}
Contoh penggunaan CSS list-style-type untuk unordered lists(ul) :
ol.x {
list-style-type: upper-roman;
}
ol.y {
list-style-type: lower-aplha;
}
Kita bisa berlatih CSS list-style-type disini >>
Berikut ini beberapa model yang bisa dipilih untuk tampilan ordered lists(ol) dan unordered lists(ul)
Value | Deskripsi |
---|---|
disc | tanda default, bertanda lingkaran berisi warna hitam penuh. |
armenian | tanda penomoran tradisional armenian. |
circle | tanda lingkaran tanpa isi. |
cjk-ideographic | tanda nomor ideographic. |
decimal | tanda nomor biasa. |
decimal-leading-zero | tanda desimal dengan leading angka seperti 01,02,03 dan seterusnya. |
georgian | tanda penomoran tradisional georgian. |
hebrew | tanda penomoran tradisional yahudi. |
hiragana | tanda penomoran tradisional hiragana. |
hiragana-iroha | tanda penomoran tradisional hiragana-iroha. |
katakana | tanda penomoran tradisional katakana. |
katakana-iroha | tanda penomoran tradisional katakana-iroha. |
lower-alpha | tanda huruf kecil biasa. |
lower-greek | tanda huruf kecil yunani. |
lower-latin | tanda huruf kecil latin. |
lower-roman | tanda angka romawi kecil. |
none | tanpa tanda atau tanpa tanda list. |
square | tanda kotak. |
upper-alpha | tanda huruf besar biasa. |
upper-latin | tanda huruf besar latin. |
upper-roman | tanda angka romawi besar. |
2. list-style-image
Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan gambar.
Contoh penggunaan CSS list-style-image :
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(dot.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
Kita bisa berlatih CSS list-style-image disini >>
3. list-style-position
Adalah properti CSS yang digunakan untuk mengatur penempatan tanda list pada UL dan OL. Posisi tanda bisa ditaruh didalam list atau diluar list. Untuk didalam list diberi nilai inside dan diluar list diberi nilai outside.
Contoh penggunaan CSS list-style-position :
ul {
list-style-position: inside;
}
Kita bisa berlatih CSS list-style-position disini >>
2. list-style
Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL dengan penulisan secara singkat yang mencakup keseluruhan properti diatas.
Contoh penggunaan CSS list-style :
ul {
list-style: circle inside url("dot.gif");
}
Kita bisa berlatih CSS list-style disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
- //www.w3schools.com/css/css_list.asp
- //www.w3schools.com/cssref/pr_list-style-type.asp
- //www.w3schools.com/cssref/pr_list-style-position.asp