Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Automate Numbering: Incremental Numbering with CSS

The advantage to this method, instead of just numbering all the steps manually, is that if you need to insert a new step or sub-step after the list is built, the numbering will automatically adjust so you don’t have to go through each entry and renumber them manually.

Here’s an example…

The HTML

Notice in the code below there are no numbers after the "step" verbiage. The incremental numbering is all accomplished with CSS. Here's the HTML for that:

<div class="autoSteps" style="max-width: 620px;">
 <h2>Step </h2> This is the first step. 
   <div class="indent">
   <h3>Step </h3> 
   This is a sub-step of step one. If you don't want the sub-steps indented simply remove the      
   last line from the CSS code, and remove the division tags with the "indent" class from the 
   HTML code.
   <h3>Step </h3> 
   This is another sub-step to step one.</div>
 <h2>Step </h2>
 This is step two. The "steps" and "sub-steps" numbering is generated by the CSS code. Neat!
<h2>Step </h2>
This is step three.
   <div class="indent">
   <h3>Step </h3>
   This is a sub-step to step three.
</div></div>

As you can see, none of the numbers shown on the page are written into the HTML code, only the word “Step ” is there. The browser itself inserts the numbers based on the CSS rules shown below.

To invoke the automated numbering just include the main steps in H2 heading tags; and place the sub-steps in h3 tags inside a division with class="indent" added to the division. Then, place the whole kaboodle inside a division with class="autoSteps" added to the opening division tag. These steps are all shown in the HTML example above.

Here’s the CSS:

.autoSteps 
  {counter-reset: Step;}

.autoSteps > h2
  {font-size: 1.7vw;} /* change the font size to suit */

.autoSteps > div.indent h3
  {font-size: 1.4vw;} /* change the font size to suit */

.autoSteps > h2:after 
  {content: counter(Step)")";
   counter-increment: Step;}

.autoSteps > h2 
  {counter-reset: subStep;}

.autoSteps > .indent > h3 
  {color: gray;} /* change the substep color to suit */

.autoSteps > .indent > h3:after 
  {content: counter(Step)"." counter(subStep)")";
   counter-increment: subStep;}

div.autoSteps > .indent {margin-left: 22px;} /* change how far the substeps indentation is */
div.autoSteps > h2, h3 {margin-bottom: 3px;} 

The first line creates a class named “autoSteps” and establishes “Step” for a reset value. I explained how the CSS counter worked in my last book, and if I recall correctly it took something like 4-5 pages.

Probably half the readers still didn’t get it. Most books I’ve seen don’t even bother trying to explain how it works. It’s an unnecessarily complex and convoluted system, so I’m not going to explain it here. You can still use it without understanding it.

I've made notes in the CSS code where you might want to make style changes. If you want to use something other than the right-hand parenthesis bracket after the step number you can change that as well. Just replace the one parenthesis bracket that is between the quotation marks at the end of line 11 for the main steps; and at the end line 21 for the sub-steps.

Make sure you only change the parenthesis brackets inside the quotation marks at the end those two lines—do not change the other parenthesis brackets or mice will infest your computer!

The last four characters on those two lines look like this:   ")";   ...only change that single parenthesis bracket.

You can use a period, ellipse, dash, colon, or whatever you want. Just don’t use a double quotation mark (which would be weird anyway) or it will break things.

If you don’t want to use the word “Steps” but would rather automate the numbering of “Chapters” or “Rules” (or whatever), just replace the word “Steps” inside the H2 and H3 headings with the word(s) you want to use.

That’s all there is to it. I hope you’ve enjoyed this tutorial. If not, send me a stick of Black Jack gum and I’ll let it slide this time.