Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <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();