Merubah List Dengan CSS

lebakcyber.net – Merubah list dengan CSS. Setelah beberapa postingan sebelumnya yang telah kita bahas mengenai CSS, ternyata CSS juga dapat digunakan untuk mengubah atau memanipulasi list yang ada pada HTML.

Pada beberapa tutorial CSS sebelumnya juga kita sudah sempat membahas mengenai :

Dengan menggunakan CSS kita bisa membuat list dengan model seperti list berbentuk angka, angka romawi, titik dan lain sebagainya. Dan untuk mengubah tanda pada list kita harus menggunakan property list-style-type.

Sekarang kita coba praktekan ya, buat sebuah file style.css dan juga index.html lalu masukan perintah seperti dibawah ini :

style.css

h1{
    text-align: center;
}
ul.rokok{
    list-style-type: square; /* list berbentuk square */
}
ul.minuman{
    list-style-type: circle;  /* list berbentuk lingkaran */
}
ol.makanan{
    list-style-type: upper-alpha;  /* list berbentuk alpha */
}
ol.cemilan{
    list-style-type: upper-roman;  /* list berbentuk romawi */
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS List Style - lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Merubah list dengan CSS <br/> www.lebakcyber.net</h1>
    <!-- unordered list -->
    <ul class="rokok">
        <li>Marlboro</li>
        <li>Sampoerna Mild</li>
        <li>Djarum Super</li>
        <li>Gudang Garam Filter</li>
    </ul>
    <ul class="minuman">
        <li>Teh Pucuk</li>
        <li>Coca Cola</li>
        <li>Fanta</li>
        <li>Kopi</li>
    </ul>
 
    <!-- ordered list -->
    <ol class="makanan">
        <li>Indomie</li>
        <li>Spagheti</li>
        <li>Bakso</li>
        <li>Mie Ayam</li>
    </ol>
    <ol class="cemilan">
        <li>Chiki</li>
        <li>Biskuit</li>
        <li>Roti</li>
    </ol>	
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Sekarang kita bahas satu persatu property list style pada css yang sudah kita buat diatas :

list-style-type: square; digunakan untuk membuat list dalam bentuk square.
list-style-type: circle; digunakan untuk membuat list dengan bentuk lingkaran.
list-style-type: upper-alpha; digunakan untuk membuat list dalam bentuk alphabet.
list-style-type: upper-roman; digunakan untuk membuat list dalam bentuk angka romawi.

Oke jadi sampai disini dulu pembahasan kita menganai bagaimana cara mengubah list dengan memanfaatkan perintah atau property CSS. Semoga tutorial CSS sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar CSS selanjutnya ya.

Lebak Cyber Tips dan Trik Komputer

Merubah List Dengan CSS