CSS/C4/Counters-in-CSS/English

From Script | Spoken-Tutorial
Revision as of 07:15, 6 January 2021 by Nehasolanki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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:
  • 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

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

Contributors and Content Editors

Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C4/Counters-in-CSS/English&oldid=54638"