Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML Elements
<h1>Basic Elements</h1>
<p>The purpose of this page is to help determine the default styling of all possible HTML elements so nothing is overlooked in our final product.</p>
<hr />
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h1>Paragraphs</h1>
<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong> 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.</p>
<blockquote>"This stylesheet is going to help so freaking much." <cite>-Blockquote</cite></blockquote>
<p>Maecenas ornare tortor. Donec sed <em>tellus eget sapien</em> fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue <a href="#" title="Test Link">quis tellus</a>.</p>
<p class="alignnone"><strong>Class .alignnone</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<p class="alignleft"><strong>Class .alignnone</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<p class="alignright"><strong>Class .alignnone</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<p class="aligncenter"><strong>Class .alignnone</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<hr />
<h1>Images</h1>
<img src="http://placehold.it/680x420" alt="Placeholder Image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<img src="http://placehold.it/320x240&text=.alignnone" alt="Placeholder Image" class="alignnone" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<img src="http://placehold.it/320x240&text=.alignleft" alt="Placeholder Image" class="alignleft" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<img src="http://placehold.it/320x240&text=.alignright" alt="Placeholder Image" class="alignright" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<img src="http://placehold.it/320x240&text=.aligncenter" alt="Placeholder Image" class="aligncenter" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<div class="wp-caption"><img src="http://placehold.it/680x420" alt="Placeholder Image with Caption" /><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ligula ut libero dignissim, vel fermentum eros interdum. Pellentesque non est elementum, laoreet nunc a, placerat nulla. Nulla nec augue at felis auctor scelerisque gravida vitae nisl. Pellentesque eget pharetra tortor, nec finibus nisi.</p>
<hr />
<h1>List Types</h1>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h3>Definition List</h3>
<dl>
<dt>List Item 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
<dt>List Item 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
<dt>List Item 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</dd>
</dl>
<hr />
<h1>Tables</h1>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
<hr />
<h1>Miscellaneous</h1>
<p>Lorem <sup>superscript</sup> ipsum dolor <sub>subscript</sub> sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. 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. I went to an <acronym title="National Basketball Association">NBA</acronym> game and they played <abbr title="Sargeant">Sgt.</abbr> Pepper's Lonely Hearts Club Band. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<pre>
<code>
return function (trigger_distance) {
trigger_distance = trigger_distance || 400;
var lastOffset;
var fartHandler = function() {
var scrollOffset = Math.floor(window.scrollY / trigger_distance);
if (lastOffset !== scrollOffset) {
playAudio();
lastOffset = scrollOffset;
}
};
window.addEventListener('scroll', fartHandler, false);
};
</code>
</pre>
<address>Authored by Jesse Campbell<br>
Victoria, BC<br>
Canada<br>
Website: <a href="http://jesselcampbell.com">jesselcampbell.com</a><br>
Twitter: <a href="https://twitter.com/jesselcampbell">@jesselcampbell</a></address>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment