MulaiCode
CSS

CSS Lists

Pelajari cara mengubah tampilan daftar (list) HTML menggunakan CSS.

CSS Lists

CSS memungkinkan Anda mengatur tampilan daftar (<ul>, <ol>, dan <li>) seperti jenis bullet, posisi, dan jarak antar item.


1. Mengubah Jenis Bullet

Gunakan properti list-style-type untuk mengubah bentuk bullet pada daftar tidak berurutan (<ul>).

ul {
  list-style-type: square;
}

2. Menghapus Bullet

Anda bisa menghilangkan bullet dengan list-style-type: none.

ul {
  list-style-type: none;
  padding: 0;
}

3. Posisi Bullet

Gunakan list-style-position untuk menentukan posisi bullet: inside atau outside.

ul {
  list-style-position: inside;
}

4. Daftar Berurutan dengan Angka Romawi

Gunakan list-style-type: upper-roman untuk daftar <ol>.

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

5. Kustom Bullet dengan Gambar

Gunakan list-style-image untuk mengganti bullet dengan gambar kustom.

ul {
  list-style-image: url('https://www.mulaicode.com/images/checkmark.png');
}

Dengan CSS, Anda dapat membuat tampilan daftar menjadi lebih menarik dan sesuai dengan desain situs web Anda.

On this page