CSS Test Page

07_TanyaHeading 2 (the first subsection of this page)

When you break content in the body into sections, always apply Heading 2 first.  raesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

03_DavidHeading 3 (a subsection of the above section)

If you have a subsection of your Heading 2 item, then apply heading 3.  Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. 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. Maecenas ornare tortor. Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is a BLOCK QUOTE: 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. Maecenas ornare tortor. Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. 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.

Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 4 (a sub-sub section)

If you have a subsection of your Heading 3 item, then apply heading 4. Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. 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. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

****RULE: ALWAYS FOLLOW THE ORDER SUGGESTED FOR HEADING STYLES.  IF YOU WANT MODIFICATIONS TO THE STYLES THEN LET RAISED EYEBROW KNOW.*** 

Exceptions to the above rule:

  • Board of Directors bio pages: when you have a list of names and these link to names/bios/images lower down on the page, sometimes Heading 2 feels too heavy for styling the names of the people.  Try using Heading 3 or 4 and when you find a style you are happy with, then update the exceptions listed here and be consistent across the site.
  • FAQs: when you have a list of questions at the top of a page and further down you have the questions and the answers, sometimes it feels to heavy to have every question in heading 2, as especially with longer sentence questions, that seems too large.  Try using Heading 3 or 4 and when you find a style you are happy with, then update the exceptions listed here and be consistent across the site.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
This is what a table looks like Use arrow keys to tab across The styles are dictated through the style sheet
apples oranges pears
dogs cats fish

Support the Project

The Good Life - The Green Life is a project of the Canadian Centre for Policy Alternatives, an independant, non partisan research institute concerned with issues of social, economic and environmental justice.

Donate