The **`counter-reset` property** in #key# CSS: Cascade Style Sheets #key# sets or resets the counter values in  CSS.

---
> This property is used with the `content` and the `counter-increment` property. 
---

# 
#  Syntax

---
```css
counter-reset: none|name number|initial|inherit;
```
---

# 
## Property values

- **`none`**: It is the default value. We can not reset the value of the counter using this.

- **`id`**: It specifies the counter that has to be reset. The default reset value is 0. 

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits the property from its parent value.

##
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `counter-reset` property.

<title>Example</title>

<h1>Behzad</h1>	
<p>Content Creator.</p>

<h1>Abubakr</h1>
<p>Developer.</p>

<h1>Nouman</h1>	
<p>Web Developer.</p>

body {
  line-height: 1em;
  counter-reset: count;
}

h1 {
  font-size: 20px;
}

h1:before {
  content: "Employee" counter(count) ": ";
  counter-increment: count;
}

codemirror

# 
## Explanation

In this example, we make the counter on `Employee`. We reset the counter using the `counter-reset` property. This deletes any previous value in the count, and the count is set to 0.

What is the CSS counter-reset property?

The counter-reset property in CSS resets counter values, often used with content and counter-increment properties. 