#CSS - #CSS Dasar

Belajar CSS Part 10 : Mengubah List Dengan CSS

By Diki Alfarabi Hadi
1 January 2016
CSS CSS Dasar

Belajar CSS Mengubah List Dengan CSS

CSS memiliki kemampuan untuk memanipulasi atau mengubah list HTML. CSS sangat berguna ketika anda ingin membuat daftar list dengan model tertentu misalnya list yang berbentuk angka, titik, angka romawi dan lainnya. Dengan menggunakan CSS kita dapat memanipulasi list HTML dengan mengubah bentuk tanda listnya. untuk mengubah list HTML dengan CSS kita bisa menggunakan property “list-style-type” yang berarti tipe gaya list.

Untuk mengubah list HTML dengan CSS perhatikan contoh berikut ini.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

<h1>Tutorial cara mengubah list dengan CSS di <br/> www.malasngoding.com</h1>

<li>Bakso</li>

<li>Mie Goreng</li>

<li>Sate Padang</li>

<li>Rujak</li>

</ul>

<li>Soft drink</li>

<li>Teh manis</li>

<li>Jus jeruk</li>

</ul>

<li>Jawa Timur</li>

<li>Jawa Barat</li>

<li>Jakarta</li>

</ol>

<li>Sedan</li>

</ol>

</body>

</html>

style.css

h1{

text-align: center;

}

ul.makanan{

list-style-type: square; /* list dengan bentuk square */

}

ul.minuman{

list-style-type: circle; /* list dengan bentuk lingkaran */

}

ol.alamat{

list-style-type: upper-alpha; /* list dengan bentuk alpha */

}

ol.mobil{

list-style-type: upper-roman; /* list dengan bentuk romawi */

}

maka hasilnya

Belajar CSS Mengubah List Dengan CSS

Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk membuat list dengan bentuk square bisa menggunakan property dan value css:

1	list-style-type: square; /* list dengan bentuk square */

untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:

1	list-style-type: circle; /* list dengan bentuk lingkaran */

untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css:

1	list-style-type: upper-alpha; /* list dengan bentuk alphabet */

untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css:

1	list-style-type: upper-roman; /* list dengan bentuk romawi */

sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan propery dan value sebagai berikut:

1	list-style-type: none; /* menghilangkan tanda list */

Sekian lah penjelasan singkat tentang cara mengubah list dengan CSS pada tutorial belajar CSS mengubah list dengan CSS di www.malasngoding.com.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.