List HTML dan Properti CSS Lists
Dalam HTML, ada dua jenis list/daftar, yaitu:
- Unordered List (<ul>) – digunakan untuk menampilkan list dalam bentuk bulatan atau kotak
- Ordered List (<ol>) – digunakan untuk menampilkan list dalam bentuk angka atau huruf
Properti Lists pada CSS dapat digunakan untuk:
- Mengatur item list yang berbeda menggunakan ordered list, untuk mengurutkan dalam bentuk angka atau huruf
- Mengatur item list yang berbeda menggunakan unordered list, untuk mengurutkan dalam bentuk bulatan atau kotak
- Menjadikan gambar sebagai item list
- Menambahkan warna background pada item list
Properti list-style-type
Properti list-style-type
pada CSS digunakan untuk menentukan tipe penanda list.
Contoh dibawah ini menunjukan beberapa penanda item list yang tersedia di CSS:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Properti list-style-type</h2>
<p>Contoh daftar yang tidak diurutkan:</p>
<ul class="a">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<p>Contoh daftar yang diurutkan:</p>
<ol class= "c">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
</body></html>
Properti list-style-image
Properti list-style-image
pada CSS digunakan untuk membuat gambar sebagai penanda item list:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple2.jpeg');
}
</style>
</head>
<body>
<h2>Properti list-style-image</h2>
<p>Properti list-style-image menentukan gambar sebagai penanda item daftar:</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Properti list-style-position
Properti list-style-position
pada CSS dapat digunakan untuk menentukan posisi penanda item list.
Properti “list-style-position: outside;” berarti penanda akan berada diluar item list, setiap awal baris item list akan diratakan secara vertikal. Berikut merupakan contoh pengaturan posisi penanda list secara default menggunakan properti “list-style-position: outside;” :
- Kopi – Minuman seduh yang dibuat dari biji kopi panggang…
- Teh
- Coca-cola
Dan properti “list-style-position: inside;” berarti penanda item list akan dimasukan ke dalam item list. Berikut merupakan contoh pengaturan posisi penanda item list secara default menggunakan properti “list-style-position: inside;” :
- Kopi – Minuman seduh yang dibuat dari biji kopi panggang…
- Teh
- Coca-cola
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Properti list-style-position</h1>
<h2>list-style-position: outside (default)</h2>
<ul class="a">
<li>Kopi - Minuman seduh yang dibuat dari biji kopi panggang, yaitu biji buah beri dari tanaman Coffea</li>
<li>Teh - Minuman aromatik yang biasa disiapkan dengan menuangkan air panas atau mendidih di atas daun Camellia sinensis yang diawetkan, semak cemara asli Asia</li>
<li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman ini mengacu pada dua bahan aslinya, yaitu kacang kola (sumber kafein) dan daun koka</li>
</ul>
<h2>list-style-position: inside</h2>
<ul class="b">
<li>Kopi - Minuman seduh yang dibuat dari biji kopi panggang, yaitu biji buah beri dari tanaman Coffea</li>
<li>Teh - Minuman aromatik yang biasa disiapkan dengan menuangkan air panas atau mendidih di atas daun Camellia sinensis yang diawetkan, semak cemara asli Asia</li>
<li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman ini mengacu pada dua bahan aslinya, yaitu kacang kola (sumber kafein) dan daun koka</li>
</ul>
</body></html>
Menghapus Penanda
Properti list-style-type: none
pada CSS bisa digunakan untuk menghapus/menghilangkan penanda item list. Perlu diperhatikan bahwa secara default list memiliki margin dan padding. Untuk menghapusnya, tambahkan margin:0
dan padding:0
ke <ul> atau <ol>:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Daftar default:</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<p>Hapus poin, margin dan padding dari daftar:</p>
<ul class="demo">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Properti Singkat/Gabungan List
Properti list-style
pada CSS merupakan properti shorthand (singkat/gabungan). Properti ini digunakan untuk mengelompokkan setiap properti list menjadi satu deklarasi:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple2.jpeg");
}
</style>
</head>
<body>
<h2>Properti list-style</h2>
<p>Properti list-style adalah properti singkat/gabungan, yang digunakan untuk menyetel semua properti list-style dalam satu deklarasi.</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Saat menggunakan properti singkat, urutan penulisan nilai dari properti adalah:
list-style-type
(jika menggunakan list-style-image, nilai properti ini akan ditampilkan jika gambar tidak dapat ditampilkan karena beberapa alasan tertentu)list-style-position
(menentukan apakah penanda item list harus ditampilkan di luar atau di dalam konten)list-style-image
(menetapkan gambar sebagai penanda item list)
Jika salah satu nilai properti di atas kosong, maka nilai yang kosong akan disetel secara default.
Warna List
Selain itu juga dapat mengatur style list dengan warna, agar terlihat sedikit lebih menarik.
Properti yang ditambahkan ke dalam tag <ol> atau <ul>, akan mempengaruhi seluruh isi atau item dalam list, sementara properti yang ditambahkan ke tag <li> akan mempengaruhi item list masing-masing:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<h1>Daftar dengan warna</h1>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Referensi Semua Properti List CSS
- list-style : Membuat semua properti pada list menjadi satu deklarasi
- list-style-image : Membuat item list menggunakan gambar
- list-style-position : Menentukan posisi penanda item list (poin-poin)
- list-style-type : Menentukan jenis item list
Properti CSS list-style
Contoh:
Menetapkan semua properti list dalam satu deklarasi:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple2.jpeg");
}
</style>
</head>
<body>
<h1>Properti list-style</h1>
<p>Properti list-style adalah properti singkat/gabungan untuk semua properti list-style.</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Definisi dan Penggunaan
Properti list-style
merupakan properti singkat dari properti berikut:
- list-style-type
- list-style-position
- list-style-image
Jika salah satu nilai nya kosong, maka nilai dari properti tersebut di setel secara default yang akan ditampilkan.
Properti CSS list-style-image
Contoh
Menetapkan penanda item list menggunakan gambar:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple2.jpeg');
}
</style>
</head>
<body>
<h1>Properti list-style-image</h1>
<p>Properti list-style-image menggantikan penanda daftar dengan gambar:</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Definisi dan Penggunaan
Properti list-style-image
pada CSS menggantikan penanda item list dengan gambar.
Catatan: Selalu tambahkan properti list-style-type sebagai tambahan. nilai properti ini akan ditampilkan jika gambar tidak dapat ditampilkan karena beberapa alasan tertentu.
Properti CSS list-style-position
Contoh
Menetapkan posisi penanda item list menggunakan <ul> (Unordered List)
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Properti list-style-position</h1>
<h2>list-style-position: outside (default)</h2>
<ul class="a">
<li>Kopi - Minuman seduh yang dibuat dari biji kopi panggang, yaitu biji buah beri dari tanaman Coffea</li>
<li>Teh - Minuman aromatik yang biasa disiapkan dengan menuangkan air panas atau mendidih di atas daun Camellia sinensis yang diawetkan, semak cemara asli Asia</li>
<li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman ini mengacu pada dua bahan aslinya, yaitu kacang kola (sumber kafein) dan daun koka</li>
</ul>
<h2>list-style-position: inside</h2>
<ul class="b">
<li>Kopi - Minuman seduh yang dibuat dari biji kopi panggang, yaitu biji buah beri dari tanaman Coffea</li>
<li>Teh - Minuman aromatik yang biasa disiapkan dengan menuangkan air panas atau mendidih di atas daun Camellia sinensis yang diawetkan, semak cemara asli Asia</li>
<li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman ini mengacu pada dua bahan aslinya, yaitu kacang kola (sumber kafein) dan daun koka</li>
</ul>
</body></html>
Definisi dan Penggunaan
Properti list-style-position
pada CSS menentukan posisi penanda daftar-item (poin-poin).
Properti CSS list-style-type
Contoh
Menetapkan tipe list yang berbeda :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
</style>
</head>
<body>
<h1>Properti list-style-type</h1>
<p>Contoh daftar yang tidak diurutkan:</p>
<ul class="a">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<p>Contoh daftar yang diurutkan:</p>
<ol class= "c">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
</body></html>
Definisi dan Penggunaan
Properti list-style-type
pada CSS digunakan untuk menentukan tipe item list.
Contoh
Contoh di bawah ini menunjukkan semua tipe item list yang berbeda :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}
</style>
</head>
<body>
<h1>Properti list-style-type</h1>
<ul class="a">
<li>Jenis lingkaran</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Jenis disk</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Tipe persegi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Tipe bahasa Armenia</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Tipe ideografik-Cjk</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "f">
<li>Jenis desimal</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Jenis desimal-depan-nol</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Tipe Georgia</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Tipe bahasa Ibrani</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Tipe Hiragana</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "k">
<li>Jenis Hiragana-iroha</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "l">
<li>Jenis katakana</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Tipe Katakana-iroha</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "n">
<li>Jenis alfa bawah</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
< class ol ="o">
<li>Tipe yunani rendah</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Tipe latin rendah</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
< class ol ="q">
<li>Tipe romawi rendah</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Jenis alfa atas</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Tipe yunani atas</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Tipe latin atas</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "u">
<li>Tipe romawi atas</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "v">
<li>Tidak ada tipe</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
<ol class= "w">
<li>mewarisi jenis</li>
<li>Teh</li>
<li>Coca Cola</li>
</ol>
</body></html>
Contoh
Cara mengatur warna penanda poin untuk tag <ul> atau <ol> dengan menghapus penanda poin defaultnya dan menambahkan entitas HTML yang terlihat seperti poin (•):
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
</style>
</head>
<body>
<h1>Properti content</h1>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body></html>
Tutorial sebelumnya : Mengatur Tautan Dengan CSS
Tutorial setelahnya : Mengatur Table HTML Dengan CSS
Semua Tutorial CSS : Tutorial CSS