Belajar CSS Part 8: Cara Mengubah List Style dengan CSS


Belajar CSS Part 8: Cara Mengubah List Style dengan CSS 1

IRVAN GEN – 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.

Baca: Cara Mengubah Border 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.

Nilai kualitas konten

Belajar CSS Part 8: Cara Mengubah List Style dengan CSS | IRVAN GEN
Belajar CSS Part 8: Cara Mengubah List Style dengan CSS 3
IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-8 dalam sesi belajar CSS. Pada pertemuan ini kita akan membahas Cara Mengubah List Sty
Editor's Rating:
0


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *