From the course: HTML: Images and Figures

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Autonumbering figures with CSS

Autonumbering figures with CSS - HTML Tutorial

From the course: HTML: Images and Figures

Start my 1-month free trial

Autonumbering figures with CSS

- [Instructor] When a document like a manual or scientific paper is written. Often times, captions include a prefix like figure one, figure two, and so on. Let me show you what I mean. By searching Google Scholar for web design, I'll scroll down a bit and look at this article about sitemaps and storyboards. And if I scroll down, here's figure two with a caption below it. Let's add figure numbers to the figures we created in the preceding video. In our HTML, we could type the words figure one, figure two and so on inside each fig caption. But the browser can do that for you with CSS. To start the process, lets establish a name to counter in the CSS for the body element and reset it to zero. You do that by specifying the counter reset property and the name of the counter. And figure counter seems like a pretty good name. The next step is to specify the text to be added before the text inside each fig caption element. So I say fig caption before and when that occurs, the first thing to…

Contents