Tutorial CSS : Membuat List di CSS

Apa itu list ?

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.

List bagus dari sudut pandang struktural karena membantu membuat dokumen yang terstruktur dengan baik dan lebih mudah diakses. List juga mempunyai nilai semantik didalamnya.

Jenis-jenis list

Didalam HTML terdapat tiga jenis gaya list yang berbeda dan mempunyai nilai makna semantik didalamnya. Berikut tiga jenis list yang bisa Anda pilih:

• Unordered list (<ul>) – list item ditandai dengan peluru
• Ordered list (<ol>) – list item ditandai dengan nomor
• Definition list (<dl>) – list item dengan deskripsi setiap list

Selain tiga jenis list yang tersedia dalam HTML, ada beberapa cara untuk mengatur gaya list ini dengan CSS. Misalnya, kita dapat memilih jenis penanda yang akan digunakan pada list. Penanda bisa berbentuk persegi, bulat, numerik, abjad, atau mungkin tidak ada.

Bukan hanya itu, Anda juga bisa menentukan apakah list harus ditampilkan secara vertikal atau horizontal. Semua pilihan ini memainkan peran penting dalam design halaman web.

Mengatur style list

Secara default, list dalam ordered list ditandai sebagai nomor ( 1, 2, 3 dll. ), sedangkan list dalam unordered list ditandai sebagai peluru. Namun, dengan properti list-style-type Anda bisa mengatur atau mengganti penanda type listnya.

Kemungkinan nilai untuk properti ini adalah: circle, square, upper-roman, lower-alpha dll.

Contohnya:

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;
        }

Hasilnya:

• Contoh list circle
• Contoh list square
• Contoh list upper-roman
• Contoh list lower-alpha

Anda bisa menggunakan properti list-style-type:none untuk menghapus list style bawaan <ol> atau <ul>.

Posisi List Marker

Property list-style-positon menentukan posisi dari marker. Nilainya bisa outside atau inside.

Contohnya:

List Position Outside

• Coffee - A brewed drink prepared from roasted coffee beans...
• Tea
• Coca-cola

List Position Inside

• Coffee - A brewed drink prepared from roasted coffee beans...
• Tea
• Coca-cola

List Shorthand

Dengan list shorthand kita bisa mempersingkat penulisan property list.

Contohnya:

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

Ketika menggunakan shorthand propery, susunan dari nilai adalah:

1. list-style-type
2. list-style-position
3. list-style-image

Jika salah satu value tidak ditentukan, maka akan menggunakan value defaultnya.

Nah itulah pembahasan tentang properti list dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang list dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS