Cara Memberikan Style pada Unorder-list HTML dan CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Memberikan Style pada Unorder-list HTML dan CSS. Mungkin pada pembahasan kali ini sudah banyak sekali dibahas, namun saya akan me-review kembali tentang Style pada Unorder-list. Dalam sebuah website, list atau sebuah daftar merupakan sebuah hal yang pasti ada didalamnya atau tidak dapat kita dihindari. Salah satu list yang terdapat pada HTML adalah Unordered List (ul) singkatan dari Unordered List, digunakan untuk memberikan daftar dari hal-hal yang tidak memiliki urutan tertentu, atau yang urutannya tidak penting. Didalam Unordered-list ini terdapat beberapa tipe dan style nya. Disini saya akan memberikan beberapa contoh style tipe pada unordered-list.

Oke teman-teman, pertama-tama silahkan jalankan/run text-editor yang teman-teman gunakan. Jika sudah silahkan ketik/copy script HTML dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Cara Memberikan Style pada Unorder-list HTML dan CSS</title>
</head>
<body>

	<ul class="circle">
		<li>circle</li>
		<li>circle</li>
		<li>circle</li>
	</ul>
	<ul class="square">
		<li>square</li>
		<li>square</li>
		<li>square</li>
	</ul>
	<ul class="disc">
		<li>disc</li>
		<li>disc</li>
		<li>disc</li>
	</ul>

</body>
</html>

Jika sudah dengan HTMLnya, langkah selanjutnya silahkan teman-teman ketik/copy styling CSSnya seperti pada dibawah ini :

<style type="text/css">
	ul.circle{
		list-style: circle;
	}
	ul.square{
		list-style: square;
	}
	ul.disc{
		list-style: disc;
	}
</style>

Maka hasil penggabungan antara HTML dan CSS nya menjadi seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Cara Memberikan Style pada Unorder-list HTML dan CSS</title>
	<style type="text/css">
		ul.circle{
			list-style: circle;
		}
		ul.square{
			list-style: square;
		}
		ul.disc{
			list-style: disc;
		}
	</style>
</head>
<body>

	<ul class="circle">
		<li>circle</li>
		<li>circle</li>
		<li>circle</li>
	</ul>
	<ul class="square">
		<li>square</li>
		<li>square</li>
		<li>square</li>
	</ul>
	<ul class="disc">
		<li>disc</li>
		<li>disc</li>
		<li>disc</li>
	</ul>

</body>
</html>

Jika sudah silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Jadi seperti itulah style tipe yang terdapat pada Unordered-list secara umumnya. Jika teman-teman ingin list tsb menjadi sebuah gambar pun bisa. Untuk pembahasan kali ini tentang Cara Memberikan Style pada Unorder-list HTML dan CSS. dan Nanti pada pembahasan selanjutnya saya akan membahas tentang cara memberikan style gambar pada unorder-list html dan css dan juga model type list.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Memberikan Style pada Unorder-list HTML dan CSS. semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih