Membuat List dengan CSS

Membuat List Menggunakan CSS

Dalam masalah membuat list atau penomoran CSS lebih merumitkan dari pada HTML, tapi jika masalah memperindah tampilan CSS sangat mahir, karena sudah merupakan fungsinya. Pada pertemuan kali ini saya akan membahasa sedikit bagaimana cara membuat list atau penomoran dengan mengguanakan CSS dan sedikit menambahkan style. 

Penomoran CSS dengan Tampilan Biasa
Contoh CSSnya :

<style>
ul.a {list-style-type: circle;} /*list bundar*/
ul.b {list-style-type: square;} /*list kotak*/
ol.c {list-style-type: lower-alpha;} /*list nomor*/
ul.gambar {list-style: square url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIiPWRryY-LnkHgg6ZdqKzw-t8xGbDMUqL3DkUZJKdxy8N8NaWrXwjisj-y5kheWqHwBi38GiCzGOkwdYwndoe1Fgn1x3P2uOKYO-hY8Zz2u9XKh4fckVyw4JkhtLtoI86ObDut_HKSxp/h120/sqpurple.gif");}  /*list gambar*/
</style>

Berikut Tag HTMLnya :

<ul> Daftar Minuman
  <li>Kopi</li>
  <li>Teh</li>
  <li>Jahe</li>
</ul>

<ul class="a"> Daftar Minuman
  <li>Kopi</li>
  <li>Teh</li>
  <li>Jahe</li>
</ul>

<ul class="b">Daftar Minuman
  <li>Kopi</li>
  <li>Teh</li>
  <li>Jahe</li>
</ul>

<ol class="c">Daftar Minuman
  <li>Kopi</li>
  <li>Teh</li>
  <li>Jahe</li>
</ol>

<ol class="gambar">Daftar Minuman
  <li>Kopi</li>
  <li>Teh</li>
  <li>Jahe</li>
</ol>

Maka Hasilnya akan tampak seperti berikut :

Daftar Minuman
• Kopi
• Teh
• Jahe

Daftar Minuman
• Kopi
• Teh
• Jahe

Daftar Minuman
1. Kopi
2. Teh
3. Jahe

Daftar Minuman
• Kopi
• Teh
• Jahe