Add Section Numbers to Headings
You have all seen printed documents where the document is broken up int sections and sub-sections with the section numbering being included in the headings. If you have been trying to achieve a similar appearance in a web page then you have probably hard codedc all of the section numbering into the headings themselces. Unfortunately doing theis means that if you need to add a new section or sub-section then the ones following it all need to be renumbered. If you miss updating one then all of the numbering will be out.
Instead of numbering them manually we can use stylesheets to add the section numbers to all of our sections for us. The following code uses the stylesheet counter and counter-increment attributes to number the H1 headings as sections and will label the H2 headings as sub-sections within those sections. Extending the code to further levels is also possible.
h1:before {content: "Section " counter(section) ". ";
counter-increment: section;
counter-reset: sub-section;
}
h2:before {content: counter(section) "." counter(sub-section) " ";
counter-increment: sub-section;}
