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.

              <h2>Web Mechanics 101: demystifying the HTML, CSS and JS of a 'web page' and how it gets to your browser in the first place</h2>
<div class="centered">
  <img src="http://www.databasejournal.com/img/phpmysql-ch4-fig1.gif">
<div id="first-div" class="my-column">
  <p>This is some text, in a paragraph ("p") element. <span id="the-text">There are more words here, in their own "span" element (nested inside the paragraph element) so that we can tweak them independly of the text around it.</span></p>
  <p>Thanks to <a href="http://www.fillerati.com/" target="_blank">fillerati</a> we can have lots of words for when the client refuses to give us any:</p>
  <blockquote>The Mouse did not notice this question, but hurriedly went on, '"—found it advisable to go with Edgar Atheling to meet William and offer him the crown. William's conduct at first was moderate. But the insolence of his Normans—" How are you getting on now, my dear?' it continued, turning to Alice as it spoke. (Lewis Carroll)</blockquote>
  <p>The text above is in a "blockquote" element. The browser gives it rudimentary styling by default. I added a little more.</p>
<div class="my-column stuffx">
  <p>And more text here! It's all over the place. So many words.</p>
  <blockquote>My metal and ornaments were also renewed in the style of a Zodangan gentleman, attached to the house of Ptor, which was the family name of my benefactors. (Edgar Rice Burroughs)</blockquote>
  <p>Below this are some buttons. They are inside a "button" element, and the browser applies its own basic styling to them by default.</p>
  <p><button id="addClass">Add a class name to the first p element</button></p>
  <p><button id="toggleClass">Better yet, toggle it! (add OR remove a class name to the first p element</button></p>
  <p><button id="basicJS" onclick="changeText('the-text')">Some basic js ftw</button></p>
              html {
  font-family: helvetica, verdana, sans-serif;

h2 {
  font-family: 'Text Me One', helvetica, verdana, sans-serif;
  padding: 1em .8em 0;

blockquote { font-size:.9em; }

.stuff {
  color: red;

.my-column {
  display: inline-block;
  width: 42%;
  padding: 1em;
  vertical-align: top;

.js-stuff {
  /*font-size: 150%;
  color: blue;*/
  font-family: 'nova square', helvetica, verdana, sans-serif;
.centered { 
  margin: 2em auto 1em; 
  width: 431px;

@media screen and ( max-width:600px) {
  .stuff {
    color: green;
  .my-column {
    display: block;
    width: 94%;
              $("#addClass").click(function() {

$("#toggleClass").click(function() {
// simple js
function changeText(theID) {
  document.getElementById(theID).innerHTML = 'SOME OTHER TEXT TO REPLACE THE EXISTING TEXT';

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................