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

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 H3

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 H4

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 H5

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 H6

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.

Paragraphs

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.

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.

  1. Morbi est nisi, sollicitudin nec lacus eu, facilisis tristique tellus
  2. Vestibulum in leo auctor, finibus massa ut, dapibus mauris
  3. 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
  4. 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

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.

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:
moon.33@mailxu.com