Hallo teman-teman pada kesempatan kali ini saya akan membahas cara penggunaan CSS Counter Part I. Sebelum memulai kita harus mengetahui definisi dari CSS Counter itu sendiri, oke langsung saja penjelasan singkat tentang CSS Counter adalah sebuah variable yang di kelola oleh CSS untuk penomoran secara otomatis.
Bagaimana ? apakah teman-teman sudah dapat memahaminya ? jika masih belum memahaminya mari kita mulai praktekan agar teman-teman dapat memahaminya dan dapat menyimpulkannya kembali mengenai CSS Counter itu sendiri.
Oke tanpa panjangan lebar lagi langsung saja kita praktekan penggunaan CSS Counter Part I pertama-tama seperti biasa siapkan text-editornya dan browsernya lalu ketik script HTML dibawah ini kedalam text-editor yang teman-teman gunakan :
<h1>Penggunaan CSS Counters :</h1> <h2>HTML</h2> <h2>CSS</h2> <h2>JavaScript</h2>
Jika sudah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya harus .html, kemudian langkah selanjutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya untuk css adalah .css :
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Nomor " counter(section) ": ";
}
Jika script HTML dan CSS nya sudah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Jika sudah maka hasilnya pada browser akan menjadi seperti pada gambar dibawah ini :
Oke jika hasil yang didapat sudah seperti pada gambar diatas maka teman-teman dinyatakan telah berhasil dalam membuat CSS Counter Part I. dan alangkah baiknya teman-teman dapat menyimpulkannya dari materi yang saya bahas dan teman-teman dapat membagi ilmunya kepada teman-teman yang lain dengan versi sendiri.
Sekian pembahasan singkat tentang penggunaan CSS Counter Part I ini semoga dapat bermanfaat bagi teman-teman. Dan jangan lupa tunggu part-part seterusnya.
Terimakasih