Membuat Style Pada List Nomor Dengan CSS

Hallo teman-teman DUMET School, pada tutorial kali ini kita akan coba membuat style yang menarik pada List Nomor yang ada di HTML menggunakan CSS. List Nomor di dalam HTML biasanya digunakan untuk membuat daftar list yang di tandai dengan angka 1, 2, 3, dan seterusnya. Di dalam HTML untuk membuat list yang berbentuk angka seperti itu kita dapat menggunakan Tag HTML <ol>, nah nanti kita akan coba memberikan style yang menarik pada list nomor tersebut. Baik kita akan coba langsung membuatnya saja ya teman-teman.

Pertama kalian bisa buat satu file dengan nama index.html, dan buat struktur HTML nya seperti gambar di bawah ini.

Kemudian untuk CSS nya kalian bisa ikuti seperti gambar di bawah ini.

Pada CSS di atas kalian bisa lihat, disitu saya menggunakan teknik CSS pseudo-element :before untuk membuat style pada List Numbered.

Maka kalau kalian jalankan hasilnya akan seperti berikut ini.

14 November 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat