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. 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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 


<!DOCTYPE html>
<html lang="en-US">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Documentation</title>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" media="all">

 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

     <!--which contains text that describes the topic of that section.-->
    <nav id=navbar><!--I can see a nav element with a corresponding id="navbar".-->
    <header>CSS Documentation</header>
        <!-- Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.--> 
            <li><a class="nav-link" href="#Introduction">Introduction</a></li>
            <li><a class="nav-link" href="#What_is_CSS">What is CSS</a></li>
            <li><a class="nav-link" href="#How_CSS_works">How CSS works</a></li>
            <li><a class="nav-link" href="#Simple_selectors">Simple selectors</a></li>
            <li><a class="nav-link" href="#Attribute_selectors">Attribute selectors</a></li>
            <li><a class="nav-link" href="#Grids">Grids</a></li>
            <li><a class="nav-link" href="#Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
            <li><a class="nav-link" href="#CSS_values_and_units">CSS values and units  </a></li>
            <li><a class="nav-link" href="#The_box_model">The box model</a>
            <li><a class="nav-link" href="#CSS_and_debugging">CSS and debugging </a></li>
            <li><a class="nav-link" href="#Positioning">Positioning</a></li>
            <li><a class="nav-link" href="#Reference">Reference</a></li>
<main id=main-doc> <!--which contains the page's main content (technical documentation).-->
    <section class="main-section" id="Introduction">
        <p>Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML(including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>

        <p>CSS is one of the core languages of the open web and is standardized across browsers according to the W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and CSS3, now split into smaller modules, is progressing on the standardization track.</p>

        <p>Basic rule syntax
        <code> {
        property: value;
        [more property:value; pairs]
        ... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
             <section class="main-section" id="What_is_CSS"><header>What is CSS</header> 
            <p>As we have mentioned before, CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.</p>

            <p>A document is usually a text file structured using a markup language — HTML is the most common markup language, but you will also come across other markup languages such as SVG or XML.</p>

            <p>Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.</p>
        <section class="main-section" id="How_CSS_works"><header>How CSS works</header> 
            <p>CSS(Cascading Style Sheets)allows you to create great looking web pages, but how does it work under the hood? This article explains what CSS is, how the browser turns HTML into a Document Object Model (DOM), how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.</p>
    <section class="main-section" id="Simple_selectors"><header>Simple selectors</header>
        <p>This selector is just a case-insensitive match between the selector name and a given HTML element name. This is the simplest way to target all elements of a given type. Let's take a look at an example:</p>

            Here is some HTML:
            "p>What color do you like? /p>
             div>I like blue./div> 
            p>I prefer BLACK!/p>"
            A simple style sheet:

            All p elements are red: 
            <code> "p {
            color: red;

            /* All div elements are blue */
            div {
            color: blue;
    <section class="main-section" id="Attribute_selectors">
        <header>Attribute selectors</header>
        <p>Attribute selectors are a special kind of selector that will match elements based on their attributes and attribute values. Their generic syntax consists of square brackets ([]) containing an attribute name followed by an optional condition to match against the value of the attribute. Attribute selectors can be divided into two categories depending on the way they match attribute values: Presence and value attribute selectors and Substring value attribute selectors.</p>
        <p>These attribute selectors try to match an exact attribute value:</p>
        [attr] : This selector will select all elements with the attribute attr, whatever its value.
        [attr=val] : This selector will select all elements with the attribute attr, but only if its value is val.
        [attr~=val]: This selector will select all elements with the attribute attr, but only if  val is one of a space-separated list of words contained in attr's value. 
    <section class="main-section" id="Grids"><header>Grids</header>
        <p>A grid is simply a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.<br>

        A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters.<br>

        To define a grid we use the grid value of the display property. As with Flexbox, this switches on Grid Layout, and all of the direct children of the container become grid items. Add this to the CSS inside your file:<br>
        <code>.container {
        display: grid;
        <p>To see something that looks more grid-like, we will need to add some columns to the grid. Let's add three 200-pixel columns here. You can use any length unit, or percentages to create these column tracks.
        <code>.container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        <!--The .main-section elements should contain at least 5 li items total (not each)..-->
        <strong>CSS Grid properties</strong>
    <section class="main-section" id="Pseudo-classes_and_pseudo-elements"><header>Pseudo-classes and pseudo-elements</header>
        <p>A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.</p>
    <section class="main-section" id="CSS_values_and_units"><header>CSS values and units</header>
            <p>There are many value types in CSS, some of them very common and some of them that you'll rarely come across. We won't cover all of them exhaustively in this article; just the ones that you are likely to find most useful as you continue on your path towards mastering CSS. In this article we will cover the following CSS values:</p>
            Numeric values: Length values for specifying e.g. element width, border thickness, or font size, and unitless integers for specifying e.g. relative line width or number of times to run an animation.
            Percentages: Can also be used to specify size or length — relative to a parent container's width or height for example, or the default font-size.
            Colors: For specifying background colors, text colors, etc.</p>
            Coordinate positions: e.g. for specifying the position of a positioned element relative to the top left of the screen.
            Functions: For specifying e.g. background images or background image gradients.
            You'll also see examples of such units in use all the way through the rest of the CSS topic, and just about every other CSS resource you see! You'll get used to it all in no time.</p>
    <section class="main-section" id="The_box_model"><header>The box model</header>
            <p>Every element within a document is structured as a rectangular box inside the document layout, the size and "onion layers" of which can be tweaked using some specific CSS properties. The relevant properties are as follows:</p> 
                <img src="http://www.corelangs.com/css/box/img/box-model.png" alt="box-model-image">
    <section class="main-section" id="CSS_and_debugging"><header>CSS and debugging</header>
            <p>Just like HTML, CSS is permissive (read permissive code before continuing.) In CSS's case, if a declaration is invalid (contains a syntax error, or the browser doesn't support that feature), the browser just ignores it completely and moves on to the next one it finds.</p>

            <p>If a selector is invalid, then it doesn't select anything, and the whole rule does nothing — again, the browser just moves on to the next rule.</p>

            <p>This is great in a lot of ways — in most cases your content will be shown to your users, even if it isn't styled quite right. But this isn't very helpful when you are trying to debug the problem and you don't even get any kind of error message to help you find it. This is even more of a pain when the content isn't viewable by your users — perhaps a critical style isn't being applied, resulting in the layout going badly wrong?</p>

            <p>Fortunately there are some tools available to help you. Let's look at these now.</p>

            <p>Link to sectionInspecting the DOM and CSS
            Nowadays, all web browsers provide developer tools made to help you inspect and understand web pages. Among the various tools they provide, there are two that are available in all browsers: The DOM Inspector and the CSS Editor, which are available in Firefox in the page inspector tool. We already looked at the DOM Inspector in Debugging HTML and how it can be used to inspect HTML. Here we'll look at this and the CSS Editor, and how to use them together to debug CSS problems.</p>
    <section class="main-section" id="Positioning"><header>Positioning</header>
            <p>The whole idea of positioning is to allow us to override the basic document flow behavior described above, to produce interesting effects. What if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? Positioning is your tool. Or if you want to create a UI element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning makes such layout work possible. </p>

            <p>There are a number of different types of positioning that you can put into effect on HTML elements. To make a specific type of positioning active on an element, we use the position property.</p>

            <p>Link to sectionStatic positioning
            Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."</p>

            <p>To demonstrate this, and get your example set up for future sections, first add a class of positioned to the second  p> in the HTML:  </p>
            p>class="positioned"> ... /p>
            Now add the following rule to the bottom of your CSS:

            .positioned {
            position: static;
            background: yellow;
    <section class="main-section" id="Reference"><header>Reference</header><article> 
        <p>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN</a></p>



              *, html {

    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans',Arial,sans-serif;
    line-height: 1.5;

#navbar {
    display: flex;
    flex-direction: column;
    background-color: #333; 
    position: fixed;
    text-align: center;
    line-height: 75px;
    font-size: 20px;
    overlflaw-y: scroll;
#navbar header{
/*change color on hover*/
#navbar li:hover {
    background-color: #ddd;
    color: black;

#navbar ul{

#navbar li{
    border: 1px solid;
    border-bottom-width: 0px;

#navbar a{
  color: white;

  font-size: 30px;

#main-doc header{


    text-align: left;
    white-space: pre;
    position: relative;
    word-wrap: normal;
    line-height: 2;
  overflow-x: scroll;

#Grids ul {
    padding-left: 1em;

section article{
    color: #4d4e53;

@media only screen (max-width:800px) {
  /*for phones*/
  #navbar ul{
    border:1px solid;
    background-color: grey;
    width: 100%;
    border-bottom:2px solid;
  #main-doc {
    position: relative;
  #main-doc section
    /*padding-top:240px; */

@media only screen and (max-width:400px){


              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// 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!

// Once you have read the above messages, you can delete all comments. 

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.