CSS

Belajar CSS Part 8: Cara Mengubah List Style dengan CSS

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.

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

<!DOCTYPE html>
<html>
<head>
	<title>List style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Tutorial cara mengubah list style dengan CSS di <br/> www.irvannurfazri.com</h1>
	<!-- unordered list -->
	<ul class="makanan">
		<li>Nasi Goreng</li>
		<li>Soto Ayam</li>
		<li>Bakso</li>
		<li>Mie Ayam</li>
	</ul>
</body>
</html>

style.css

h1{
	text-align: center;
}
ul.makanan{
	list-style-type: square; /* list dengan bentuk square */
}

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

<!DOCTYPE html>
<html>
<head>
	<title>List style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Tutorial cara mengubah list style dengan CSS di <br/> www.irvannurfazri.com</h1>
	<!-- unordered list -->
	<ul class="minuman">
		<li>Es Jerus</li>
		<li>Teh manis</li>
		<li>Kopi</li>
		<li>Jus Alpukat</li>
		<li>Susu Jahe</li>
	</ul>
</body>
</html>

style.css

h1{
	text-align: center;
}
ul.minuman{
	list-style-type: circle; /* list dengan bentuk square */
}

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

<!DOCTYPE html>
<html>
<head>
	<title>List style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Tutorial cara mengubah list style dengan CSS di <br/> www.irvannurfazri.com</h1>
	<!-- ordered list -->
	<ol class="Pulau">
		<li>Jawa</li>
		<li>Sumatera</li>
		<li>Sulawesi</li>
		<li>Kalimantan</li>
		<li>Papua</li>
	</ol>
</body>
</html>

style.css

h1{
	text-align: center;
}
ol.pulau{
	list-style-type: upper-alpha; /* list dengan bentuk square */
}

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

<!DOCTYPE html>
<html>
<head>
	<title>List style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Tutorial cara mengubah list style dengan CSS di <br/> www.irvannurfazri.com</h1>
	<!-- ordered list -->
	<ol class="kendaraan">
		<li>Sepeda Motor</li>
		<li>Mobil</li>
		<li>Pick Up</li>
		<li>Bus</li>
		<li>Truk</li>
	</ol>
</body>
</html>

style.css

h1{
	text-align: center;
}
ol.kendaraan{
	list-style-type: upper-roman; /* list dengan bentuk square */
}

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:

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

2. Membuat list dengan gaya lingkaran menggunakan properti dan value css:

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

3. Membuat list dengan gaya huruf menggunakan properti dan value css:

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

4. Membuat list dengan gaya angka romawi menggunakan properti dan value css:

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

Nah sedikit tambahan saja apabila kamu ingin menghilangkan tanda list, gunakan property dan value list-style-type: none:

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

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.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *