Mengubah list dengan CSS

Ganti penanda list: kotak, lingkaran, romawi, atau hilang.

Pahami konsepnya

Penanda daftar HTML — bullet dan angka — sepenuhnya bisa diubah CSS lewat properti list-style-type. Untuk daftar tak berurut (ul): disc (titik bawaan), circle (lingkaran berongga), square (kotak), dan none yang menghapus penanda. Untuk daftar berurut (ol): decimal (1, 2, 3), lower/upper-alpha (a/b/c atau A/B/C), lower/upper-roman (i, ii, iii atau I, II, III).

Nilai none adalah pintu menuju hal lain: tanpa bullet, sebuah ul siap diubah menjadi menu navigasi horizontal atau daftar tag pil — penanda lama diganti dekorasi buatan seperti warna latar dan jarak. Hampir semua menu website dibangun dari "ul tanpa bullet" ini.

Dua properti pendamping menyempurnakan kontrol: list-style-position menentukan apakah penanda berada di dalam (inside) atau di luar (outside) kotak isi, dan list-style-image mengganti penanda dengan gambar custom. Keduanya jarang dibutuhkan — 90% kebutuhan selesai di list-style-type saja.

Coba contoh kode

ul.makanan  { list-style-type: square; }
ul.minuman  { list-style-type: circle; }
ol.bab      { list-style-type: upper-roman; }
ol.huruf    { list-style-type: lower-alpha; }

ul.menu {
  list-style-type: none;      /* polos: siap jadi navigasi */
  padding: 0;
}
ul.menu li { display: inline-block; margin-right: 12px; }

Empat kelas pertama mengganti penanda bawaan dengan sekali deklarasi. Blok ul.menu menunjukkan pola paling produktif: none memoles daftar, padding: 0 meluruhkan indentasi bawaan, lalu li dibuat sebaris — hasilnya kerangka menu navigasi yang tinggal diberi warna.

Latihan singkat

Ubah satu daftar menjadi romawi besar, satu lagi lingkaran, lalu bangun menu horizontal dari ul tanpa penanda.