Belajar CSS Dasar : Mengubah List Dengan CSS

CSS memiliki kemampuan untuk memanipulasi atau mengubah list HTML. CSS sangat berguna ketika anda ingin membuat daftar list dengan model tertentu misalnya list yang berbentuk angka, titik, angka romawi dan lainnya. Dengan menggunakan CSS kita dapat memanipulasi list HTML dengan mengubah bentuk tanda listnya. untuk mengubah list HTML dengan CSS kita bisa menggunakan property “list-style-type” yang berarti tipe gaya list. Untuk mengubah list HTML dengan CSS perhatikan contoh berikut ini.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial cara mengubah list dengan CSS di <br/> www.malasngoding.com</h1>
<!-- unordered list -->
<ul class="makanan">
<li>Bakso</li>
<li>Mie Goreng</li>
<li>Sate Padang</li>
<li>Rujak</li>
</ul>
<ul class="minuman">
<li>Soft drink</li>
<li>Teh manis</li>
<li>Kopi</li>
<li>Jus jeruk</li>
<li>Susu</li>
</ul>
 
<!-- ordered list -->
<ol class="alamat">
<li>Bali</li>
<li>Jawa Timur</li>
<li>Jawa Barat</li>
<li>Jakarta</li>
</ol>
<ol class="mobil">
<li>Sedan</li>
<li>Mini Bus</li>
<li>Truk</li>
<li>Pick Up</li>
</ol>
</body>
</html>

Style.css

h1{
text-align: center;
}
ul.makanan{
list-style-type: square; /* list dengan bentuk square */
}
ul.minuman{
list-style-type: circle;  /* list dengan bentuk lingkaran */
}
ol.alamat{
list-style-type: upper-alpha;  /* list dengan bentuk alpha */
}
ol.mobil{
list-style-type: upper-roman;  /* list dengan bentuk romawi */
}

maka hasilnya


Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk membuat list dengan bentuk square bisa menggunakan property dan value css: list-style-type: square; /* list dengan bentuk square */
untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css: list-style-type: circle; /* list dengan bentuk lingkaran */
untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css: list-style-type: upper-alpha; /* list dengan bentuk alphabet */
untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css: list-style-type: upper-roman; /* list dengan bentuk romawi */

sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan propery dan value sebagai berikut: list-style-type: none; /* menghilangkan tanda list */
Sekian lah penjelasan singkat tentang cara mengubah list dengan CSS.

Sumber :

Komentar

Posting Komentar

Postingan populer dari blog ini

UML - STATEMACHINE DIAGRAM : PENGERTIAN SIMBOL DAN CONTOHNYA

Gambar
Pengertian State Machine Diagram Statemachine diagram adalah diagram UML yang memvisualisasikan sebuah transisi dan juga pergantian dari keadaan sebuah objek pada sistem. Perilaku suatu entitas tidak hanya merupakan konsekuensi langsung dari inputnya, tetapi juga tergantung pada keadaan sebelumnya. Sejarah masa lalu suatu entitas dapat dimodelkan dengan baik oleh diagram mesin keadaan terbatas atau secara tradisional disebut automata. UML State Machine Diagram (atau kadang-kadang disebut sebagai state diagram, state machine atau state chart) menunjukkan status yang berbeda dari suatu entitas. Diagram mesin keadaan juga dapat menunjukkan bagaimana suatu entitas merespons berbagai peristiwa dengan mengubah dari satu keadaan kekeadaan lainnya. State machine diagram adalah diagram UML yang digunakan untuk memodelkan sifat dinamis dari suatu sistem. Simbol State Machine Diagram Berikut ini adalah simbol state diagram: State : Digambarkan berbentuk segi empat dengan sudut membulat dan memili...
Baca selengkapnya

CSS : Cascading Style Sheets

 CSS biasanya disebut sebagai pasangan baik dari bahasa dasar pemrograman  website  yang wajib dikuasai, yaitu HTML. Lantas, mengapa CSS bisa mendapat sebutan itu? Selain itu, apa sebenarnya CSS itu dan apa kegunaannya? Apa Itu CSS dan Apa Kegunaannya? CSS adalah salah satu istilah teknis dalam pemrograman. Meski sering dianggap sebuah bahasa pemrograman, CSS bukanlah bagian dari bahasa itu. Kata  Tech Terms , CSS adalah salah satu  styling language  (bahasa desain), bagian dari  markup language  yang dapat “mewarnai” atau mendesain suatu halaman  website . CSS sendiri adalah singkatan dari Cascading Style Sheet.  Markup language  ini biasanya dipasangkan dengan  markup language  (bahasa marka) seperti HTML. Intinya, CSS merupakan  tools  pelengkap HTML yang digunakan untuk mengubah tampilan suatu situs. Kelebihan Menggunakan CSS HTML boleh menjadi bahasa dasar yang dapat membuatmu membangun  website . Selai...
Baca selengkapnya

Bootstrap: Pengertian, Kegunaan, Kelebihan, dan Kekurangannya

Gambar
Apa Itu Bootstrap? Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk mendesain website  responsive  dengan cepat dan mudah.  Framework open source ini diciptakan pada tahun 2011 oleh Mark Otto dan Jacob Thornton dari Twitter. Itulah kenapa dulunya Bootstrap dinamakan  Twitter Blueprint .  Bootstrap dengan cepat meraih popularitas digunakan oleh  27% website di seluruh dunia . Hal itu karena kesederhanaan dan konsistensi yang ditawarkan Bootstrap dibanding framework lainnya saat itu.  Kemudahan yang ditawarkan oleh Bootstrap adalah Anda tak perlu  coding  komponen website dari nol. Framework ini tersusun dari kumpulan file CSS dan JavaScript berbentuk  class  yang tinggal pakai.  Class  yang disediakan Bootstrap juga cukup lengkap. Mulai dari  class  untuk layout halaman,  class  menu navigasi,  class  animasi, dan masih banyak lainnya.  Menariknya lagi, Bootstrap ...
Baca selengkapnya