Wednesday , December 2 2020
Home » CSS » Merubah List Dengan CSS

Merubah List Dengan CSS

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 :

  1. Pengertian Dasar CSS
  2. Pengertian Selector, Property dan Value di CSS
  3. Cara Memasukan Kode CSS ke Halaman HTML
  4. Mengubah Background Dengan CSS
  5. Mengatur Padding dan Margin di CSS
  6. Mengatur Font Menggunakan CSS
  7. Membuat Hyperlink Dengan CSS
  8. Format Text di CSS
  9. Belajar Position di CSS

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.

Advertisements

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

style.css

Advertisements
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 :

merubah list dengan css

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.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

Desain Tabel Dengan CSS

Desain Tabel Dengan CSS lebakcyber.net – Desain tabel dengan CSS. Biasanya kalau kita membuat sebuah …

Leave a Reply

Your email address will not be published. Required fields are marked *