CSS

List di CSS: Properti – Contoh dan Cara Membuat Sintaknya

List pada CSS terdiri dari dua jenis yaitu ordered list dan unordered list. Apa perbedaan dari dua jenis list tersebut dan bagaimana contoh penggunaanya pada CSS? Mari simak bahasan tentang list pada CSS dibawah ini.

Properti List pada HTML dan CSS

HTML memiliki dua jenis list yaitu:

  • Unordered list <ul> item list pada HTML yang ditandai dengan bullets
  • Ordered list <ol> item list pada HTML ditandai dengan angka atau huruf

Sedangkan dengan menggunakan properti list pada CSS memungkinkan kita untuk:

  • Mengatur item list yang berbeda-beda pada ordered list.
  • Mengatur item list yang berbeda pada unordered list.
  • Menjadikan gambar sebagai item list
  • Menambahkan warna background pada item list

Item List Berbeda

Properti list-style-type pada CSS digunakan untuk menentukan tipe item list.

Di bawah ini menunjukan contoh dari beberapa item list yang tersedia pada CSS:

<!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>

<p>Contoh unordered lists:</p>
<ul class="a">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Contoh ordered lists:</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>

Catatan: Sebagian value menunjukan item unordered list dan sebagian menunjukan item ordered list.

List Image

Properti list-style-image pada css digunakan untuk mengatur sebuah gambar menjadi item list:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

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

</body>
</html>

List Position

Properti list-style-position pada CSS digunakan untuk menentukan posisi item list (poin-poin yang ada pada list).

Properti “list-style-position: outside;” berarti poin-poin akan berada di luar item list, setiap awal baris item list akan diratakan secara vertikal. Dan properti “list-style-position: inside;” berarti poin-poin akan berada di dalam item list. Ini adalah contoh pengaturan posisi list secara default:

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 yang dibuat dari biji kopi panggang, yang merupakan biji buah beri dari tanaman Coffea</li>
  <li>Teh - Minuman aromatik yang biasanya dibuat dengan menuangkan air panas atau air mendidih di atas daun Camellia sinensis yang sudah diawetkan, tumbuhan semak hijau yang berasal dari Asia.</li>
  <li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman tersebut 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 yang dibuat dari biji kopi panggang, yang merupakan biji buah beri dari tanaman Coffea</li>
  <li>Teh - Minuman aromatik yang biasanya dibuat dengan menuangkan air panas atau air mendidih di atas daun Camellia sinensis yang sudah diawetkan, tumbuhan semak hijau yang berasal dari Asia.</li>
  <li>Coca Cola - Minuman ringan berkarbonasi yang diproduksi oleh The Coca-Cola Company. Nama minuman tersebut mengacu pada dua bahan aslinya, yaitu kacang kola (sumber kafein) dan daun koka.</li>
</ul>

</body>
</html>

Menghapus Setelan Default

Properti list-style-type: none pada CSS biasa digunakan untuk menghapus item list. Perhatikan bahwa list juga memiliki margin dan padding default. Untuk menghapus margin dan padding , tetapkan nilai 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>list Default:</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

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

</body>
</html>

List Shorthand

Properti list-style pada CSS adalah sebuah properti shorthand. Properti ini digunakan untuk membuat setiap properti list menjadi satu deklarasi:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

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

</body>
</html>

Saat menggunakan properti shorthand, urutan penulisan value dari properti adalah:

  • list-style-type (jika menggunakan list-style-image, value dalam properti ini akan ditampilkan jika properti list-style-image tidak dapat ditampilkan karena alasan tertentu)
  • list-style-position (menentukan apakah item list harus ditampilkan di dalam atau di luar konten)
  • list-style-image (menetapkan sebuah gambar sebagai penanda item list)
  • Jika salah satu value dalam properti di atas tidak diatur, value properti yang kosong akan disetel secara default, jika ada.

Warna pada List Style

Selain dengan gambar, angka, huruf, dan bullets CSS juga dapat mengatur style sebuah list warna, agar terlihat semakin menarik.

Penambahan properti apapun ke dalam tag <ul> atau <ol> akan memengaruhi seluruh list, sementara properti yang ditambahkan pada tag <li> akan memengaruhi item list individual:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>Style list menggunakan 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>

Contoh Lain

Contoh ini menunjukkan cara membuat list dengan border sebelah kiri berwarna merah.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}
</style>
</head>
<body>

<p>List dengan border kiri berwarna merah:</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Contoh ini menunjukkan cara membuat border list tanpa bullets.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}
</style>
</head>
<body>

<p>border list dengan lebar penuh:</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Contoh ini menunjukkan semua item list berbeda yang tedapat pada CSS.

<!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-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>

<ul class="a">
  <li>Circle type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Disc type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ul class="c">
  <li>Square type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ol class="d">
  <li>Armenian type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="e">
  <li>Cjk-ideographic type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="f">
  <li>Decimal type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="g">
  <li>Decimal-leading-zero type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="h">
  <li>Georgian type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="i">
  <li>Hebrew type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="j">
  <li>Hiragana type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="k">
  <li>Hiragana-iroha type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="l">
  <li>Katakana type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="m">
  <li>Katakana-iroha type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="n">
  <li>Lower-alpha type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="o">
  <li>Lower-greek type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="p">
  <li>Lower-latin type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="q">
  <li>Lower-roman type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="r">
  <li>Upper-alpha type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="s">
  <li>Upper-latin type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="t">
  <li>Upper-roman type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="u">
  <li>None type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

<ol class="v">
  <li>inherit type</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Semua Properti Daftar CSS

PropertiDeskripsi
list-styleMembuat semua properti pada list menjadi satu deklarasi
list-style-imageMembuat item list dengan gambar
list-style-positionMenentukan posisi item list (poin-poin)
list-style-typeMenentukan jenis item list

Sekian pembahasan tentang properti-properti list yang ada pada CSS, semoga bermanfaat.


Catur Kurnia Sari

Share
Tags: CSS