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.


                <html lang="en">
  <main id="main">
    <h1 id="title">Revealing the Invisible</h1>
    <p>A mental leap from light to heat.</p>
    <figure id="img-div">
        alt="William Herschel discovering infrared by accident."
      <figcaption id="img-caption">
        William Herschel wasn't actually looking for Infrared Light when he discovered it!
    <section id="tribute-info">
      <h3 id="subject">Here's a timeline of Herschel's amazing life: </h3>
        <li><strong>1738</strong> - Born in the Electorate of Hanover, Germany</li>
        <li><strong>1759</strong> - Leaves Germany for England, where he taught music before becoming an organist.</li>
        <li><strong>1772</strong> - William's sister, Caroline served as his assistant until Herschel's death. She was the first woman to discover a comet, to be given a paid scientific position and to receive an honorary membership into the Royal Society. </li>
        <li><strong>1783</strong> - Began a sky survey of his own, standing on a ladder while peering through his telescope and describing the objects he saw to his sister, Caroline.</li>
        <li><strong>1787</strong> - Discovered two moons around Uranus: Titania and Oberon.</li>
        <li><strong>1789</strong> - Using his larger telescope, he found Saturn's sixth and seventh moons: Enceladus and Mimas.</li>
        <li><strong>1788</strong> - At the age of 50, Herschel married the widow Mary Pitt. Their son, John, was born in 1792, and followed in his father's astronomical footsteps.</li>
        <li><strong>1800</strong> - Discovers Infrared Light while performing an experiment on temperatures of different colors of light.</li>
        <li><strong>1802</strong> - Proposes the name "asteroids" for the large, rocky objects discovered in 1801.</li>
        <li><strong>1820</strong> - Is elected Vice President of the newly formed Royal Astronomical Society.</li>
        <li><strong>1822</strong> - Dies at the age of 83 in England.</li>
      <blockqoute cite="">
          "The phenomena of nature, especially those that fall under the inspection of the astronomer, are to be viewed, not only with the usual attention to facts as they occur, but with the eye of reason and experience."
        <cite>-- Sir William Frederick Herschel</cite>
        If you got time, you should read more about the incredible work of William Herschel on his
        <a id="tribute-link" href="" target="_blank">Wikipedia Entry.</a>


                #image {
  max-width: 100%;
  display: block;

#img-div {
  display: flex;
  align-items: center;
  flex-direction: column;


// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!