CSS Styling Lists - CSS (Cascading Style Sheets) adalah sebuah bahasa yang digunakan untuk mengatur tampilan sebuah halaman web. Salah satu elemen yang bisa diberi gaya dengan CSS adalah daftar (lists).
Cara Mengatur Tampilan Daftar Menggunakan CSS
Dalam artikel ini akan dibahas beberapa cara mengatur tampilan daftar menggunakan CSS.
Pertama, kamu bisa mengubah gaya bullet point pada daftar dengan menggunakan properti "list-style-type".
Kamu bisa menggunakan nilai seperti "disc", "circle", atau "square" untuk mengubah bentuk bullet point.
Kamu juga bisa menggunakan gambar sebagai bullet point dengan menggunakan nilai "url" dan memberikan URL gambar yang diinginkan.
Kedua, kamu bisa mengubah jarak antara bullet point dan teks dengan menggunakan properti "padding-left". Nilai yang diberikan pada properti ini akan menentukan jarak antara bullet point dan teks.
Ketiga, kamu bisa mengubah gaya teks pada daftar dengan menggunakan properti "color" untuk mengubah warna teks dan "font-size" untuk mengubah ukuran teks.
Keempat, kamu bisa mengubah tampilan daftar dengan menggunakan properti "display" dan memberikan nilai "inline" atau "inline-block".
Nilai "inline" akan menyebabkan daftar ditampilkan seperti teks biasa, sedangkan nilai "inline-block" akan menyebabkan daftar ditampilkan seperti blok yang dapat digunakan untuk memberikan gaya tambahan.
Dengan menggunakan CSS, kamu dapat dengan mudah mengubah tampilan daftar sesuai dengan keinginan kamu dan membuat halaman web kamu lebih menarik.
Baca juga : CSS Syntax dan Selectors
Contoh Kode CSS Styling Lists
Berikut ini adalah beberapa contoh kode CSS yang dapat digunakan untuk mengatur tampilan daftar:
Mengubah gaya bullet point menjadi kotak:
ul {
list-style-type: square;
}
Menambah jarak antara bullet point dan teks:
ul {
padding-left: 20px;
}
Mengubah warna dan ukuran teks pada daftar:
ul {
color: blue;
font-size: 18px;
}
Menampilkan daftar sebagai blok dengan gaya tambahan:
ul {
display: inline-block;
background-color: #f2f2f2;
padding: 10px;
}
Perhatikan bahwa kode di atas hanya akan berlaku pada daftar yang ditandai dengan elemen <ul>. Jika kamu ingin menerapkan gaya yang sama pada daftar yang ditandai dengan elemen <ol>, kamu dapat menggunakan selektor ol sebagai gantinya.
kamu juga dapat menggunakan selektor class atau id untuk menerapkan gaya pada daftar tertentu saja.
CSS List-Style-Image
Selain properti list-style-type, kamu juga dapat menggunakan properti list-style-image dan list-style-position untuk mengatur tampilan bullet point pada daftar.
list-style-image digunakan untuk menentukan gambar sebagai bullet point pada daftar. kamu dapat menentukan URL gambar yang diinginkan sebagai nilai dari properti ini. Contoh :
ul {
list-style-image: url("bullet-point.png");
}
CSS List-Style-Position
list-style-position digunakan untuk menentukan posisi bullet point terhadap teks pada daftar. kamu dapat menentukan nilai "inside" atau "outside".
Nilai "inside" akan menyebabkan bullet point berada di dalam jarak margin teks, sedangkan nilai "outside" akan menyebabkan bullet point berada di luar jarak margin teks.
Contoh :
ul {
list-style-position: outside;
}
Perhatikan bahwa jika kamu menggunakan list-style-image, nilai list-style-type akan diabaikan, dan jika kamu menentukan nilai list-style-image: none maka list-style-type akan digunakan.
Dengan menggabungkan penggunaan properti list-style-type, list-style-image dan list-style-position, kamu dapat mengatur tampilan bullet point pada daftar sesuai dengan keinginan kamu dan membuat halaman web kamu lebih menarik.
