<link href=',700,400italic|Source+Code+Pro:400,700' rel='stylesheet' type='text/css'>
<div class="bar-time">December 5 2014</div>
<h2>Title of Your Article</h2>

<em class="explanation">This top paragraph is where I introduce you and explain how this guest post came about. I will write it, but you can provide links that you want used. It's an `<em>` for various syndication reasons.</em>
This is <em>your</em> intro paragraph. This is where you explain briefly what this article is going to be about. Hopefully it's quite enticing and interesting.

Probably best to use Markdown here for formatting.

<strong>Also note</strong> there are no super hard-and-fast rules for post formatting. If you want to do something usual or fancy or whatever, I'm typically down.

<h3>Subheads are &lt;h3> tags</h3>

They probably should be <code>&lt;h2></code> tags but again for legacy reasons they are not. h3's have a bunch of margin above them to set them apart. In the article code itself, put two line breaks above an h3.

Breaking articles into sections with headers is a good idea. It just flows better and is easier to scan. It's probably best to put ID's on headers, but make them pretty obviously unique, like <code>id="article-namespace-section-2"</code>.


Sub-sections using <code>&lt;h4></code> tags. Like if you were going going to make a section all about the font property and then sub-heads for each of the sub-properties. Sub-sections should be related to the larger section they are a part of. Only one line break above an h4.

<h4>Another sub-subhead</h4>

These don't have as much space above or below them as the h3's. We only use h3's and h4's in articles (legacy reasons).

<h3>The HTML (Example Section Title)</h3>

A common thing when demonstrating a front end technique is to break into sections by language.

<pre rel="HTML"><code markup="tt" class="language-markup"><div>
<h3 class="title">Example Code</h3>

Don't worry about & ampersands, I'll fix them.</code></pre>

You can use Markdown code fences if you like. 

But then remove my JavaScript here on this Pen 
that escapes it all.

Things to note about posting code blocks:

 <li>Do not escape HTML</li>
 <li>Don't worry about & ampersands. They will show up encoded in this preview but not in the article.</li>
 <li>Use two spaces for indenting</li>
 <li>HTML uses &lt;pre rel="HTML">&lt;code markup="tt" class="language-markup"></li>
 <li>CSS uses &lt;pre rel="CSS">&lt;code class="language-css"></li>
 <li>JS uses &lt;pre rel="jQuery">&lt;code class="language-javascript"></li>
 <li>For any JS library, replace the rel="" with that library name, like "jQuery"</li>
 <li>No extra lines at top or bottom of the code block</li>
Use `backticks` for inline code. That way you won't have to escape them.

<h3>The CSS (Example Header)</h3>

Block quotes are like this:

<blockquote>To live is to love or something.</blockquote>

You don't need paragraph tags inside blockquotes unless they are more than one paragraph. Then put paragraph tags around both.

<blockquote><p>This is the first paragraph of a multi-paragraph quote.</p>
<p>And this is the second.</p></blockquote>

<pre rel="CSS"><code class="language-css">.selector {
  property: value;

<h3>The JavaScript (...just another example)</h3>

  <li>Oh by the way you can nest lists if you need to.
  <li>They can be of any type.</li>

<pre rel="jQuery"><code class="language-javascript">$("pre code").each(function() {
 var content = $(this).html();

yadda yadda yadda.

<h3>On Images</h3>

I host all images in articles right on the CSS-Tricks CDN. Link them up however you need to temporarily and I'll upload them.

If the image blending into white makes sense  (<a href="">example</a>) then just use an `<img>`.

Otherwise, mark it up in a `<figure>` tag which gives it a frame and sets it apart. This is the standard.

  <img src="" />
  <figcaption>This is a star.</figcaption>

Use `<figcaption>` tags within the `<figure>` to write captions if needed.

Images will never scale up, but if they are wider than the column, they will scale down.

<h3>Embedded Pens are A+</h3>

Use `data-theme-id='1'`.

<p data-height="257" data-theme-id="1" data-slug-hash="Hafmz" data-default-tab="result" class='codepen'>See the Pen <a href=''>Guest Post on CSS-Tricks</a> by Chris Coyier (<a href=''>@chriscoyier</a>) on <a href=''>CodePen</a>.</p>

Don't include the &lt;script> for embedded Pens, that's automatically included on all pages.

<h3>Here's a table</h3>


<script async src="//"></script>


              @import "compass/css3";

body {
  background: url(;

  background: white;
  color: #111;
  border: 20px solid #D6D5D5;
  padding: 40px;
  width: 80%;
  max-width: 700px;
  margin: 20px auto;


              // HTML in article should just be HTML, not escaped
// CSS-Tricks doesn't do it exactly this way, but close enough.
$("pre code").each(function() {
   var content = $(this).html();
Loading ..................