Mengatur List Dengan CSS

Created at by Aris Munandar

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.

NilaiKeterangan
NoneDigunakan untuk menghilangkan tanda pada list
Disc (default)Digunakan untuk menampilkan tanda lingkaran solid
CircleDigunakan untuk menampilkan tanda lingkaran
SquareDigunakan 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.

NilaiKeteranganContoh
DecimalAngka1, 2, 3, 4, 5
decimal-leading-zeroPengurutan angka dengan 0 didepan01, 02, 03, 04, 05
lower-alphaPengurutan alfabet dengan huruf kecila, b, c, d, e
upper-alphaPengurutan alfabet dengan huruf besarA, B, C, D, E
lower-romanPengurutan romawi dengan huruf kecili, ii, iii, iv, v
upper-romanPengurutan romawi dengan huruf besarI, II, III, IV, V
lower-greekPengurutan menggunakan huruf kecil yunanialpha, beta, gamma, dan lain-lain
lower-latinPengurutan menggunakan huruf kecil latina, b, c, d, e
upper-latinPengurutan menggunakan huruf besar latinA, 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.

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.

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.

NilaiKeterangan
outside (default)Penanda akan berada diluar urutan daftar atau list
insidePenanda 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…

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>Code language: HTML, XML (xml)

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>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.

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>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.

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

1 Comments

Oim

Oim

Alhamdulillah.. dapat inspirasi & solusi dari sini. yang ternyata cukup menambahkan kode ini, list-style-position: inside terima kasih
Reply #1897

Leave comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading