Belajar CSS chapter 4 (List)


Assalamualaikum. Pada postingan kali ini tentang mengubah list html menjadi lebih menarik dengan menggunakan CSS. Berikut penjelasannya.

CSS List

PROPERTI CSS LIST


PropertyDescription
list-stylemengatur semua properti dari list dengan satu deklarasi
list-style-imageMenentukan sebuah gambar sebagai penanda list
list-style-positionMengatur jika penanda list akan menjorok kedalam atau keluar
list-style-typeMenentukan tipe dari penanda list
Contoh-Contoh :
Contoh 1
Contoh 2
Contoh 3
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
hasilnya :
Contoh 4
Untuk mengubah list dengan CSS kita juga dapat menggunakan cara pendeknya dengan properti list style
Sekian untuk postingan kali ini terima kasih telah mengunjungi blog saya dan jangan lupa komentarnya. Terima kasih.
Wassalamualaikum wr wb
Sumber : w3schools.com

Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)