Belajar CSS Part 8: Cara Mengubah List Style dengan CSS

Ditulis oleh Irvan Nurfazri

Selamat datang. Salam jumpa kembali di pertemuan yang ke-8 dalam sesi belajar CSS. Pada pertemuan ini kita akan membahas Cara Mengubah List Style dengan CSS.

CSS mempunyai kemampuan untuk mengubah gaya list HTML. CSS sangat dibutuhkan ketika kamu ingin membuat daftar list dengan gaya atau model tertentu. Misalnya, list yang berbentuk titik hitam, angka romawi dan huruf.

Dengan menggunakan CSS teman – teman bisa memanipulasi list HTML dengan mengubah style listnya. Property yang bisa digunakan adalah “list-style-type


4 CONTOH LIST STYLE HTML

Berikut 4 contoh list style HTML yang bisa kamu pelajari

1. List Style Type Square

Untuk membuat list style kotak kita membuat 2 buah file index.html dan style.css

index.html

style.css

Hasilnya …

list style type square - #irvangen
list style type square – #irvangen

2. List Style Type Circle

Untuk membuat list style lingkaran kita membuat 2 buah file index.html dan style.css

index.html

style.css

Hasilnya …

list style type circle - #irvangen
list style type circle – #irvangen

3. List Style Type Alpha

Untuk membuat list style huruf kita membuat 2 buah file index.html dan style.css

index.html

style.css

Hasilnya …

list style type alpha - #irvangen
list style type alpha – #irvangen

4. List Style Type Roman

Untuk membuat list style romawi kita membuat 2 buah file index.html dan style.css

index.html

style.css

Hasilnya …

list style type roman - #irvangen
list style type roman – #irvangen

PROPERTI DAN VALUE

Bisa kamu perhatikan kembali pada properti list CSS berbeda – beda, nah disini saya akan jelaskan secara singkat untuk masing – masing properti list-style-type dibawah ini:

1. Membuat list dengan gaya kotak menggunakan properti dan value css:

2. Membuat list dengan gaya lingkaran menggunakan properti dan value css:

3. Membuat list dengan gaya huruf menggunakan properti dan value css:

4. Membuat list dengan gaya angka romawi menggunakan properti dan value css:

Nah sedikit tambahan saja apabila kamu ingin menghilangkan tanda list, gunakan property dan value list-style-type: none:


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang List Style Type CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Tentang Penulis

Irvan Nurfazri

No one can bring you true happiness except Allah

Instagram : ig.com/irvan_gen

Tinggalkan Komentar