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
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.
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.
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. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
- Nested List Item 1
- Nested List Item 1
- Nested List Item 1
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
- Nested List Item 1
- Nested List Item 1
- Nested List Item 1
- 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 |