Pengenalan Property List-Style-Type Pada CSS

artikel ini aka membahas mengenai property yang lain pada css yaitu Property List-Style-Type , fungsi dari property ini adalah untuk mengatur tipe unordered list apakah berbentuk simbol, bulat atau angka. Biasanya kita menggunakan tag <ul> hanya untuk membuat menu nav bar dan secara default <ul> memiliki style list doted atau bulat-bulat , nah bagaimana kalau kita butuh angka atau simbol untuk membuat list item ?

yups inilah kegunaan property List-Style-Type 🙂

oke langsung saja kalian lihat prakteknya yaa,,

Ada beberapa value dari property list-style-type yang harus kalian ketahui yaitu :

List-Style-Type: disc;

List-Style-Type: circle;

List-Style-Type: square;

List-Style-Type: decimal;

List-Style-Type: decimal-leading-zero;

List-Style-Type: low-roman;

List-Style-Type: upper-roman;

Salin code di bawah :

//HTML

<div class="container">
  <p>
    Disc:
  </p>
  <ol class="disc">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    Circle:
  </p>
  <ol class="circle">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    Square:
  </p>
  <ol class="square">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    decimal:
  </p>
  <ol class="decimal">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    decimal-leading-zero:
  </p>
  <ol class="decimal-leading-zero">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    lower-roman:
  </p>
  <ol class="lower-roman">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    upper-roman:
  </p>
  <ol class="upper-roman">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    georgian:
  </p>
  <ol class="georgian">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    armenian: 
  </p>
  <ol class="armenian">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    lower-latin (lower-alpha):
  </p>
  <ol class="lower-alpha lower-latin">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    upper-latin (upper-alpha):
  </p>
  <ol class="upper-alpha upper-latin">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    lower-greek:
  </p>
  <ol class="lower-greek">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
  <p>
    none:
  </p>
  <ol class="none">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ol>
</div>

//CSS

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 400px;
}

ol {}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

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

.decimal {
  list-style-type: decimal;
}

.decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

.lower-roman {
  list-style-type: lower-roman;
}

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

.georgian {
  list-style-type: georgian;
}

.armenian {
  list-style-type: armenian;
}

.lower-latin {
  list-style-type: lower-latin;
}

.upper-latin {
  list-style-type: upper-latin;
}

.lower-greek {
  list-style-type: lower-greek;
}

.none {
  list-style-type: none;
}

Silahkan kalian jalankan di browser kalian masing-masing dan lihat hasilnya ,

Oke itu saja artikel kali ini sampai bertemu pada artikel selanjutnya. 🙂

Happy Holiday 😀

Pengenalan Property List-Style-Type Pada CSS

Kategori