×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS Counter


This property acts like variables and to these variable values we can also able to increment the values through this property. It have some following properties:-

  • counter-reset :Initialize the counter
  • counter-increment : Increment the counter value
  • content : Content is generated
  • counter() : Adds value to the counter

Let's understand this by the following program:-


<!DOCTYPE html>

<html>

<head>

<style>

body {

      counter-reset: paragraph;

}

h2::before {

     counter-increment: paragraph;

      content: "Paragraph " counter(paragraph) ": ";

}

</style>

<head>

<body>

<h2> Java Tutorial </h2>

<h2> AWS Tutorial </h2>

<h2> Python Tutorial </h2>

<h2> Javascript Tutorial </h2>

</body>

</html>


Output of the Program



Java Tutorial

AWS Tutorial

Python Tutorial

Javascript Tutorial

So this is how to counter a page and increment the counter value for each next element..




Nesting Counters

Also we can create the counter inside counter . It is called nesting of counters.

Let's understand this y the following example :-

<!DOCTYPE html>

<html>

<head>

<style>

body {

      counter-reset: section;

}

h1 {

      counter-reset: subsection;

}

h1::before {

     counter-increment: section;

     content: "Section " counter(section) ". ";

}

h3::before {

      counter-increment: subsection;

      content: counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<h1> Java tutorials </h1>

<h3> Core Java tutorial </h3>

<h3> Servlet tutorial </h3>

<h1> Web technology tutorials </h1>

<h3> HTML tutorial </h3>

<h3> CSS tutorial </h3>

<h1> Database tutorials </h1>

<h3> SQL tutorial </h3>

<h3> MySQL tutorial </h3>

</body> </html>


Output of this Program :-

Java tutorials:

Core Java tutorial

Servlet tutorial

Web technology tutorials:

HTML tutorial

CSS tutorial

Database tutorials:

SQL tutorial

MySQL tutorial







CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute