Styling the section Element

The title of any section must be bold and smaller than the title of the parent section. To create this effect, a sequence of CSS rules must be created. The * operator matches any element, it can be used to match titles having progressive depths in the document.

title{
    font-size: 2.4em;
    font-weight:bold;    
}
* * title{
    font-size: 2.0em;
}
* * * title{
    font-size: 1.6em;
}
* * * * title{
    font-size: 1.2em;
}

It's useful to have before the title a constant text, indicating that it refers to a section. This text can include also the current section number. The :before and :after pseudo elements will be used, plus the CSS counters.

First declare a counter named sect for each book or article. The counter is set to zero at the beginning of each such element:

book, 
article{
    counter-reset:sect;
}
                        

The sect counter is incremented with each section, that is a direct child of a book or an article element.

book > section,
article > section{
    counter-increment:sect;
}   

The "static" text that will prefix the section title is composed of the constant "Section ", followed by the decimal value of the sect counter and a dot.

book > section > title:before,
article > section > title:before{
    content: "Section " counter(sect) ". ";
}

To make the documents easy to read, you add a margin to the sections. In this way the higher nesting level, the larger the left side indent. The margin is expressed relatively to the parent bounds:

section{
    margin-left:1em;
    margin-top:1em;
}

In the above screenshot you can see a sample XML document rendered by the CSS stylesheet. The selection "avoids" the text that is generated by the CSS "content" property. This happens because the CSS generated text is not present in the XML document and is just a visual aid.