How to define a number sections and sub-sections with section in CSS ?

In this article, we will learn how to define a number of sections and sub-sections with the section in CSS. The section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections.

Counters in CSS are basically variables that can be used for numbering and values of CSS counters may be incremented by CSS rules. So to solve this task, we will use the CSS counters properties which are the following.

counter-reset: It is used to reset a counter.
Syntax:
```
counter-reset: myCounter;
```
counter-increment: It basically increments a counter value.
Syntax:
```
counter-increment: myCounter;
```
content: It is used to generate content.
counter() or counters() function: The value of a counter can be displayed using either the counter() or counters() function in a content property. These two functions basically used to add the value of a counter to the element.
Syntax:
```
content: counter(myCounter);
```

By following steps we can define a number of sections and sub-sections with the section in CSS:

Step 1: First, we create a counter for the page using the counter-reset property in the body selector and subsection in the h2 selector.
```
body {
  counter-reset: counter1;
}
h2{
  counter-reset: counter2;
}
```
Step 2: Now increment the value of the counter1 for each section and the counter2 value for each subsection using the counter-increment property and then add counter1 value before h2 and counter2 value before h3 using the content and the counter() property.
```
h2:before {
   counter-increment: counter1;
   content: "Section " counter(counter1) ". ";
}
h3:before {
   counter-increment: counter2;
   content: counter(counter1) "." counter(counter2) " ";
}
```

HTML Code: Below is the full implementation of the above approach.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

        div{ 

            color: green; 

            font-size: 50px; 

            margin: 50px 50px; 

        } 

        body { 

                counter-reset: counter1; 

            } 

            h2 { 

                counter-reset: counter2; 

            } 

            h2:before { 

                counter-increment: counter1; 

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

            } 

            h3:before { 

                counter-increment: counter2; 

                content: counter(counter1) "." counter(counter2) " "; 

            } 

    </style> 

</head> 

<body> 

    <div>GeeksforGeeks</div> 

    <h2>CSS</h2> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h2>CSS</h2> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h2>CSS</h2> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

    <h3>GeeksforGeeks</h3> 

</body> 

</html>

Output:

Counter output

Article Tags :

CSS

Web Technologies

CSS-Properties

HTML-Questions