Sebelum ini, sinahu coding telah membahas tentang Mengatur link dengan style CSS. Kali ini dilanjutkan pembahasan belajar CSS tentang mengatur list/daftar dengan style CSS.
Pembahasan ini akan mempelajari bagaimana mengatur list menggunakan CSS. Dengan properti list ini kamu bisa menentukan penanda item list apa yang akan kamu gunakan. Kamu juga bisa menggunakan gambar sebagai penanda item untuk menyusun list. List di sini, baik itu jenis unordered lists (ul) ataupun ordered lists (ol) yang sudah dibahas juga sebelumnya pada topik belajar HTML.
Penanda item list (List item markers) jenisnya beragam. Dalam CSS, penanda item ini diatur dengan properti list-style-type. Contohnya seperti ini :
Keterangan :
Susunan kode tersebut menunjukkan bahwa ada 4 daftar list. 2 berjenis unordered list, dan 2 lainnya berjenis ordered list. Yang unordered list dengan menggunakan style penanda item circle dan square, yang ordered list menggunakan style penanda item upper-roman (angka romawi besar) dan lower-alpha (huruf abjad kecil). Sehingga hasilnya seperti berikut ini :
Itulah sedikit pembahasan sinahu coding kali ini tentang mengatur style item list menggunakan CSS. Bersambung pada pembahasan selanjutnya. Stay terus ya di sinahu coding.
Pembahasan ini akan mempelajari bagaimana mengatur list menggunakan CSS. Dengan properti list ini kamu bisa menentukan penanda item list apa yang akan kamu gunakan. Kamu juga bisa menggunakan gambar sebagai penanda item untuk menyusun list. List di sini, baik itu jenis unordered lists (ul) ataupun ordered lists (ol) yang sudah dibahas juga sebelumnya pada topik belajar HTML.
Mengatur Penanda Item List dengan CSS
Penanda item list (List item markers) jenisnya beragam. Dalam CSS, penanda item ini diatur dengan properti list-style-type. Contohnya seperti ini :
<!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>Soda Gembira</li>
</ul>
<ul class="b">
<li>Kopi</li>
<li>Teh</li>
<li>Soda Gembira</li>
</ul>
<p>Contoh ordered lists:</p>
<ol class="c">
<li>Kopi</li>
<li>Teh</li>
<li>Soda Gembira</li>
</ol>
<ol class="d">
<li>Kopi</li>
<li>Teh</li>
<li>Soda Gembira</li>
</ol>
</body>
</html>
Keterangan :
Susunan kode tersebut menunjukkan bahwa ada 4 daftar list. 2 berjenis unordered list, dan 2 lainnya berjenis ordered list. Yang unordered list dengan menggunakan style penanda item circle dan square, yang ordered list menggunakan style penanda item upper-roman (angka romawi besar) dan lower-alpha (huruf abjad kecil). Sehingga hasilnya seperti berikut ini :
Itulah sedikit pembahasan sinahu coding kali ini tentang mengatur style item list menggunakan CSS. Bersambung pada pembahasan selanjutnya. Stay terus ya di sinahu coding.
0 Komentar untuk "Mengatur Style Item List dengan CSS"