Cara Mengatur Tampilan List dengan CSS

List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk daftar item.

Dalam web desain, list sering digunakan untuk membuat menu halaman website.

Pada tutorial sebelumnya sudah dibahas mengenai cara membuat list dengan HTML.

Selanjutnya kita akan membahas tentang cara mengatur tampilan list dengan CSS.

Mengatur Tampilan List

Dalam HTML, ada 2 tipe list yang bisa dibuat, yaitu:

unordered list (ul) - daftar list yang tidak berurutan, ditandai dengan titik bulat.
ordered list (ol) - daftar list yang berurutan, ditandai dengan angka atau huruf.

Contoh daftar list berurutan:

Contoh:

HTML CSS Preview

Sekarang mari kita coba untuk mengubah tampilan penanda pada daftar item di atas.

Caranya…

Gunakan properti CSS list-style-type

ul {
    list-style-type: circle;
}

Contoh:

HTML CSS Preview

<h3>List dengan type = square</h3>

<ul class="list-square">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

<h3>List dengan type = disc</h3>

<ul class="list-disc">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

<h3>List dengan type = none</h3>

<ul class="list-none">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

<h3>List dengan type = circle</h3>

<ul class="list-circle">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

List di atas merupakan contoh list tidak beraturan.

Lalu bagaimana cara mengubah list yang beraturan dengan urutan angka romawi seperti I, II, III atau dengan huruf besar seperti A, B, C?

Caranya sangat mudah…

Untuk membuat tampilan list dengan urutan seperti itu, kamu tinggal mengganti nilai properti CSS list-style-type dengan nilai upper-roman atau upper-latin.

Seperti berikut:

Contoh:

HTML CSS Preview

<h3>List dengan type = decimal (nilai default)</h3>

<ol class="list-decimal">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ol>

<h3>List dengan type = lower-latin (Alfabet Kecil)</h3>

<ol class="list-lower-latin">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ol>

<h3>List dengan type = upper-latin (Alfabet Kapital)</h3>

<ul class="list-upper-latin">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

<h3>List dengan type = lower-roman (Angka Romawi)</h3>

<ul class="list-lower-roman">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

<h3>List dengan type = upper-roman (Angka Romawi Kapital)</h3>

<ul class="list-upper-roman">
    <li>Huawai</li>
    <li>iPhone</li>
    <li>Samsung</li>
    <li>Oppo</li>
    <li>Vivo</li>
    <li>Xiaomi</li>
</ul>

.list-decimal {
    list-style-type: decimal;
}

.list-lower-latin {
    list-style-type: lower-latin;
}

.list-upper-latin {
    list-style-type: upper-latin;
}

.list-lower-roman {
    list-style-type: lower-roman;
}

.list-upper-roman {
    list-style-type: upper-roman;
}

Mengatur Tampilan List

Daftar Brand Smartphone

List dengan type = square

List dengan type = disc

List dengan type = none

List dengan type = circle

List dengan type = decimal (nilai default)

List dengan type = lower-latin (Alfabet Kecil)

List dengan type = upper-latin (Alfabet Kapital)

List dengan type = lower-roman (Angka Romawi)

List dengan type = upper-roman (Angka Romawi Kapital)