Mengenal Property CSS Counter-Increamnet Pada CSS

Pada tutorial kali ini anda akan belajar dan Mengenal Property CSS Counter-Increamnet Pada CSS sebelum kita mencoba membuatnya kita harus tahu dahulu sebenarnya untuk apa properti ini, mungkin dari kalian masih asing dengan properti css ini.

Properti counter-increament merupakan sebuah properti di css yang berguna untuk membuat number sections dan sub-sections, apakah kalian tau yang di maskud saya dengan number section dan sub-section ?

pernahkah kalian membuat sebuah papper di microoft word ? pasti tidak asing dengan pengurutan sub bab seperti gambar berikut :

tahu kan ? hhehe yupss seperti itulah yang kita akan buat tetapi tidak menggunakan microsoft word melainkan dengan css, coba salin html dan css berikut ini:

HTML

<!DOCTYPE html>
<html>
<head>
</head>

<body>


<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

CSS

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

dari kode di atas maka akan di tampilkan tampilan sebagai berikut :

baiklah itu saja dari saya tentang Mengenal Property CSS Counter-Increamnet Pada CSS silahkan di coba dan di implementasikan sesuai dengan kasus atau projectnya dan semoga bermanfaat,

Mengenal Property CSS Counter-Increamnet Pada CSS

Kategori