CSS/C4/Counters-in-CSS/English
Title of the script: Counters in CSS
Author: Neha Solanki
Domain Reviewer: Ankita Maske, Om Prakash Soni
Novice Reviewer: Madhuri Ganapathi
Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Counters, CSS counter-reset, CSS counter-increment, CSS content, CSS counter() or counters() function
Visual Cue | Narration |
Slide: Title | Welcome to the spoken tutorial on Counters in CSS. |
Slide: Learning Objectives | In this tutorial we will learn about:
|
Slide:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
Slide: Prerequisite | To practise this tutorial, you should know to use HTML and CSS.
If not, please go through the HTML and CSS tutorials on this website. |
Slide: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. Make a copy and then use them while practising. |
Slide: Counters |
|
Slide: Counter Property | The properties used for counters are:
|
Slide: counter-reset |
|
Slide: counter-increment |
|
Slide: content |
|
Slide: counter() or counters() function |
Let us understand these through examples. |
Open my-css folder | Go to the practice folder my-css. |
Point to Mycounter.html in my-css folder | For this demonstration, I’m using the file Mycounter.html.
The same is available in the Code files link for practice. |
Open Mycounter.html in gedit | Open the file Mycounter.html in the text editor.
I have opened it in the gedit Text Editor. |
[gedit - Mycounter.html]
Highlight: All code |
This HTML file has one h1 heading - Welcome to Farmer's Market.
This is followed by three h2 headings, having their respective content. |
Switch to my-css folder | Switch to the my-css folder. |
Open counterstyle.css | Now open the file counterstyle.css in any text editor.
I have opened it in the gedit Text Editor. |
[gedit - counterstyle.css]
Highlight: All code |
Here, I have already defined some properties for body and h1 heading. |
Open Mycounter.html in firefox | Switch to the my-css folder.
Now open the file Mycounter.html in a web browser. I have opened it in the Firefox web browser. |
[Firefox]
Highlight the page |
Observe the page.
In this page, we can see three h2 headings: Vegetables, Fruits, Dry Fruits. Now I will apply counter properties to these headings. |
Switch to counterstyle.css | Switch to the counterstyle.css file. |
[gedit - counterstyle.css]
Type: counter-reset: countval; |
First I will create a counter.
Inside the body tag, next to the background-color property, type the code as shown. A Counter named countval is created. |
[gedit - counterstyle.css]
Type: h2::before {counter-increment: countval; content: "Category " counter(countval) ". ";} |
Now I will assign this counter to h2 heading.
Next to the h1 tag, type the code as shown. |
[gedit - counterstyle.css]
Highlight: h2::before |
Counters will be displayed before the heading content. |
[gedit - counterstyle.css]
Highlight: counter-increment: countval; |
By using counter-increment property I have incremented the countval counter. |
[gedit - counterstyle.css]
Highlight: content: "Category " ". "; counter(countval) |
Here content property will generate the word “category” first.
Then it will generate the counter value followed by the dot symbol. Here countval is assigned to the counter function. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Now, Category 1. Category 2. Category 3. are added before the content of the headings. Here the word “Category” is the content added to the counter. 1, 2 and 3 are the counters. |
Slide: Nested Counters |
Let us try this. |
Switch to counterstyle.css | Switch to the counterstyle.css file. |
Point to h1 heading.
Highlight h1 heading. |
First I will create a counter for h1 heading “Welcome to Farmer's Market”
Then I will create h2 heading counters within the h1 heading counter. |
[gedit - counterstyle.css]
Update: counter-reset: countmain; |
For this, create a counter named countmain for h1 heading.
Inside the body tag, update the counter-reset property as shown. |
[gedit - counterstyle.css]
Type: counter-reset: countval; |
Now I will create a counter named countval for h2 heading inside h1 heading.
Inside the h1 tag, next to the text-align property, type the code as shown. |
[gedit - counterstyle.css]
Type: h1::before { counter-increment: countmain; content: counter(countmain) ". ";} |
I will assign the counter countmain to h1 heading.
Next to h1 tag, type the code as shown here. |
[gedit - counterstyle.css]
Update: h2::before { counter-increment: countval; content: counter(countmain) "." counter(countval) " ";} |
Now I will assign the counter countval to h2 heading.
Update the h2::before property as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Counter “1. ” is displayed before the heading “Welcome to Farmer's Market”. Counter “1. ” is displayed as a main counter. The sub-counters for h2 headings are displayed as: 1.1 Vegetables 1.2 Fruits 1.3 Dry Fruits In this manner, you can add counters to your webpage, as per your requirements. |
Only narration | With this we have come to the end of this tutorial.
Let us summarize. |
Slide: Summary | In this tutorial, we have learnt about:
|
Slide: Assignment | As an assignment
|
Slide: About Spoken Tutorial project | The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide: About Workshop | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide: Forum questions | Please post your timed queries on this forum. |
Slide: Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. |
Slide: Thanks | This is Neha Solanki from IIT Bombay.
Thank you for watching. |