Mengatur List Dengan CSS

Jika pada tutorial di html lalu kita telah memahami bagaimana cara membuat daftar/list, kali ini kita akan membahas bagaimana cara mengatur list dengan css antara unordered list dan ordered list. Untuk yang belum tahu bagaimana cara membuat daftar atau list dapat beralih ke artikel html sebelumnya.

Berikut ini daftar properti-properti yang akan kita bahas pada tutorial cara mengatur list dengan css ini.

• list-style-type digunakan untuk menentukan bentuk penanda daftar list
• list-style-position digunakan untuk menentukan posisi penanda daftar list
• list-style-image digunakan untuk mengubah bentuk penanda daftar list menjadi gambar
• list-style properti singkat untuk menentukan atau mengatur list dengan css dalam satu deklarasi

Dari properti-properti diatas akan kita bahas secara detail agar lebih mudah dipahami…

Cara Mengatur List Dengan CSS

Pada tutorial ini penulis anggap bahwa pembaca sudah memahami bagaimana cara membuat daftar/list dengan html karena kita akan membahas untuk membuat style tambahan dengan css yaitu cara mengatur list dengan css.

Properti list-style-type di css

Penggunaan properti list-style-type digunakan untuk menentukan bentuk atau gaya penanda atau marker pada tiap list nantinya, karena telah kita ketahui bahwa ada dua tipe list yang bisa digunakan yaitu unordered list dan ordered list. Berikut ini masing-masing nilai yang bisa digunakan untuk menentukan bentuk penanda pada daftar/list agar dapat mengatur list tersebut dengan css.

Unordered list

Berikut ini daftar-daftar tipe penanda yang bisa digunakan untuk menentukan bentuk unordered list dengan css.

Nilai	Keterangan
None	Digunakan untuk menghilangkan tanda pada list
Disc (default)	Digunakan untuk menampilkan tanda lingkaran solid
Circle	Digunakan untuk menampilkan tanda lingkaran
Square	Digunakan untuk menampilkan tanda kotak solid

Ordered list

Lalu berikut ini daftar bentuk tanda yang bisa digunakan untuk menentukan bentuk ordered list (daftar terurut) dengan css.

Nilai	Keterangan	Contoh
Decimal	Angka	1, 2, 3, 4, 5
decimal-leading-zero	Pengurutan angka dengan 0 didepan	01, 02, 03, 04, 05
lower-alpha	Pengurutan alfabet dengan huruf kecil	a, b, c, d, e
upper-alpha	Pengurutan alfabet dengan huruf besar	A, B, C, D, E
lower-roman	Pengurutan romawi dengan huruf kecil	i, ii, iii, iv, v
upper-roman	Pengurutan romawi dengan huruf besar	I, II, III, IV, V
lower-greek	Pengurutan menggunakan huruf kecil yunani	alpha, beta, gamma, dan lain-lain
lower-latin	Pengurutan menggunakan huruf kecil latin	a, b, c, d, e
upper-latin	Pengurutan menggunakan huruf besar latin	A, B, C, D, E

Sebenarnya untuk penanda ordered list memiliki banyak bentuk, namun untuk standarisasinya tidak semua digunakan, hanya yang seperlunya saja, selain itu nanti bisa dikembangkan sendiri. Berikut ini contoh penggunaan list-style-type untuk mengatur bentuk penanda pada list atau daftar html.

<ul style="list-style-type: circle">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ul>
 <ul style="list-style-type: square;">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ul>
 <ol style="list-style-type: decimal">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ol>
 <ol style="list-style-type: lower-alpha">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ol>
 <ol style="list-style-type: upper-roman">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ol>Code language: HTML, XML (xml)

Kode diatas akan menampilkan bentuk penanda list atau daftar html seperti gambar dibawah ini.

Untuk penggunaannya sendiri bisa dengan cara inline style atau bisa juga dengan menggunakan metode lainnya, tidak harus sesuai dengan tutorial diatas, itu tergantung bagaimana kasus yang akan dihadapi.

Properti list-style-position di css

Properti list-style-position di css digunakan untuk menentukan posisi penanda urutan daftar atau list, apakah berada didalam atau diluar urutan daftar tersebut, berikut ini adalah nilai-nilai yang bisa digunakan untuk menentukan posisi penanda.

Nilai	Keterangan
outside (default)	Penanda akan berada diluar urutan daftar atau list
inside	Penanda akan berada didalam urutan daftar atau list

Lalu dibawah ini adalah contoh source code cara penggunaan properti list-style-position…

<ul style="list-style-type: circle; list-style-position: outside;">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ul>
 <ol style="list-style-type: decimal; list-style-position: inside;">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ol>Code language: HTML, XML (xml)

Hasil dari kode diatas…

Kalau dilihat sekilas hanya posisi inside bergeser sedikit lebih menjorok kedalam dibandingkan dengan posisi outside, namun sebenarnya apabila ditambahkan sebuah border maka akan terlihat perbedaan dari kedua posisi tersebut, berikut ini kode setelah ditambahkan border kiri.

<ul style="list-style-type: circle; list-style-position: outside;">
    <li style="border-left: 1px solid #000">PHP</li>
    <li style="border-left: 1px solid #000">HTML</li>
    <li style="border-left: 1px solid #000">JAVASCRIPT</li>
    <li style="border-left: 1px solid #000">CSS</li>
 </ul>
 <ol style="list-style-type: decimal; list-style-position: inside;">
    <li style="border-left: 1px solid #000">PHP</li>
    <li style="border-left: 1px solid #000">HTML</li>
    <li style="border-left: 1px solid #000">JAVASCRIPT</li>
    <li style="border-left: 1px solid #000">CSS</li>
 </ol>Code language: HTML, XML (xml)

Berikut ini tampilan setelah ditambahkan border kiri…

Terlihat perbedaan dari kedua penggunaan posisi list dengan css, bahwa outside berada diluar dari konten daftar sedangkan inside penanda berada didalam batas daftar konten.

Properti list-style-image di css

Fungsi properti list-style-image adalah untuk mengganti penanda bawaan css dengan sebuah gambar penanda yang bisa diambil langsung dari direktori server website, berikut ini contoh source-code list-style-image.

<ul>
    <li style="list-style-image: url('image/marker.jpg')">PHP</li>
    <li style="list-style-image: url('image/marker.jpg')">HTML</li>
    <li style="list-style-image: url('image/marker.jpg')">JAVASCRIPT</li>
    <li style="list-style-image: url('image/marker.jpg')">CSS</li>
 </ul>Code language: HTML, XML (xml)

Penggunaan list-style-image diletakan berada diurutan atau poin-poin daftar, dimana sebuah gambar telah ditempatkan dengan benar dengan cara mendeklarasikan menggunakan fungsi url sesuai letak gambar. Berikut ini hasilnya.

Properti list-style di css

Properti list-style sebenarnya dapat mewakili kedua buah properti pertama diatas, sehingga penggunaannya bisa lebih singkat dan dapat mempercepat penulisan sintaks css untuk mengatur list dengan css ini. Berikut ini contohnya.

<ul style="list-style: outside circle;">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ul>
 <ol style="list-style: inside decimal;">
    <li>PHP</li>
    <li>HTML</li>
    <li>JAVASCRIPT</li>
    <li>CSS</li>
 </ol>Code language: HTML, XML (xml)

Hasil dari kode penggunaan properti list-style tersebut sama saja dengan penggunaan sebelumnya, hanya saja penggunaannya lebih singkat dibandingkan dengan kode sebelumnya.

Selain itu penggunaan list-style tidak harus atau tidak wajib dengan memberikan nilai berupa dua deklarasi nilai properti tersebut, bisa menggunaan salah satu dari nilai properti, misalnya.

list-style: outside;Code language: PHP (php)

Kode diatas hasilnya sama saja seperti menggunaan list-style-position, penulis sendiri tidak tahu efek apa yang terjadi dengan penggunaan tersebut. Demikian tutorial cara mengatur list atau daftar html dengan css.