Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Section Counter Using HTML and CSS?
As websites grow in complexity, it becomes increasingly important for web developers to implement intuitive and user-friendly navigation systems that allow users to easily explore the content on a webpage. One such navigation element that has gained popularity in recent years is called the section counter, which provides users with a clear understanding.
What is a section counter?
A section counter in HTML and CSS is a visual element that displays the current section number or position of the user in a webpage, usually displayed in a navigation menu or alongside the section header.
Section counters are helpful for users to keep track of where they are on a webpage, especially if the webpage has many sections or sub sections. With section counters, users can quickly switch to the section they want, and can also see the overall structure of the webpage.
Section counters are usually implemented using CSS counters, which allow web developers to create and manipulate counters for a variety of purposes. By using CSS to style and display the counter, web developers customize the appearance of the counter to fit the design and aesthetics of the website.
Section Counter properties
To create a section counter in HTML and CSS, we need the following properties.
counter-reset − The counter-reset property is used to initialize a CSS counter. A counter is a variable that can be incremented or decremented using the counter-increment property, and it is commonly used to keep track of the number of times an element on a webpage.
counter-increment − The counter-increment property is used to increment a CSS counter. We use this property to increase the value of the counter each time a specific element appears on the webpage.
content − The content property is used to specify the content that should be displayed for an element.
Example 1
Here is simple example on section counter using HTML and CSS
<html>
<head>
<style>
body {
counter-reset: section;
background-color:#dee3e0;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
</style>
</head>
<body>
<h2>First Secction</h2>
<p>This is the first section of my website.</p>
<h2>Second Section</h2>
<p>This is the second section of my website.</p>
<h2>Third Section</h2>
<p>This is the third section of my website.</p>
</body>
</html>
Example 2
In the below example, we create an animated section counter with the help of HTML and CSS.
<!DOCTYPE html>
<html>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
* {
box-sizing: border-box;
}
/* 4 counters of 25% of screen size*/
.column {
float: left;
width: 25%;
padding: 4px;
}
.row {
margin: 5px;
}
/* Style the block*/
.block {
padding: 10px;
text-align: center;
background-color: #bccfc1;
color: black;
}
/* Styling when mouse will move over the counter*/
.block:hover {
transform: scale(1.1);
background-color: red;
transition-duration: 2s;
color: white;
}
.fa {
font-size: 60px;
}
</style>
</head>
<body>
<center>
<h3> Create Counter Section using HTML and CSS </h3>
<section class="row">
<section class="column">
<section class="block">
<p><i class="fa fa-user"></i></p>
<h3>200000+</h3>
<p>Users</p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-book"></i></p>
<h3> 7000+ </h3>
<p> Courses </p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-smile-o"></i></p>
<h3> 15M+ </h3>
<p> Visitors </p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-certificate"></i></p>
<h3> 1M+ </h3>
<p> Certificates </p>
</section>
</section>
</section>
</center>
</body>
</html>
Conclusion
Creating a section counter using HTML and CSS is a simple way to help visitors navigate the website. By organizing content into sections and using CSS to display the counter, we can make it easier for users to keep track of where they are on the site. With the basic HTML and CSS techniques, we can create a section counter that works for the website and helps improve the user experience.
634 Views
To Continue Learning Please Login