Site Style Guide (h2)

This is a guide to the page content styles for the site; this is paragraph that comes immediately after a heading two tag. (h2 + p)

All content samples have their CSS selector/XHTML elements listed at the very end of the content they mark. In some places, such as this paragraph, additional content is lorem ipsum or “Greeked” text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie aliquet varius. Morbi vitae nibh augue, ac mollis felis. Fusce sed lacus eget nisl facilisis accumsan sed et eros. Fusce sagittis pellentesque lectus, eget vestibulum neque tempus at. (p)

  • Unordered/bulleted lists (ul) make text more readable (ul li)
  • Lists can also have nested lists, which:
    • Break up complex information into simpler parts (ul li ul li)
    • Give readers a way to scan complex information, and skip things that are not relevant
  • List items (li) must be contained by an ordered or unordered list)

Another paragraph. Nullam pretium sodales lorem porta interdum. Fusce ac sapien eu velit blandit euismod at porta elit. Ut bibendum aliquet placerat. Fusce a justo nunc, quis dignissim velit. Duis placerat dictum nisl, id tincidunt leo fermentum ac. Mauris est sapien, luctus vel pretium in, hendrerit quis ante. Maecenas quam sem, tincidunt eu rhoncus a, vehicula a neque.

  1. Ordered/numbered lists (ol) contain information in sequence; this is first.
  2. This is second, with two ordered sub-points:
    1. Point one (ol li ol li)
    2. Point two
  3. This is third, with two unordered sub-points:
    • Here’s a point (ol li ul li)
    • Here’s another point

Another paragraph. Vestibulum tempor pretium nisl, sed euismod arcu scelerisque vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam nisl sem, facilisis eu adipiscing vel, euismod vel nibh. Proin non blandit sapien.

Page Content Sub-Heading (h3)

A paragraph immediately following a heading three tag. Curabitur id felis felis. Praesent scelerisque, arcu at molestie fringilla, dui nunc tempor lectus, at euismod ipsum libero vel turpis. Integer ultricies pharetra dapibus. Ut ac nisl sapien. (h3 + p)

Phrase Tags

A paragraph that features some phrase tags: Some text is strong. (strong). Some text is emphasized (em). /*Some text is code*/ (code). Some text is linked to elsewhere in the site (a). Some text links to external sites, like the Mozilla Foundation (a.ext). Cras laoreet cursus orci ac hendrerit. Nulla nulla mi, rutrum vitae viverra consectetur, pretium id eros. Donec eget condimentum nulla.

Block Quotes and Pull Quotes

This is a paragraph treated as a block quote. Fusce ac sapien eu velit blandit euismod at porta elit. Ut bibendum aliquet placerat. Fusce a justo nunc, quis dignissim velit. (blockquote and blockquote p).

Pullquotes can serve to emphasize certain text components and add interest to an otherwise mammoth page of text. (p.pullquote)

Supporting Content Header (div#supporting h2)

Supporting content paragraph. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam nisl sem, facilisis eu adipiscing vel, euismod vel nibh. Proin non blandit sapien. (div#supporting p)