Pen Settings

HTML

CSS

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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

              
                <h1>Encabezado h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dui id est mattis, vel pellentesque mauris pulvinar. Proin sit amet orci efficitur, fringilla lorem ac, interdum nulla. Nam mollis tincidunt urna eget gravida.</p>

<h2>Esto es un h2</h2>
<p>Sed imperdiet dolor quis nisi sodales, in egestas neque tempus. Duis non nisl vitae ex mollis bibendum eu sed odio. Proin eget laoreet mauris, ac dignissim nunc. Morbi id placerat felis. Nullam vel ante eu ipsum fringilla porttitor quis eget lacus. Suspendisse ac blandit ipsum.</p>
<p>
In ultricies ligula eu porttitor pulvinar. Etiam in neque metus. Ut ipsum dui, tincidunt quis eleifend nec, semper id dui. Nulla facilisi. Proin nec tortor ex. Duis interdum nisl in augue egestas, sit amet rutrum felis vehicula. Vestibulum sodales congue nisi. Pellentesque eget placerat nunc. Nullam iaculis erat ut vehicula iaculis. Nullam mattis purus a sapien fringilla rhoncus.
</p><p>
Integer suscipit felis ut imperdiet efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas neque elit, mollis vitae augue in, sodales mollis metus. Nam posuere porta tempus. Fusce iaculis nibh non libero egestas tempor. Nulla nec nulla tellus. In eu enim faucibus magna fringilla imperdiet vel euismod sapien. Fusce sed turpis scelerisque, elementum massa ac, varius urna.
</p>
<h3 class="h6">Esto es un h3, pero con un estilo de h6 porque no consideramos necesario destacar este contenido</h3>
<p>
Etiam efficitur aliquam eros, a finibus dui posuere et. Morbi pretium risus dui, efficitur rhoncus odio mattis eu. Praesent vitae ante a diam aliquam dictum. Nunc sagittis tincidunt eros nec cursus. Quisque ut consequat lacus. Integer consequat egestas elit, eu consequat nisi suscipit eget. Etiam commodo rhoncus ultricies.</p>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console