title: How to add section numbers (1.2, 3.4.1) automatically using CSS?
body: <p>How to add section numbers (1.2, 3.4.1) automatically using CSS?</p>
  
  <p>I currently have</p>
  
  <pre><code>h1, h2, h3, h4 {
    font-weight: normal;
  }
  h1 { font-size: 140%; }
  h2 { font-size: 120%; color:#049;}
  h3 { font-size: 110%; color:#06C;}
  h4 { font-size: 105%; color:#09C;}
  </code></pre>
  
  <p>How to modify them so section numbers such as 1.3, 2.4.5 are automatically constructed depending on the nesting level and order of appearance of the section headers?</p>
  
  <pre><code>...
  
  &lt;h2&gt;heading21&lt;/h2&gt;
  ...
  
  &lt;h3&gt;heading31&lt;/h3&gt;
  ...
  
  &lt;h2&gt;heading22&lt;/h2&gt;
  </code></pre>
  
  <p>should show</p>
  
  <ol>
  <li><p>heading21</p>
  
  <p>1.1 heading31</p></li>
  <li><p>heading22</p></li>
  </ol>
  
  <p>or something along those lines. </p>