A style guide to use as a basis for styling basic html tags.

styleguide.html

<!-- Quick & Dirty Style Guide -->
<!-- Paste this into the body of a node to give you something to style. -->
<!-- by John Ferris @pixel_whip http://pixel-whip.com -->

<p class="intro">Intro Paragraph Style: It’s helpful to give your readers a quick introduction to the page.  That’s what this paragraph will do for them.</p>
<h2>Section Heading (h2)</h2>
<img src="http://placekitten.com/600/288" />
<p><img src="http://placekitten.com/340/240" class="image-left"/>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p><img src="http://placekitten.com/216/216" class="image-right"/>Ut enim ad minim veniam, quis nostrud exercitation this is a link on hover nisi ut aliquip ex ea commodo consequat. 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. </p>
<h3>Section Heading (h3)</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<h4>Section Heading (h4)</h4>
<blockquote> Blockquote Style: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote>
<p>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h5>Section Heading (h5)</h5>
<p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<h6>Section Heading (h6)</h6>
<p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<ul>
  <li>Unordered list Style: Ut enim ad minim veniam.</li>
  <li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
</ul>
<ol>
  <li>Unordered list Style: Ut enim ad minim veniam.</li>
  <li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
</ol>
<table>
  <thead>
    <tr>
      <th>thead th</th>
      <th>thead th</th>
      <th>thead th</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <th>tbody th</th>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
    <tr class="even">
      <th>tbody th</th>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
    <tr class="odd">
      <th>tbody th</th>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>tfoot th</th>
      <td>tfoot td</td>
      <td>tfoot td</td>
    </tr>
  </tfoot>
</table>
<p class="fine-print">Fine Print Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>