Tutorial Belajar CSS Part 28 – Mengatur Tampilan List dengan CSS


Dalam tutorial kali ini kita masih akan belajar mengenai CSS, kita akan membahas mengenai cara mengatur tampilan List dengan CSS, untuk teman – teman yang belum mengetahui mengenai apa itu list silahkan membaca artikel warung belajar yang khusus membahas list di HTML Tutorial HTML Part 16 Cara Membuat Daftar/List di HTML.





List yang digunakan untuk menampilkan daftar atau juga bisa anda gunakan untuk membuat menu navigasi, CSS menyediakan beberapa property yang bisa digunakan untuk memanipulasi tampilan dari list yang dibuat di HTML, baik tanpa panjang lebar beberapa property tersebut antara lain :





Property List-style-type





property ini sederhananya digunakan untuk mengatur icon dari daftar, ada beberapa jenis style yang bisa anda gunakan, agar lebih memahami contohnya silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style>
ul.satu {
list-style-type: circle;
}

ul.dua {
list-style-type: square;
}

ol.tiga {
list-style-type: upper-roman;
}

ol.empat {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Contoh Unordered List</p>
<ul class="satu">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

<ul class="dua">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

<p>Contoh Ordered List</p>
<ol class="tiga">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>

<ol class="empat">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>

</body>
</html>




Semisal kita simpan dengan nama list-style-type.html, lalu silahkan dibuka di browser, maka hasilnya adalah seperti berikut ini :









penjelasannya :





  • pada list pertama iconnya adalah lingkaran hal tersebut karena kita menggunakan value circle pada property list-style-type
  • pada list kedua iconnya adalah kotak hal tersebut karena kita menggunakan value square pada property list-style-type
  • pada list ketiga iconnya adalah huruf romawi besar hal tersebut karena kita menggunakan value upper-roman pada property list-style-type
  • pada list keempat iconnya adalah huruf kecil hal tersebut karena kita menggunakan value lower-alpha pada property list-style-type




Beberapa value yang bisa anda gunakan untuk property list-style-type adalah :





ValueKeterangan
discdefault, bertanda lingkaran berisi warna hitam penuh.
armenianpenomoran tradisional armenian.
circlelingkaran tanpa isi.
cjk-ideographicnomor ideographic.
decimalnomor biasa.
decimal-leading-zerodesimal dengan leading angka seperti 01,02,03 dan seterusnya.
georgianpenomoran tradisional georgian.
hebrewpenomoran tradisional yahudi.
hiraganapenomoran tradisional hiragana.
hiragana-irohapenomoran tradisional hiragana-iroha.
katakanapenomoran tradisional katakana.
katakana-irohapenomoran tradisional katakana-iroha.
lower-alphahuruf kecil biasa.
lower-greekhuruf kecil yunani.
lower-latinhuruf kecil latin.
lower-romanangka romawi kecil.
nonetanda atau tanpa tanda list.
squarekotak.
upper-alphahuruf besar biasa.
upper-latinhuruf besar latin.
upper-romanangka romawi besar.




Property list-style-image





Property ini digunakan untuk mengatur tampilan dari icon list (daftar) dengan menggunakan gambar, nah anda dapat menentukan gambar yang akan digunakan sebagai icon listnya, dalam contoh ini saya menggunakan gambar dengan format file .gif dengan ukuran 10 x 10 pixel, perhatikan skrip dibawah :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('list-icon.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

</body>
</html>




lalu  kita simpan semisal dengan nama list-style-image.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini  :









maka hasilnya adalah seperti gambar diatas, icon yang ada di list tersebut yang berwarna ungu itu adalah gambar yang kita set pada value property list-style-image





Property list-style-position





Property ini digunakan untuk mengatur posisi dari listnya apakah agak kedalam atau agak keluar, value yang bisa anda gunakan disini adalah inside ataupun outside, perhatikan contoh skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.a
{
list-style-position: inside;
}
ul.b
{
list-style-position: outside;
}

</style>
</head>
<body>
<h3>Contoh dari List Style Position = inside</h3>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

<hr/>

<h3>Contoh dari List Style Position = Outside</h3>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

</body>
</html>




lalu kita akan simpan dengan nama semisal list-style-position.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :









penjelasan :





  • pada daftar pertama kita menggunakan value inside pada property list-style-position sehingga daftar ditampilkan agak kedalam.
  • pada daftar kedua kita menggunakan value outside pada property list-style-position sehingga daftar ditampilkan agak keluar (posisi default).




Shorthand property





Shorthand property adalah istilah dari pemendekan perintah di CSS yang juga bisa anda gunakan pada penulisan list-style, perhatikan contoh skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url('list-icon.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

</body>
</html>




semisal kita simpan dengan nama list-style-shorthand.html, lalu buka di browser maka hasilnya :









Penjelasan :





  • Pada list diatas kita menggunakan list-style-shorthand dengan beberapa value didalamnya.
  • value pertama adalah square yang menset dari list-style-type menjadi kotak(square)
  • value kedua adalah inside yang menset dari list-style-position menjadi agak kedalam (inside)
  • value ketiga adalah url(‘list-icon.gif’) yang menset icon dari list daftar menggunakan gambar list-icon.gif




Setelah kita mempelajari beberapa property yang berhubungan dengan List, berikutnya kita akan mempelajari beberapa hal yang bisa anda gunakan untuk mengatur tampilan dari list dengan menggunakan CSS.





Menghapus Settingan Dasar List





Secara default list yang ditampilkan telah mengatur bagian padding, margin, dan list-style-type, nah anda bisa menggunakan perintah dibawah ini untuk menghapus settingan dasar tersebut, perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.a
{
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<hr/>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

</body>
</html>




semisal kita simpan dengan nama setting-dasar-list.html, lalu kita buka di browser :









penjelasan :





  • Pada list pertama terlihat daftar ditampilkan lebih masuk ke dalam kearah kanan, dan terdapat icon lingkaran yang merupakan default type dari list
  • Pada list kedua terlihat tidak ada margin, padding, dan icon pada list, sehingga daftar ditampilkan menampel dengan ujung browser




Memberi warna pada List





Selain menghilangkan settingan default dari list, anda juga bisa memanipulasi warna dari list, dengan menggunakan beberapa property tambahan seperti background, perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
background:red;
padding: 20px;
}
ul li {
background: salmon;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<hr/>


</body>
</html>








semisal kita beri nama background-list.html, lalu kita buka di browser maka hasilnya :









Penjelasan :





  • Pada bagian list kita berikan background dengan warna merah, background:red; pada selector ul
  • pada selector ul li kita beri background dengan warna salmon (semacam pink) dengan margin 5 pixel sehingga jarak 1 item list dengan yang lain ada jaraknya, untuk menggunakan warna lainnya bisa membuka artikel warung belajar mengenai Tutorial Belajar CSS Part 11 – Mengenal Kode Warna pada CSS




Bagaimana mudah bukan teman – teman, itu adalah beberapa hal yang bisa kita lakukan untuk List dengan menggunakan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu teman – teman sampai jumpa di tutorial selanjutnya.


Lebih baru Lebih lama