Belajar CSS Part 15 : CSS Lists

CSS LISTS

Assalamu'alaikum Wr. Wb

Hai sobat semua, terima kasih sudah mengunjungi blog saya ini. Sebelumny kita sudah belajar mengenai Link pada CSS. Untuk materi selanjutnya kita akan membahas tentang List pada CSS.

Langsung saja yuk...

Dalam HTML, ada dua jenis utama dari list :

1. Unrodered List (<ul>) - ditandai dengan bullets
2. Ordered List (<ol>) - ditandai dengan angka atau huruf

Properti CSS List memungkinkan kita untuk :

• Set list item yang berbeda untuk ordered list 
• Set list item yang berbeda untuk unordered list
• Mengatur foto sebagai item list penanda
• Menambahkan warna latar belakang untuk list dan list item 

TIPE LIST STYLE 
Properti list-style-type menentukan jenis item list penanda.
Contoh :

Hasilnya :

POSISI LIST STYLE
Properti list-style-position menentukan apakah penanda list/daftar item akan muncul didalam atau diluar aliran konten :

Contoh :

Hasilnya : 

LIST STYLE DENGAN WARNA
Kita juga bisa menambahkan warna pada list, agar terlihat lebih menarik.

Contoh :

Hasilnya :

Silakan dicoba sendiri ya sobat semua. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.

• Kesimpulan

Terdapat 2 macam list/daftar yaitu Ordered List dan Unordered list, dengan menggunakan CSS kita dapat mengatur tipe dari list, menambahkan gaya dan menambahkan warna background dari item list.


Referensi :
http://www.w3schools.com/css/css_list.asp

Wasalamu'alaikum Wr. Wb