Dengan menggunakan tag ol (ordered list) kita dapat membuat penomoran otomatis di CSS. Penomoran otomatis bisa diterapkan menggunakan angka, romawi atau latin. Secara teknis penerapan di CSS ini dilakukan dengan property list-style-type.
Sebagai contoh perhatikan coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html>
<head>
<title>List Style Type Penomoran</title>
<style type=”text/css”>
.angka
{
list-style-type: decimal;
}
.angka_lengkap
{
list-style-type: decimal-leading-zero;
}
.romawi_kecil
{
list-style-type: lower-roman ;
}
.romawi_besar
{
list-style-type: upper-roman ;
}
.latin_kecil
{
list-style-type: lower-latin ;
}
.latin_besar
{
list-style-type: upper-latin ;
}
ol{
margin-top: 0px;
margin-bottom:20px;
}
</style>
</head>
<body>
Penomoran dengan decimal:
<ol class=”angka”>
<li>Ini yang pertama</li>
<li>Ini yang kedua</li>
<li>Ini yang ketiga</li>
</ol>
Penomoran dengan romawi kecil:
<ol class=”romawi_kecil”>
<li>Ini yang pertama</li>
<li>Ini yang kedua</li>
<li>Ini yang ketiga</li>
</ol>
Penomoran dengan romawi besar:
<ol class=”romawi_besar”>
<li>Ini yang pertama</li>
<li>Ini yang kedua</li>
<li>Ini yang ketiga</li>
</ol>
Penomoran dengan latin kecil:
<ol class=”latin_kecil”>
<li>Ini yang pertama</li>
<li>Ini yang kedua</li>
<li>Ini yang ketiga</li>
</ol>
Penomoran dengan latin besar:
<ol class=”latin_besar”>
<li>Ini yang pertama</li>
<li>Ini yang kedua</li>
<li>Ini yang ketiga</li>
</ol>
</body>
</html>
Hasil dari coding di atas dapat dilihat di http://aris.proweb.asia/list_style_type_2.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.