This page does not use JS

index.html

<p>This page does not use JS.</p>
<style class="onPage" contenteditable>body {
  background: #eee;
  text-align: center;
}

style.onPage { 
  background: #ffffff;
  border: 2px solid #aaa;
  width: 600px;
}
   
p {
  font-size: 20px;
  font-weight: bold;
  font-family: Monaco, monospace;
}
</style>
<p>What you see above is &lt;style&gt;. You can edit it.</p>
<p>We forget that it&rsquo;s just another HTML element.</p>
<p>Fun fact by <a href="http://twitter.com/notdetails" target="_blank">Joel</a>.</p>

style.css

style, head {
    display: block; 
}

head {
  opacity: 0;
}

style.onPage {
  display: block;
  margin: 40px auto;
  max-width: 100%;
  padding: 14px;
  text-align: left;
  background: #FFF;
  color: #444;
  white-space: pre;
  font-family: Monaco, monospace;
}

.onPage:focus {
  outline: 0;
}

This-page-does-not-use-JS.markdown

This page does not use JS

A reminder that the <style> tag is just another HTML element.

A Pen by Joel Califa on CodePen.

License.