Friday

Today we're going to take a look at CSS Counters, which are a way of creating more dynamic ordered lists. I don't expect many of you to need this bit of code, which is why it is not being included in any of the weekly coding challenges. In terms of coding, you will use the property counter-reset: section; to create the counter - you can set this at the body level.

If you want to have your ‹h1› elements to be counted (as, say, part of an outline), then you would add the following declaration:
  h1::before {
   counter-increment: section
   content: "some_name " counter(section) ": ";
  }

I will spend a few minutes of class time walking you through the effect of that code, since I understand that it is not obvious simply from looking at it here.

Because the options can be a little confusing, I recommend you spend some time working through the exemplars in W3Schools' section on CSS Counters.