Hallo sobat program, bertemu lagi dengan saya rizal dan masih diwebsite dumetschool. Pada kesempatan kali ini kita akan membahas tentang list list dalam html dan juga tutorial tentang Cara Memberikan Style pada Ordered List dengan HTML CSS.

Didalam html sudah disediakan 2 fungsi untuk membuat list yang pertama <ul> (unordered list) yang kedua <ol> (ordered list) dan 1 fungsi description list <dl>. Dari semua fungsi list diatas sebenarnya tujuannya sama yaitu membuat list dan dipembahasan kali ini kita akan coba menggunakan salah satunya yaitu Ordered List. Dan nantinya kita akan memberikan sedikit style sederhana untuk list tersebut.

Cara Memberikan Style pada Ordered List dengan HTML CSS

Oke untuk langkah awal jalankan/run text-editornya kemudian ketiklah kode membuat list seperti pada contoh dibawah ini :

Jika sudah, silahkan coba dijalankan terlebih dahulu. Hasilnya kita sudah berhasil membuat list ya teman-teman. Langkah berikutnya kita tambahkan sentuhan CSS agar lebih berwarna dan menarik. Teman-teman bisa tambahkan style CSS nya seperti pada contoh dibawah ini :

Jika sudah, silahkan direfresh dan hasilnya akan menjadi seperti pada contoh gambar dibawah ini :

Cara Memberikan Style pada Ordered List dengan HTML CSS

Oke seperti itulah contoh sederhana dalam membuat list serta Cara Memberikan Style pada Ordered List dengan HTML CSS. semoga dapat bermanfaat buat teman-teman dan silahkan explore lagi.

Sampai bertemu dipembahasan selanjutnya.

Terimakasih

Sumber :codepen.io