CSS Counter Part I

Hallo teman-teman di kesempatan kali ini saya akan membahas cara pemakaian CSS Counter Part I. Sebelum memulai kita mesti mengetahui definisi dari CSS Counter itu sendiri, oke seketika saja penjelasan singkat mengenai CSS Counter ialah sebuah variable yang di mengatur oleh CSS bagi penomoran secara otomatis.

Bagaimana ? apakah teman-teman telah dapat memahaminya ? sekiranya 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 seketika saja kita praktekan pemakaian CSS Counter Part I pertama-tama seperti biasanya siapkan text-editornya dan browsernya lalu ketik script HTML dibawah ini kedalam text-editor yang teman-teman gunakan :

<h1>Pemakaian CSS Counters :</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>

Apabila telah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya mesti .html, kemudian langkah berikutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya bagi css ialah .css  :

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: Nomor  counter(section) : ;
}

Apabila script HTML dan CSS nya telah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Apabila telah karenanya hasilnya di browser akan menjadi seperti di gambar dibawah ini :

Oke sekiranya hasil yang didapat telah seperti di gambar diatas karenanya teman-teman dinyatakan telah berhasil pada membangun CSS Counter Part I. dan alangkah baiknya teman-teman dapat menyimpulkannya dari bahan yang saya bahas dan teman-teman dapat membagi ilmunya kepada teman-teman yang lain dengan versi sendiri.

Demikianlah pembahasan singkat mengenai pemakaian CSS Counter Part I ini semoga dapat bermanfaat untuk teman-teman. Dan jangan lupa tunggu part-part seterusnya.

Terimakasih

Sumber https://kursuswebsite.org