Nehasolanki: Created page with "'''Title of the script: '''Counters in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyw..."

2021-01-06T01:45:32Z

Created page with "'''Title of the script: '''Counters in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyw..."

New page

'''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

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on '''Counters in CSS'''.
|-
| | Slide: Learning Objectives
| | In this tutorial we will learn about:

* '''Counters '''in''' CSS '''and
* Their properties and usage

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
| | Slide: Prerequisite

https://spoken-tutorial.org
| | 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
| |
* '''Counters''' are variables used for numbering '''elements''' automatically in the '''webpage.'''
* They are incremented by '''CSS''' rules.

|-
| | Slide: Counter Property
| | The properties used for '''counters''' are:

* '''counter-reset '''
* '''counter-increment'''
* '''content'''
* '''counter() '''or''' counters() function'''

|-
| | Slide: counter-reset
| |
* '''Counter-reset''' property is used to create a '''counter''' or reset a '''counter''' value.
* By default, the '''counter''' value is initialized to '''zero'''.

|-
| | Slide: counter-increment
| |
* '''Counter-increment''' property is used to increment '''counter '''values.
* It is useful for automatically increasing step values.

|-
| | Slide: content
| |
* '''Content''' property is used to generate content for an '''element'''

|-
| | Slide: counter() or counters() function
| |
* '''counter() '''or''' counters() function '''assigns the '''counter''' value to an '''element'''.

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
| | '''Counter'''s 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
| |
* '''Nested counter''' means a '''counter''' within a '''counter'''.

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:

* '''Counters '''in''' CSS '''and
* Their properties and usage

|-
| | Slide: Assignment
| As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add three '''h3 headings.'''
* Open the file '''styles.css '''which you have created earlier.
* Set '''counter '''for''' h3 headings'''
* Link the '''styles.css''' file to '''webpage.html''' file

* Observe the output

|-
| | 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.
|-
|}

CSS/C4/Counters-in-CSS/English - Revision history

Nehasolanki: Created page with "'''Title of the script: '''Counters in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyw..."