How to add section numbers (1.2, 3.4.1) automatically using CSS?

I currently have

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;}

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?

...

<h2>heading21</h2>
...

<h3>heading31</h3>
...

<h2>heading22</h2>

should show

  1. heading21

    1.1 heading31

  2. heading22

or something along those lines.

html css formatting
Edit
Report