How to change list numbering

Short answer

The list-style-type property changes the look of the numbers:

<ol style="list-style-type: upper-roman;">
  <li>Introduction</li>
  <li>Main part</li>
  <li>Conclusion</li>
</ol>

Common values: decimal (1, 2, 3), decimal-leading-zero (01, 02), lower-alpha (a, b, c), upper-roman (I, II, III).

Starting from another number

The start attribute sets the first number, and reversed counts down:

<ol start="5">
  <li>Fifth step</li>
  <li>Sixth step</li>
</ol>
 
<ol reversed>
  <li>Bronze</li>
  <li>Silver</li>
  <li>Gold</li>
</ol>

A single item can get its number with the value attribute: <li value="10">.

Styling the numbers themselves

The ::marker pseudo-element changes the color, weight and size of the numbers:

<style>
  li::marker { color: crimson; font-weight: 700; }
</style>
 
<ol>
  <li>Preheat the oven</li>
  <li>Mix the flour and eggs</li>
</ol>

Common mistake

The numbers are typed right into the items of a bulleted list: "1. Preheat…". When a step is added in the middle, all the numbers must be rewritten by hand, and screen readers do not know the list is ordered. For sequential steps use <ol> — the browser numbers them itself.