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
Baca juga:  Mengatur Tinggi Elemen Dengan CSS

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>

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

mengatur list dengan css

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.

Baca juga:  Mengatur Outline Dengan CSS

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>

Hasil dari kode diatas…

mengatur posisi penanda list html css

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>

Berikut ini tampilan setelah ditambahkan border kiri…

mengatur list dengan css

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>

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.

Baca juga:  Pengertian CSS (Cascading Style Sheets)

mengatur list dengan csc

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>

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

mengatur posisi penanda list html css

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;

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.