# Examples for customized Table of Contents
In this section there are some formatting examples of generating Table of Contents. The HTML code is the same in all cases.
## Example for flat Table of Contents
The HTML source of a Table of Contents - the flat type
```html
```
### The default flat-type Table of Contents
The custom stylesheet:
```css
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}
```
The output:
### No line to the page numbers
The custom stylesheet:
```css
.table-of-contents .cex-toc-page-number::after{
content: leader(" ") target-counter(attr(href), page, decimal);
}
```
The output:
### "-" character as line to the page numbers
The custom stylesheet:
```css
.table-of-contents .cex-toc-page-number::after{
content: leader(" - ") target-counter(attr(href), page, decimal);
}
```
The output:
### No headings
The custom Stylesheet:
```css
.cex-toc-counter {
display: none;
}
```
The output:
### No bold style for pages
The custom stylesheet:
```css
.table-of-contents .cex-toc-ref-to-page {
font-weight: normal;
}
```
The output:
### Heading levels with different font weight
The custom stylesheet:
```css
.table-of-contents .cex-toc-container-level-0 {
font-weight: 900;
}
.table-of-contents .cex-toc-container-level-1 {
font-weight: 700;
}
.table-of-contents .cex-toc-container-level-2 {
font-weight: 600;
}
.table-of-contents .cex-toc-container-level-3 {
font-weight: 400;
}
.table-of-contents .cex-toc-container-level-4 {
font-weight: 300;
}
.table-of-contents .cex-toc-container-level-5 {
font-weight: 100;
}
```
The output:
## Example for hierarchical Table of Contents
The HTML source of a Table of Contents - the hierarchical type
```html
```
### Default settings for generating Table of Contents
The custom stylesheet:
```css
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.hierarchical .cex-toc-container {
margin-left: 10px;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}
```
The output:
### Bigger spaces in case of levels
The custom stylesheet:
```css
.table-of-contents.hierarchical .cex-toc-container {
margin-left: 20px;
}
```
The output:
### A narrower Table of Contents
The custom stylesheet:
```css
.table-of-contents {
margin: 0 120px 0 120px;
}
```
The output:
