Pengenalan Property List-Style-Type Pada CSS

artikel ini aka membahas mengenai property yang lain di css yaitu  Property List-Style-Type , manfaat dari property ini yakni bagi mengatur tipe unordered list apakah berbentuk simbol, bulat atau angka.  Biasanya kita menggunakan tag <ul> hanya bagi merancang fitur nav bar dan secara default <ul> mempunyai style list doted atau bulat-bulat , nah bagaimana kalau kita butuh angka atau simbol bagi merancang list item ?

yups inilah kegunaan property List-Style-Type 🙂

oke seketika saja kalian lihat prakteknya yaa,,

Ada beberapa value dari property list-style-type yang mesti 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 hingga bertemu di artikel berikutnya. 🙂

Happy Holiday 😀

Sumber https://kursuswebsite.org