Typography

Basic HTML5 Elements

Headings, Paragraphs, Blockquotes, Table, Lists ( Definition, Ordered and Unordered ), Strong, Italic, Code and Pre with Dark and Light Skin

source:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate consectetur eros, vel sollicitudin nisi. Aenean non ante a turpis rutrum sodales. Quisque sit amet augue porta, bibendum tellus quis, gravida ante. Proin volutpat posuere sem, eu iaculis arcu ullamcorper fringilla.

Vestibulum laoreet bibendum metus sed pretium. Mauris commodo sem vel orci interdum sollicitudin. Sed condimentum odio id sollicitudin commodo. Integer luctus massa nunc, ac dapibus nunc dictum sit amet. Donec rutrum magna non auctor fringilla. Mauris ac lectus ut diam placerat dignissim.

Headline H1

Nullam in consectetur metus. Curabitur varius augue sed velit vehicula, a lobortis diam sodales. Duis a ipsum luctus, luctus est at, iaculis risus. Curabitur eu consectetur nisi, sed cursus nisi. Maecenas vitae nibh risus. Mauris sit amet erat enim. Maecenas viverra metus a tellus auctor fringilla.

Headline H2

Headline H3

Headline H4

Headline H5

Headline H6

Paragraphs

Duis a ipsum luctus, luctus est at, iaculis risus. Curabitur eu consectetur nisi, sed cursus nisi. Maecenas vitae nibh risus. Mauris sit amet erat enim. Maecenas viverra metus a tellus auctor fringilla. Donec hendrerit rutrum elit, vitae auctor magna luctus sit amet.

Blockquotes

Here are some example of using blockquote HTML Tag.

Nullam in consectetur metus. Curabitur varius augue sed velit vehicula, a lobortis diam sodales. Duis a ipsum luctus, luctus est at, iaculis risus.
Mr. Anderson

Table

Here are some example of using table HTML Tag.

Table heading 1	Table heading 2	Table heading 3
Table data 11	Table data 12	Table data 13
Table data 21	Table data 22	Table data 23
Table data 31	Table data 32	Table data 33
Table data 41	Table data 42	Table data 43

Table heading 1	Table heading 2	Table heading 3
Table data 11	Table data 12	Table data 13
Table data 21	Table data 22	Table data 23
Table data 31	Table data 32	Table data 33
Table data 41	Table data 42	Table data 43

Definition List

Here are some example of using dl, dt and dd HTML Tag.

Nam pretium nisi et diam ullamcorper porttitor: Nulla venenatis pretium ornare. Aliquam cursus tempus libero in lacinia. Proin sit amet tincidunt metus. In sit amet est in mi tempor finibus
In sed massa et ante vestibulum efficitur: Duis nulla diam, suscipit in volutpat sed, cursus vitae urna. Sed vitae dictum nibh. Phasellus sed blandit ipsum, elementum consectetur augue.
Vivamus bibendum eu velit quis porta: Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sapien turpis, congue sit …

Ordered List

Here are some example of using ol and li HTML Tag.

Morbi est nisi, sollicitudin nec lacus eu, facilisis tristique tellus
Vestibulum in leo auctor, finibus massa ut, dapibus mauris
Quisque dictum turpis at tempor mollis. Duis convallis placerat quam, ac scelerisque turpis ultrices sit amet
1. Quisque fringilla leo id mollis posuere. Etiam suscipit nisi vitae purus finibus interdum
2. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
3. Maecenas finibus maximus tortor. Vestibulum mauris neque, condimentum in magna sed, pharetra aliquam purus
Sed ullamcorper velit id imperdiet pellentesque. Maecenas laoreet porta leo, vel blandit nibh placerat a

Unordered List

Here are some example of using ul and li HTML Tag.

Morbi est nisi, sollicitudin nec lacus eu, facilisis tristique tellus
Vestibulum in leo auctor, finibus massa ut, dapibus mauris
Quisque dictum turpis at tempor mollis. Duis convallis placerat quam, ac scelerisque turpis ultrices sit amet
- Quisque fringilla leo id mollis posuere. Etiam suscipit nisi vitae purus finibus interdum
- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
- Maecenas finibus maximus tortor. Vestibulum mauris neque, condimentum in magna sed, pharetra aliquam purus
Sed ullamcorper velit id imperdiet pellentesque. Maecenas laoreet porta leo, vel blandit nibh placerat a

Strong

Maecenas vitae nibh risus. Mauris sit amet erat enim. Maecenas viverra metus a tellus auctor fringilla. Donec hendrerit rutrum elit, vitae auctor magna luctus sit amet. Donec vel quam ipsum. Aenean laoreet nulla dictum, venenatis turpis at, facilisis metus.

Italic

Code

Maecenas vitae nibh risus. code and code ( with class=”dark-skin” ) and also pre and pre ( with class=”dark-skin” ). Maecenas viverra metus a tellus auctor fringilla. Donec hendrerit rutrum elit, vitae auctor magna luctus sit amet. Donec vel quam ipsum. Aenean laoreet nulla dictum, venenatis turpis at, facilisis metus.

Pre

h1, h2, h3, h4, h5, h6{
    color: #333333;
    margin-bottom: 20px;
}

@media ( max-width: 540px ){
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 16px;
    }
}

a{
    color: #ff0000;
    text-decoration: none;
}

a:hover{
    color: #cc0000;
    text-decoration: underline;
}

source: