cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


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.

              <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,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="https://css-tricks.com/poll-results-mobile-web-design-responsibility/">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="https://s.cdpn.io/3/star.png" />
  <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='https://codepen.io/chriscoyier/pen/Hafmz/'>Guest Post on CSS-Tricks</a> by Chris Coyier (<a href='https://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='https://codepen.io'>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="//codepen.io/assets/embed/ei.js"></script>
              @import "compass/css3";

body {
  background: url(https://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png);

  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 ..................