Web Style Guide

Headings on top of one another

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings on top of paragraphs <p>

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Inline Elements

• <strong> bold
• <em> italic
• <a> anchor & anchor with href
• maroon
• larger
• smaller
• <s> strikethrough
• <small> small
• <sup> supercript¹
• <sub> subscript₂

Lists

Unordered List

• Item one
• Item two. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
• Item three

Ordered List

1. First item 
2. Second item. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
3. Third item 

Nested Unordered List

• Item one
• Item two
  • Item 2.1
  • Item 2.2. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
  • Item 2.3
• Item three

Nested Ordered List

1. First item
2. Second item
   1. Item 2.1
   2. Item 2.2 This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
   3. Item 2.3
3. Third item

Unstyled List

This is a Bootstrap style. Add the class "list-unstyled" to the <ul>.

• Item one
• Item two. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
• Item three

Blockquotes

"There's a pretty fellow, now," he banteringly laughed, standing in the ship's bows, "there's a jackal for ye! I well know that these Crappoes of Frenchmen are but poor devils in the fishery; sometimes lowering their boats for breakers, mistaking them for Sperm Whale spouts; yes, and sometimes sailing from their port with their hold full of boxes of tallow candles, and cases of snuffers, foreseeing that all the oil they will get won't be enough to dip the Captain's wick into;"

Pre <pre>

#main-content p, ul, ol {
 font-size: 1.8rem;
 line-height: 1.8em;
 word-spacing: 0.1em;
}

Code <code>

#main-content p, ul, ol { font-size: 1.8rem; line-height: 1.8em; word-spacing: 0.1em; }