Style List

This page is to review the current styles implemented for content on the site.


Paragraphs

<p>This is a paragraph that is short.</p> <p>This is a longer paragraph <a href="#">with a link</a>, that should hopefully wrap on the page and let us see (a) spacing between lines and (b) spacing between paragraphs. If it does not wrap, then it needs to be made longer.</p>

This is a paragraph that is short.

This is a longer paragraph with a link, that should hopefully wrap on the page and let us see (a) spacing between lines and (b) spacing between paragraphs. If it does not wrap, then it needs to be made longer.


Bold, Emphasized, and Italic

<p>This paragraph has <b>some BOLD Text</b>, <em>some EMPHASIZED Text</em>, and <i>some ITALIC Text</i>.</p> <p>This paragraph has some <b><i>Bolded ITALIC text</i></b>, <b><em>some BOLD Emphasized text</em></b>, <i><em>Some EMPHASIZED italic text</em></i>, and <b><i><em>Some Bolded, EMPHASIZED italic text</em></i></b></p>

This paragraph has some BOLD Text, some EMPHASIZED Text, and some ITALIC Text.

This paragraph has some Bolded ITALIC text, some BOLD Emphasized text, Some EMPHASIZED italic text, and Some Bolded, EMPHASIZED italic text


Unordered List

<p>Paragraph before unordered list - check spacing</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> <p>Paragraph after unordered list - check spacing</p>

Paragraph before unordered list - check spacing

  • List item one
  • List item two
  • List item three

Paragraph after unordered list - check spacing


Unordered List Right Under Paragraph

<p class="before_list">Paragraph before unordered list using before_list class - check spacing. Note that anything can have the before_list class applied to it to remove bottom margin</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> <p>Paragraph after unordered list - check spacing</p>

Paragraph before unordered list using before_list class - check spacing. Note that anything can have the before_list class applied to it to remove bottom margin

  • List item one
  • List item two
  • List item three

Paragraph after unordered list - check spacing


Nested Unrdered List

<p>Paragraph before Nested Unrdered list - check spacing</p> <ul> <li>Top List - Item One <ul> <li>Child List - Item One</li> <li>Child List - Item Two</li> </ul> </li> <li>Top List - Item Two</li> </ul> <p>Paragraph after Nested Unordered list - check spacing</p>

Paragraph before Nested Unrdered list - check spacing

  • Top List - Item One
    • Child List - Item One
    • Child List - Item Two
  • Top List - Item Two

Paragraph after Nested Unordered list - check spacing


Ordered List

<p>Paragraph before Ordered list - check spacing</p> <ol> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ol> <p>Paragraph after Ordered list - check spacing</p>

Paragraph before Ordered list - check spacing

  1. List item one
  2. List item two
  3. List item three

Paragraph after Ordered list - check spacing


Nested Ordered List

<p>Paragraph before Nested Ordered list - check spacing</p> <ol> <li>Top List - Item One <ol> <li>Child List - Item One</li> <li>Child List - Item Two</li> </ol> </li> <li>Top List - Item Two</li> </ol> <p>Paragraph after Nested Ordered list - check spacing</p>

Paragraph before Nested Ordered list - check spacing

  1. Top List - Item One
    1. Child List - Item One
    2. Child List - Item Two
  2. Top List - Item Two

Paragraph after Nested Ordered list - check spacing


Ordered List In Unordered List

<p>Paragraph before UL OL Nested List- check spacing</p> <ul> <li>Top List - Item One <ol> <li>Child List - Item One</li> <li>Child List - Item Two</li> </ol> </li> <li>Top List - Item Two</li> </ul> <p>Paragraph after UL OL Nested list - check spacing</p>

Paragraph before UL OL Nested List- check spacing

  • Top List - Item One
    1. Child List - Item One
    2. Child List - Item Two
  • Top List - Item Two

Paragraph after UL OL Nested list - check spacing


Unordered List In Ordered List

<p>Paragraph before OL UL Nested List- check spacing</p> <ol> <li>Top List - Item One <ul> <li>Child List - Item One</li> <li>Child List - Item Two</li> </ul> </li> <li>Top List - Item Two</li> </ol> <p>Paragraph after OL UL Nested list - check spacing</p>

Paragraph before OL UL Nested List- check spacing

  1. Top List - Item One
    • Child List - Item One
    • Child List - Item Two
  2. Top List - Item Two

Paragraph after OL UL Nested list - check spacing


Heading Tags

<p>Paragraph before H1 Tag</p> <h1>Header 1 Style</h1> <h1>Header 1 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h1> <p>Paragraph before H2 Tag</p> <h2>Header 2 Style</h2> <h2>Header 2 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h2> <p>Paragraph before H3 Tag</p> <h3>Header 3 Style</h3> <h3>Header 3 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h3> <p>Paragraph before H4 Tag</p> <h4>Header 4 Style</h4> <h4>Header 4 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h4> <p>Paragraph before H5 Tag</p> <h5>Header 5 Style</h5> <h5>Header 5 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h5> <p>Paragraph before H6 Tag</p> <h6>Header 6 Style</h6> <h6>Header 6 <a href="#">with a link</a>, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.</h6> <p>Paragraph after H6 Tag and before list of headers run together.</p> <h1>Another H1</h1> <h2>H2 After H1</h2> <h3>H3 After H2</h3> <h4>H4 After H3</h4> <h5>H5 After H4</h5> <h6>H6 After H5</h6>

Paragraph before H1 Tag

Header 1 Style

Header 1 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph before H2 Tag

Header 2 Style

Header 2 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph before H3 Tag

Header 3 Style

Header 3 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph before H4 Tag

Header 4 Style

Header 4 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph before H5 Tag

Header 5 Style
Header 5 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph before H6 Tag

Header 6 Style
Header 6 with a link, that might wrap around to the next line to help us see the letter spacing inside in case it is a bit squished and needs to have things cleaned up a bit.

Paragraph after H6 Tag and before list of headers run together.

Another H1

H2 After H1

H3 After H2

H4 After H3

H5 After H4
H6 After H5

Block Quote

<p>A paragraph before a blockquote</p> <blockquote> <p>A paragraph <a href="#">with a link</a>, within a block quote along with <b>Bold</b>, <em>Emphasized</em>, and <i>Italic</i> content.</p> <p>A second paragraph inside the block quote in case we want to change how far apart they are</p> </blockquote> <p>A paragraph after a blockquote.</p>

A paragraph before a blockquote

A paragraph with a link, within a block quote along with Bold, Emphasized, and Italic content.

A second paragraph inside the block quote in case we want to change how far apart they are

A paragraph after a blockquote.


Div with class blocked

<p>A paragraph before a div that has the css class blocked applied to it.</p> <div class="blocked"> <p>Paragraph <a href="#">with a link</a>, in the blocked area</p> <h1>H1 <a href="#">with a link</a>, in the blocked area</h1> <p>Paragraph in the blocked area</p> <h2>H2 <a href="#">with a link</a>, in the blocked area</h2> <p>Paragraph in the blocked area</p> <h3>H3 <a href="#">with a link</a>, in the blocked area</h3> <p>Paragraph in the blocked area</p> <h4>H4 <a href="#">with a link</a>, in the blocked area</h4> <p>Paragraph in the blocked area</p> <h5>H5 <a href="#">with a link</a>, in the blocked area</h5> <p>Paragraph in the blocked area</p> <h6>H6 <a href="#">with a link</a>, in the blocked area</h6> <p>Paragraph in the blocked area</p> <ul> <li>Unordered List <a href="#">with a link</a>, Item One</li> <li>Unordered List Item Two</li> </ul> <p>Paragraph in the blocked area</p> <ol> <li>Ordered List <a href="#">with a link</a>, Item One</li> <li>Ordered List Item Two</li> </ol> <p>Final paragraph in the blocked area with <b>bold</b>, <i>italic</i>, <em>emphasized</em> text as well as being long enough to wrap so that one can see line spacing for paragraphs.</p> </div> <p>A paragraph after the div that has css class blocked applied to it.</p>

A paragraph before a div that has the css class blocked applied to it.

Paragraph with a link, in the blocked area

H1 with a link, in the blocked area

Paragraph in the blocked area

H2 with a link, in the blocked area

Paragraph in the blocked area

H3 with a link, in the blocked area

Paragraph in the blocked area

H4 with a link, in the blocked area

Paragraph in the blocked area

H5 with a link, in the blocked area

Paragraph in the blocked area

H6 with a link, in the blocked area

Paragraph in the blocked area

  • Unordered List with a link, Item One
  • Unordered List Item Two

Paragraph in the blocked area

  1. Ordered List with a link, Item One
  2. Ordered List Item Two

Final paragraph in the blocked area with bold, italic, emphasized text as well as being long enough to wrap so that one can see line spacing for paragraphs.

A paragraph after the div that has css class blocked applied to it.


Code Tag

<p>A paragraph before a code tag</p> <code> /* This is a php comment <a href="#">with a link</a> */ function() { $ok = true; if ( $ok ) { echo 'Do this now'; } else { echo 'Do not do this now'; } return $ok; } </code> <p>A paragraph after the code block</p> <code>A single line inside of a code block</code> <p>Another paragraph after it.</p>

A paragraph before a code tag

/* This is a php comment with a link */ function() { $ok = true; if ( $ok ) { echo 'Do this now'; } else { echo 'Do not do this now'; } return $ok; }

A paragraph after the code block

A single line inside of a code block

Another paragraph after it.


Pre Tag

<p>A paragraph before content in a pre tag</p> <pre> Some content stuck in a pre tag <a href="#">with a link</a> </pre> <p>A paragraph after the pre tag</p>

A paragraph before content in a pre tag

Some content
              stuck in
	a pre                tag
		    with a link

A paragraph after the pre tag


Table

<table> <thead> <tr> <th>Table Header A</th> <th>Table <a href="#">Header</a> B</th> </tr> <tr> <td>Table Header C</td> <td>Table <a href="#">Header</a> D</td> </tr> </thead> <tfoot> <tr> <th>Table Footer A</th> <th>Table <a href="#">Footer</a> B</th> </tr> <tr> <td>Table Footer C</td> <td>Table <a href="#">Footer</a> D</td> </tr> </tfoot> <tbody> <tr> <th>Header In Body</th> <th><a href="#">Header</a> 2 in Body</th> </tr> <tr> <td>Cell in Body</td> <td><a href="#">Cell</a> 2 in body</td> </tr> </tbody> </table>

Table Header A Table Header B
Table Header C Table Header D
Table Footer A Table Footer B
Table Footer C Table Footer D
Header In Body Header 2 in Body
Cell in Body Cell 2 in body

horizontal rule

<hr /> <p>a paragraph between two horizontal rules</p> <hr />


a paragraph between two horizontal rules



image with no styling

<p>Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p> <img src="http://plasancarbon.com/wp-content/themes/plasan/sitegfx/plasan-logo.png" /> <p>Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p>

Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.


image with class alignnone

<p>Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p> <img class="alignnone" src="http://plasancarbon.com/wp-content/themes/plasan/sitegfx/plasan-logo.png" /> <p>Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p>

Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.


image with alignright class

<p>Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p> <img class="alignright" src="http://plasancarbon.com/wp-content/themes/plasan/sitegfx/plasan-logo.png" /> <p>Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p>

Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.


image with aligncenter class

<p>Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p> <img class="alignleft" src="http://plasancarbon.com/wp-content/themes/plasan/sitegfx/plasan-logo.png" /> <p>Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p>

Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.


image with alignleft class

<p>Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p> <img class="aligncenter" src="http://plasancarbon.com/wp-content/themes/plasan/sitegfx/plasan-logo.png" /> <p>Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.</p>

Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Content after image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to. Content before image that is long enough to hopefully wrap if it is going to.

Did I miss anything?

If so, make sure to put a message in basecamp under the to do list named " Review and Update Content Styles "!