This post shows the thorough typography styling boiled into this theme. We use this template to determine the default styling of all possible HTML elements so nothing is overlooked in our final product.

Paragraphs

This is a standard paragraph created using the WordPress editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few inline elements not available in the WordPress admin but we style those too, just in case you want to use them. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript so you can say things like C8H10N402 is my 2nd favourite chemical.

“This stylesheet is going to help so much. Users can take full advantage of all the HTML elements. Imagine that!”

If you are feeling non-semantic you might even use bold, italic, big or small elements. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives us a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.


Images

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra.

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl pellentesque.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl pellentesque.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.

Placeholder Image with Caption

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

You also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a center aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading
Level Six Heading
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3
Definition List Term 1
And here’s the definition. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Definition List Item 2
And here’s the definition. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Definition List Item 3
And here’s the definition. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
h1:after {
    content: "Hello world!";
    position: absolute;
    left: 10px;
    top: 10px;
    color: rgba (255,0,0,0.5);
}
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

3 Comments

Cancel

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci lacus. Aliquam sagittis, lacus at semper volutpat, nunc augue sollicitudin orci, quis blandit odio tortor non purus.

    • Cras vitae ante eget risus suscipit scelerisque nec ut erat. Phasellus nibh erat, hendrerit iaculis sem nec, imperdiet semper dolor. Integer et nisl a risus venenatis imperdiet vel at massa. Donec sed lacinia arcu. Phasellus eu lorem feugiat, molestie arcu non, aliquam nunc.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci lacus. Aliquam sagittis, lacus at semper volutpat, nunc augue sollicitudin orci, quis blandit odio tortor non purus.