Blog Pintasku: Belajar Styling List Dengan CSS

Belajar Styling List Dengan CSS - Sebelumnya kita pernah mempelajari Tutorial Cara Membuat Daftar (List) dalam HTML, Nahh untuk sekarang kita akan belajar Bagaimana Cara Styling atau memanipulasi List / daftar menggunakan CSS, oke langsung saja simak tutorialnya berikut ini.

Pada umumnya Pada HTML sebuah daftar/list ini ada 2 jenis, yaitu :

Ordered List <ol> ( untuk membuat daftar / list menggunakan angka atau huruf )
Unordered List <ul> ( untuk membuat daftar / list menggunakan simbol )

Untuk lebih jelasnya silahkan baca saja pada tutorial :

Cara Membuat List / Daftar Pada HTML

Sedangkan untuk cara memanipulasinya itu kita bisa menggunakan sebuah property list-style-type dan list-style-image.

1. Property List Style Type

Property List Style Type memiliki 4 nilai (value), yaitu :

circle
square
upper-roman
lower-alpha

Berikut ini adalah contoh penggunaanya dalam HTML.

<!DOCTYPE html>
<html>
   <head>
        <title>Belajar Styling List Dengan CSS</title>
<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>Nilai circle dan square untuk unordered lists:</p>
<ul class="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

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

<p>Nilai upper-roman dan lower-alpha untuk ordered lists:</p>
<ol class="c">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ol>

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

</body>
</html>

2. Property List Style Image

Nilai (Value) untuk Property List Style Image itu menggunakan sebuah gambar, sesuai dengan nama propertynya, yaitu image.

Supaya bisa lebih mengerti, sekarang sobat buatlah sebuah folder baru, lalu sekarang kita buat halaman HTML dan CSS dengan kode berikut ini dan letakan di folder baru tersebut. Jangan lupa untuk menyimpan sebuah gambar pada folder tersebut.

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

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

</body>
</html>

Nahh cukup sekian Tutorial Belajar Styling List Dengan CSS semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Belajar Styling List Dengan CSS

1. Property List Style Type

2. Property List Style Image

1 comment:

Mengenai Saya