Belajar CSS Part 15 - List Item

CSS List Item (Daftar Item)

Dengan menggunakan CSS kita bisa memanipulasi atau mengubah list item pada halaman web kita. CSS sangat berguna apabila kita ingin membuat list dengan model tertentu. Misalnya list yang berbentuk bullet, titik, angka, bilangan romawi, dan lain-lain.
Contoh List:

List pada HTML dan List pada CSS

Dalam HTML, ada dua jenis list:

unordered list (<ul>) - list item yang ditandai dengan bullet (bulatan kecil)
ordered list (<ol>) - list item yang ditandai dengan angka atau huruf

Properti list pada CSS memungkinkan kita untuk:

Untuk mengatur tanda list item untuk ordered list
Untuk mengatur tanda list item untuk unordered list
Mengatur gambar sebagai penanda list item
Menambahkan warna latar belakang untuk list dan list item

Penanda List Item yang berbeda

Properti list-style-type digunakan untuk menetapkan jenis penanda list item.

Contoh berikut menunjukkan beberapa penanda list item yang tersedia:

Contoh

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;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Contoh dari unordered list:</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 dari ordered list:</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>

Hasilnya:

Catatan: Contoh di atas hanya terdiri dari beberapa nilai untuk unordered list, dan beberapa untuk ordered list.

Gambar sebagai penanda List Item

Properti list-style-image digunakan untuk menetapkan gambar sebagai penanda list item. Untuk membuat gambar sebagai penanda list item, gunakan gambar yang ukurannya sangat kecil, dengan dimensi kurang lebih 18x18 pixel.

Contoh

ul {
    list-style-image: url('gambar.png');
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

Posisi Penanda List Item

Properti list-style-position digunakan untuk menentukan posisi penanda (poin-poin) list item.

"List-style-position: outside;" berarti bahwa poin-poin akan berada di luar list item. Awal setiap baris list item akan selaras secara vertikal. Posisi ini adalah posisi default list item.

"List-style-position: inside;" berarti bahwa poin-poin akan berada di dalam list item. Karena itu adalah bagian dari list item, itu akan menjadi bagian dari teks dan mendorong teks sehingga teks terlihat agak ke kanan.

Contoh

ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Properti list-style-position</h1>
<h2>list-style-position: outside (default):</h2>

<ul class="a">
  <li>Kopi adalah minuman hasil seduhan biji kopi yang telah disangrai dan dihaluskan menjadi bubuk. Kopi merupakan salah satu komoditas di dunia yang dibudidayakan lebih dari 50 negara. Dua varietas pohon kopi yang dikenal secara umum yaitu Kopi Robusta (Coffea canephora) dan Kopi Arabika (Coffea arabica).</li>
  <li>Teh adalah minuman yang mengandung kafeina, sebuah infusi yang dibuat dengan cara menyeduh daun, pucuk daun, atau tangkai daun yang dikeringkan dari tanaman Camellia sinensis dengan air panas.</li>
  <li>Coca-Cola adalah minuman ringan berkarbonasi yang dijual di toko, restoran, dan mesin penjual di lebih dari 200 negara. Minuman ini diproduksi oleh The Coca-Cola Company asal Atlanta, Georgia, dan sering disebut Coke saja (merek dagang terdaftar The Coca-Cola Company di Amerika Serikat sejak 27 Maret 1944).</li>
</ul>

<h2>list-style-position: inside:</h2>

<ul class="b">
  <li>Kopi adalah minuman hasil seduhan biji kopi yang telah disangrai dan dihaluskan menjadi bubuk. Kopi merupakan salah satu komoditas di dunia yang dibudidayakan lebih dari 50 negara. Dua varietas pohon kopi yang dikenal secara umum yaitu Kopi Robusta (Coffea canephora) dan Kopi Arabika (Coffea arabica).</li>
  <li>Teh adalah minuman yang mengandung kafeina, sebuah infusi yang dibuat dengan cara menyeduh daun, pucuk daun, atau tangkai daun yang dikeringkan dari tanaman Camellia sinensis dengan air panas.</li>
  <li>Coca-Cola adalah minuman ringan berkarbonasi yang dijual di toko, restoran, dan mesin penjual di lebih dari 200 negara. Minuman ini diproduksi oleh The Coca-Cola Company asal Atlanta, Georgia, dan sering disebut Coke saja (merek dagang terdaftar The Coca-Cola Company di Amerika Serikat sejak 27 Maret 1944).</li>
</ul>

</body>
</html>

Hasilnya:

Menghapus Pengaturan Default

Properti list-style-type:none juga dapat digunakan untuk menghapus tanda/bullet.

Perhatikan bahwa list juga memiliki marjin default dan padding. Untuk menghapus ini, menambahkan margin:0 dan padding:0 ke <ul> atau <ol>.

Contoh

ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>List default:</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

<p>Menghapus bullets, margin and padding:</p>
<ul class="demo">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

List - properti Singkatan (Shorthand)

Properti list-style adalah properti singkat. Hal ini digunakan untuk mengatur semua properti list dalam satu deklarasi.

Contoh

ul {
    list-style: square inside url("sqpurple.gif");
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

Bila menggunakan properti singkatan, urutan nilai properti adalah sebagai berikut:

list-style-type (Jika list-style-image ditentukan, nilai properti ini akan ditampilkan jika gambar untuk beberapa alasan tidak dapat ditampilkan)
list-style-position (Menentukan apakah penanda list item akan muncul dalam atau di luar aliran konten)
list-style-image (Menentukan gambar sebagai penanda list item)

Jika salah satu dari nilai properti di atas yang hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Mengubah List menggunakan Warna (Color)

Kita juga bisa menetapkan styling pada list item dengan menggunakan warna (color), hal itu dimaksudkan untuk membuat list agar terlihat sedikit lebih menarik.

Apa pun yang ditambahkan ke tag <ol> atau <ul>, mempengaruhi seluruh list, sementara properti ditambahkan ke tag <li> akan mempengaruhi list item secara individu (bukan keseluruhan list item).

Contoh

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Menerapkan styling pada Lists dengan warna (color):</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>

Hasilnya: