Design the Web: Using Counters and Resets in CSS

- [Voiceover] Hi, my name is Chris Converse, and welcome to Design the Web. In this episode, we'll be using counters and resets in CSS to number HTML elements in a webpage. Now typically, numbered lists are achieved by using ordered lists. However, CSS can be used to count any element in your HTML page. This can be very useful for numbering photos or diagrams on your page, numbering headings or content sections, and this is all achieved without altering any of the HTML in your page. So if you move content around in the HTML page, the CSS properties will automatically update the numbered items in the browser.

Now in this course, we'll create multiple CSS counters in the same page to count headings and figures. And we'll even reset the counters partway through the page based on other elements. And finally, the exercise files for this course are available to all members. So download your files, and let's start creating some custom counters and resets with CSS.