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

              
                <header class="site-header">
  <div class="max-width">
    <h1 class="heading__primary">CSS Cheat Sheet</h1>
    <h2 class="heading__secondary">
      <div>Cascading</div>     
      <div>Style</div>
      <div>Sheets</div>     
    </h2>
    <nav class="toggle-nav">
      <a href="#" data-toggle="all" class="active">All</a>
      <a href="#" data-toggle="selectors">Selectors</a>
      <a href="#" data-toggle="properties">Properties</a>
      <a href="#" data-toggle="pseudo-classes">Pseudo Selectors</a>
    </nav>
  </div>
</header>

<main class="site-content">
  <article class="content-section" id="selectors">
    <header class="content-section__header">
      <div class="max-width">
        <h1 class="heading__tertiary">Selectors</h1>
      </div>
    </header>

    <div class="max-width">
      <p class="description">A selector is the part of a CSS rule that identifies the content you want to style.</p>
      <table class="content-section__table">
        <tbody>
          <tr>
            <td>
              <code class="code code--dim">
                <span class="code--blue">p</span> {<br />
                &nbsp;&nbsp;background-color: white;<br />
              }
              </code>
            </td>
            <td><strong>Element Selectors</strong> style all instances of an HTML element.</td>
          </tr>
          <tr>
            <td>
              <code class="code code--dim">
                <span class="code--blue">.your-class</span> {<br />
                &nbsp;&nbsp;background-color: white;<br />
              }
              </code>
            </td>
            <td><strong>Class Selectors</strong> style only elements that have the same class name. Class names begin with a period in your CSS.</td>
          </tr>
          <tr>
            <td>
              <code class="code code--dim">
                <span class="code--blue">#your-id</span> {<br />
                &nbsp;&nbsp;background-color: white;<br />
                }
              </code>
            </td>
            <td><strong>ID Selectors</strong> style only elemnts that have the same ID name. IDs begin with a number symbol in your CSS.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </article>

  <article class="content-section" id="properties">
    <header class="content-section__header">
      <div class="max-width">
        <h1 class="heading__tertiary">Properties</h1>
      </div>
    </header>
    <div class="max-width">
      <p class="description">The part of a CSS rule that identifies what part of the selector you what to style.</p>
      <h3 class="heading__quaternary">Background</h3>
      <table class="content-section__table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Example</th>
            <th>Use</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code class="code code--pink">background-color</code></td>
            <td><code class="code code--pink">background-color:<span class="code--purple"> deeppink;</span></code></td>
            <td>Add a solid background color to an object. Is usually set with a hexadecimal value, named color, or an rgb value.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">background-image</code></td>
            <td><code class="code code--pink">background-image:<span class="code--purple"> url(image.jpg);</span></code></td>
            <td>Sets an image as a background to an object.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">background-attachment</code></td>
            <td><code class="code code--pink">background-attachment:<span class="code--purple"> scroll;</span></code><br /><code class="code code--pink">background-attachment:<span class="code--purple"> fixed;</span></code></td>
            <td>Sets how an elements background behaves when the page scrolls.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">background-repeat</code></td>
            <td><code class="code code--pink">background-repeat:<span class="code--purple"> repeat;</span></code><br />

              <code class="code code--pink">background-repeat:<span class="code--purple"> repeat-x;</span></code><br />

              <code class="code code--pink">background-repeat:<span class="code--purple"> repeat-y;</span></code><br />

              <code class="code code--pink">background-repeat:<span class="code--purple"> no-repeat;</span></code></td>
            <td>Sets how a background image repeats.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="max-width">
      <h3 class="heading__quaternary">Text</h3>
      <table class="content-section__table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Example</th>
            <th>Use</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code class="code code--pink">font-family</code></td>
            <td><code class="code code--pink">font-family:<span class="code--purple">  'Times New Roman', Georgia, serif;</span></code></td>
            <td>Sets the display font of an elements text. Accepts a comma separated list of fonts. The first font will be loaded first and all others will be backup fonts. A font type is usually added at the end of the list. Fonts with spaces need to be
              wrapped in quotes.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">font-size</code></td>
            <td><code class="code code--pink">font-size:<span class="code--purple"> 16px;</span></code></td>
            <td>Sets the size of an element's text.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">font-weight</code></td>
            <td><code class="code code--pink">font-weight:<span class="code--purple"> bold;</span></code></td>
            <td>Sets the weight or thickness of a font.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">font-style</code></td>
            <td><code class="code code--pink">font-style:<span class="code--purple"> italic;</span></code></td>
            <td>Allows you to make text appear italicized or otherwise stylized.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">text-decoration</code></td>
            <td><code class="code code--pink">text-decoration:<span class="code--purple"> underline;</span></code><br />
              <code class="code code--pink">text-decoration:<span class="code--purple"> line-through;</span></code></td>
            <td>Allows you to add an underline, overline, line-through, or a combination of lines to selected text.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">color</code></td>
            <td><code class="code code--pink">color:<span class="code--purple"> aquamarine;</span></code></td>
            <td>Allows you to change the color of text.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">line-height</code></td>
            <td><code class="code code--pink">line-height:<span class="code--purple"> 18px;</span></code></td>
            <td>Sets the amount of vertical space a line of text will use.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="max-width">
      <h3 class="heading__quaternary">Border</h3>
      <table class="content-section__table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Example</th>
            <th>Use</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code class="code code--pink">border-width</code></td>
            <td><code class="code code--pink">border-width:
<span class="code--purple"> 2px;</span></code></td>
            <td>Sets the width of a border.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">border-color</code></td>
            <td><code class="code code--pink">border-color:<span class="code--purple"> forestgreen;</span></code></td>
            <td>Sets the color of a border.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">border-style</code></td>
            <td><code class="code code--pink">border-style:<span class="code--purple"> solid;</span></code><br />
              <code class="code code--pink">border-style:<span class="code--purple"> dotted;</span></code><br />
              <code class="code code--pink">border-style:<span class="code--purple"> dashed;</span></code></td>
            <td>Sets style of the line of a border..</td>
          </tr>
          <tr>
            <td><code class="code code--pink">border-radius</code></td>
            <td><code class="code code--pink">border-radius:<span class="code--purple"> 25%;</span></code></td>
            <td>Adds rounded corners to an element. Accepts pixel values, em values, and percentage.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="max-width">
      <h3 class="heading__quaternary">The Box Model</h3>
      <table class="content-section__table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Example</th>
            <th>Use</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code class="code code--pink">display</code></td>
            <td>
              <code class="code code--pink">display:
<span class="code--purple"> block;</span></code> <br />
              <code class="code code--pink">display:
<span class="code--purple"> inline;</span></code> <br />
              <code class="code code--pink">display:
<span class="code--purple"> none;</span></code>
            </td>
            <td>Allows you to display the default display of an element. Some are block elements and some are inline. Find a really good explanation at <a href="http://learnlayout.com/display.html" target="_blank">learnlayout.com/display.html</a>.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">float</code></td>
            <td><code class="code code--pink">float:<span class="code--purple"> right;</span></code></td>
            <td>Used for positioning elements on a page.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">clear</code></td>
            <td><code class="code code--pink">clear:<span class="code--purple"> left;</span></code></td>
            <td>Used with floats, clear can affect the other elements before or after your element.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">width</code></td>
            <td><code class="code code--pink">width:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the amount of horizontal space an element will use.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">min-width</code></td>
            <td><code class="code code--pink">min-width:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the minimum amount of horizontal space an element will use.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">max-width</code></td>
            <td><code class="code code--pink">max-width:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the maximum-amount of horizontal space an element will use.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">height</code></td>
            <td><code class="code code--pink">height:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the amount of vertical space an element will use.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">min-height</code></td>
            <td><code class="code code--pink">min-height:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the minimum amount of vertical space an element will use.</td>
          </tr>
          <tr>
            <td><code class="code code--pink">max-height</code></td>
            <td><code class="code code--pink">max-height:<span class="code--purple"> 50%;</span></code></td>
            <td>Set's the maximum amount of vertical space an element will use.</td>
          </tr>
          
          <tr>
            <td><code class="code code--pink">margin</code></td>
            <td><code class="code code--pink">margin:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">margin-top:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">margin-right:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">margin-bottom:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">margin-left:<span class="code--purple"> 20px;</span></code></td>
            <td>Adjust the outside space around all sides of an element.</td>
          </tr>
          
          <tr>
            <td><code class="code code--pink">padding</code></td>
            <td><code class="code code--pink">padding:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">padding-top:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">padding-right:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">padding-bottom:<span class="code--purple"> 20px;</span></code><br />
              <code class="code code--pink">padding-left:<span class="code--purple"> 20px;</span></code></td>
            <td>Adjust the interior space around all sides of an element.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </article>

  <article class="content-section" id="pseudo-classes">
    <header class="content-section__header">
      <div class="max-width">
        <h1 class="heading__tertiary">Pseudo Selectors</h1>
      </div>
    </header>
    <div class="max-width">
      <p class="description">A keyword added to selectors to identify only a specific state.</p>

      <table class="content-section__table">
        <thead>
          <tr>
            <th width="200">Selector</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <code class="code code--dim">
                p<span class="code--blue">:hover</span> {<br />
                &nbsp;&nbsp;color: green;<br />
                }
              </code>
            </td>
            <td>Sets how an element is styled when the mouse hovers over it.</td>
          </tr>
          <tr>
            <td>
              <code class="code code--dim">
                p<span class="code--blue">:first-child</span> {<br />
                &nbsp;&nbsp;color: green;<br />
                }
              </code>
            </td>
            <td>Sets how the first instance of an element is styled.</td>
          </tr>
          <tr>
            <td>
              <code class="code code--dim">
                p<span class="code--blue">:last-child</span> {<br />
                &nbsp;&nbsp;color: green;<br />
                }
              </code>
            </td>
            <td>Sets how the last instance of an element is styled.</td>
          </tr>
      </table>
    </div>
  </article>
</main>

<footer class="site-footer">
  <div class="max-width">
    <p>This site is for educational purposes in connection with the <a href="https://www.gswo.org/">Girl Scouts of Western Ohio</a>. All image rights are retained solely by the original sources. Learn more at <a href="http://girlscancode.io">Girls Can Code</a>.</p>
  </div>
</footer>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console