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

              
                <nav id="navbar">
  <header>CSS Documentation</header>
  <ul>
    <li>
      <a class="nav-link" 
         href="#what_is_css?">
        What is CSS?
      </a>
    </li>
    <li>
      <a class="nav-link" 
         href="#what_you_should_already_know">
        What you should already know
    </a>
    </li>
    <li>
      <a class="nav-link"
         href="#basic_css_syntax">
        Basic CSS syntax
      </a>
    </li>
    <li>
      <a class="nav-link"
         href="#css_inclusion">
         CSS Inclusion
      </a>
    </li>
    <li>
      <a class="nav-link"
         href="#hello_world!">
         Hello World!
      </a>
    </li>
    <li>
      <a class="nav-link"
         href="#css_selector">
        CSS Selector
      </a>
    </li>
  </ul>
</nav>

<main id="main-doc">
<section class="main-section" id="what_is_css?">
  <header>What is CSS?</header>
  <p>
    CSS is a language which we use to style 
    webpages.
  </p>
  <p>
    If You want to be a web developer CSS is 
    must to learn.
  </p>
  <p>
    With CSS you can customise the look and 
    layout of your website.
  </p>
</section>
<section class="main-section" id="what_you_should_already_know">
  <header>What you should already know</header>
  <p>This documentation assumes you know:</p>
  <ul>
    <li> What is Internet and World Wide Web(WWW).</li>
    <li> Good knowledge about HTML.</li>
    <li> Some coding experience(How to use code editor, etc).</li>
  </ul>
</section>
<section class="main-section" id="basic_css_syntax">
  <header>Basic CSS syntax</header>
  <p>A CSS example</p>
  <pre>
  <code>
div {
  background:blue;
}
#header {
  display:fixed;
}
.button {
  box-shadow; 0 0 .25 .25 #eee;
}
  </code>
  </pre>
</section>
  <section class="main-section" id="css_inclusion">
    <header>CSS Inclusion</header>
    <p> There are three ways you can add CSS script to your website</p>
    <ul>
      <li>
        <h4>Embedded - The <code>&ltstyle&gt</code> element</h4>
        <p>
          You can add your CSS code inside the &ltstyle&gt element.
          This element is placed inside the &lthead&gt element.
        </p>
        <pre>
          <code>
&lt!DOCTYPE html&gt
&lthtml&gt
   &lthead&gt
      &ltstyle type = "text/css" media = "all"&gt
         body {
            background-color: line;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      &lt/style&gt
   &lt/head&gt   
   &ltbody&gt
      &lth1&gtThis is a heading&lt/h1&gt
      &ltp&gtThis is a paragraph.&lt/p&gt
   &lt/body&gt
&lt/html&gt
          </code>
        </pre>
      </li>
      <li>
        <h4>Inline - The <code>style</code> attribute</h4>
        <p>You can use style attribute of any HTML element.
          These rules applied to that element only
        </p>
        <pre>
        <code>
&ltp style = "color:blue;"&gt
        </code>
        </pre>
      </li>
      <li>
        <h4>External - The <code>&ltlink&gt</code> element</h4>
        <p>
          You can include external CSS file into your HTML page using
          <code>&ltlink&gt</code> element.
          This element is placed inside the
          <code>&lthead&gt</code> elemet.
        </p>
        <pre>
        <code>
&lthead&gt
   &ltlink type = "text/css" href = "css/stylesheet.css"/&gt
&lt/head&gt
        </code>
        </pre>
      </li>
    </ul>
  </section>
  <section class="main-section" id="hello_world!">
    <header>Hello World!</header>
    <p>
      Here is an example of how to change
      color of <code>&ltp&gt</code> element
      using embedded CSS
    </p>
    <pre>
      <code>
&lt!DOCTYPE html&gt
&lthtml&gt
   &lthead&gt
      &lttitle&gtHello World&lt/title&gt
      &ltstyle&gt
      p {
         color: #36CFFF; 
      }
      &lt/style&gt
   &lt/head&gt	
   &ltbody&gt
      &ltp&gtHello World!&lt/p&gt
   &lt/body&gt	
&lt/html&gt
      </code>
    </pre>
  </section>
  <section class="main-section" id="css_selector">
    <header>CSS Selector</header>
    <p>
      CSS Selector is use to select HTML
      element you want to style.</p>
    <p>
      We can divide CSS selectors into five
      categories:
    </p>
    <ul>
      <li>
        Simple selectors (select elements
        based on name, id, class)
      </li>
      <li>
        Combinator selectors (select elements 
        based on a specific relationship
        between them)
      </li>
      <li>
        Pseudo-class selectors (select elements based on a certain state)
      </li>
      <li>
        Pseudo-elements selectors (select and style a part of an element)
      </li>
      <li>
        Attribute selectors (select elements based on an attribute or attribute value)
      </li>
    </ul>
    <p>
      This Documentation will describe the
      simple element selector
    </p>
    <ul>
      <li>
       <h4><code>id</code> Selector</h4>
       <p>
          The id selector uses the id 
          attribute of an HTML element to 
          select a specific element.
       </p>
       <p>
          The id of an element is unique 
          within a page, 
          so the id selector is used to select
          one unique element!
       </p>
       <p>
          To select an element with a specific 
          id, write a hash (#) character, 
          followed by the id of the element.
       </p>
       <p>Example:</p>
       <pre>
       <code>
#para1 {
  text-align: center;
  color: red;
}
       </code>
       </pre>
      </li>
      <li>
        <h4><code>class</code> Selector</h4>
        <p>
          The class selector selects HTML 
          elements with a specific class 
          attribute.
        </p>
        <p>
          To select elements with a specific 
          class, write a period (.) character, 
          followed by the class name.
        </p>
        <pre>
          <code>
.center {
  text-align: center;
  color: red;
}
          </code>
        </pre>
      </li>
      <li>
        <h4>Element selector</h4>
        <p>
          The element selector selects HTML
          elements based on the element name.
        </p>
        <pre>
          <code>
p {
  text-align: center;
  color: red;
}      
          </code>
        </pre>
      </li>
    </ul>
  </section>
</main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


* {
  font-family: 'Roboto',
               sans-serif;
}

code, pre {
  font-family: monospace;
}

#navbar {
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:250px;
  border: solid grey;
  border-width: 0px 3px 0px 0px;
}

#navbar header {
  text-align: center;
  margin:0;
  height:60px;
  font-size:1.3rem;
  line-height:60px;
  border: solid #444444;
  border-width: 0px 0px 3px 0px;
  background:#3D4146;
  color:#eee;
}

#navbar ul {
  height:100%;
  padding:0;
  list-style:none;
  margin-top:0px;
  overflow-y: auto;
}

#navbar li {
  padding:20px;
  border:1px solid #ddd;
  border-width: 0px 0px 2px 0px;
}

#navbar a {
  text-decoration:none;
  color:#4d4e53;
}


#main-doc {
  margin-left:250px;
  padding:25px;
}

#main-doc header {
  font-size: 1.8rem;
  border:1px solid #ddd;
  border-width: 0px 0px 1px 0px;
}

#main-doc p {
  margin: 15px 20px;
  color:#4d4e53;
}

#main-doc li {
  margin: 20px 20px;
  color:#4d4e53;
}

pre > code {
  display:block;
  margin: 0px 20px;
  background:#444444;
  color:white;
  padding: 10px 15px;
  border-radius: 3px;
  overflow-x: auto;
}

#main-doc pre {
  display:block;
  margin: 0px 20px;

}

@media only screen and (max-width:700px) {
  #navbar {
    position:absolute;
    top:0;
    height:200px;
    width:100%;
    border: solid grey;
    border-width: 0px 0px 5px 0px;
  }
  #navbar ul {
    height:140px;
    padding:0;
    list-style:none;
    margin-top:0px;
    overflow-y: auto;
  }
  
  #main-doc {
    margin-left:0;
    margin-top:200px;
    padding:25px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console