Multilevel Paragraphs

Automatic numbering

by Ovi Stof

HTML

<div style="background:lightyellow;border:2px solid yellow;">
  <div class="niveluri">
    <h1>Mauris consequat nibh massa</h1>
    <h2>Maecenas euismod justo at turpis ultricies scelerisque</h2>
    <p>Fusce aliquet lorem non auctor egestas. Aenean vulputate mi felis, vitae faucibus risus tincidunt non.</p>
    <h2>Maecenas eget cursus sapien</h2>
    <p>Suspendisse luctus imperdiet arcu nec fermentum. Morbi vitae nisi et arcu egestas posuere.</p>
    <h2>Interdum et malesuada fames ac ante ipsum primis in faucibus</h2>
    <p>Suspendisse dui ante, sagittis id sagittis eget, porta aliquam magna.</p>
    <h1>Integer vitae lacus aliquet, bibendum nisi vitae</h1>
    <p>Vivamus malesuada malesuada tempor. Donec orci urna, tristique ut blandit eget, tempor sit amet ex. Vestibulum elementum odio ac varius tempus.</p>
    <h2>Nulla sed dui sit amet turpis posuere cursus nec a mauris</h2>
    <h3>Posuere cursus nec a mauris</h3>      
    <p>Duis sed leo non tellus vulputate porttitor sit amet eu metus. Ut at leo sit amet nulla eleifend ullamcorper. </p>
    <h3>Posuere cursus nec a mauris</h3>      
    <p>Nunc at pellentesque metus. Pellentesque at nisl sagittis, iaculis augue in, fermentum erat.</p>
    <h3>Suspendisse tempor, enim in egestas tempor</h3>      
    <p>Aenean leo enim, feugiat quis mi nec, dignissim viverra turpis. Aliquam ut tortor faucibus nibh gravida bibendum.</p>	
    <h3>Aenean non lectus dapibus, facilisis turpis in, faucibus lectus</h3>    
    <p>Nunc ut eleifend eros, sed tempus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ut nibh lectus. </p>		  
    <h2>Duis ullamcorper nibh lacus, et consectetur tortor sodales vitae</h2>
    <p>Suspendisse sed ex nec ante laoreet dapibus. Phasellus ut justo a ipsum dapibus efficitur. </p>
    <h2>Mauris ante mauris, ullamcorper sed augue sed, tempus suscipit nibh</h2>
    <p>Aliquam ultricies vel ex in consequat.</p>
    <h1>Nulla facilisi</h1>
   ...

CSS

/* Multilvel Paragraphs */		
div.niveluri h1, div.niveluri h2, div.niveluri h3, div.niveluri p {margin-top:0; margin-bottom:0;padding-top:0; padding-bottom:0;color:DimGrey; font-family:Tahoma}
div.niveluri h2 {color:blue}
div.niveluri h3 {color:Maroon}				
div.niveluri {counter-reset: nivel1; /* Set "nivel1" to 0 */border-bottom:2px dashed turquoise; }
div.niveluri h1 {counter-reset: nivel2;/* Set "nivel2" to 0 */border-top:2px dashed turquoise;text-align:center;}
div.niveluri h1::before {counter-increment: nivel1; content: "Cap. " counter(nivel1, upper-roman) ": ";color:red;font-variant:small-caps;font-family:Arial;background:lightyelllow}   
div.niveluri h2 {counter-reset: nivel3;margin-left:1px;}
div.niveluri h2::before {counter-increment: nivel2;	content: counter(nivel1) "." counter(nivel2) " ";color:Indigo;}
div.niveluri h3 {margin-left:30px;}	  
div.niveluri h3::before {counter-increment: nivel3;	content: counter(nivel1) "." counter(nivel2) "." counter(nivel3) " ";color:IndianRed;}    
div.niveluri p {margin-left:60px;font-size:18px;}