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

              
                <!-- 

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 

-->
  <body>
   <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <div id="doc-container">
    <nav id="navbar">
      <header><h2>CSS Selectors</h2></header>
      <a class="nav-link" href="#Introduction">Introduction</a>
      <a class="nav-link" href="#Tag_Selectors">Tag Selectors</a>
      <a class="nav-link" href="#Class_Selectors">Class Selectors</a>
      <a class="nav-link" href="#Id_Selectors">Id Selectors</a>
      <a class="nav-link" href="#Universal_Selectors">Universal Selectors</a>
      <a class="nav-link" href="#Pseudo_Selectors">Pseudo Selectors</a>
      <a class="nav-link" href="#Additional_Resources">Additional Resources</a>
    </nav>

    

    <main id="main-doc">
      
      <section class="main-section" id="Introduction">
        <header><h2>Introduction</h2></header>
        <p>Cascade Style Sheet (shorthand: CSS) is the language that gives us the ability to determine how we want our web pages to look. Everything from where elements are positioned, what colors are used, how text is sized and how images are displayed.</p>
        
        <p id="ptwo">CSS Selectors play a very important part in how the elements of webpages are displayed.  The syntax involves using a Tag selector, Class selector, Id selector, Universal selector or Pseudo selector followed by curly braces ({ }) which contain the style rules.  The specificity of the selector will vary depending on the type of the selector.  The purpose of this documentation is give you a brief overview about the most commonly used CSS selectors.</p>
      </section>

      <section class="main-section" id="Tag_Selectors">
        <header><h2>Tag Selectors</h2></header>
        <p>The Tag selector is used to apply style rules to the Tag Name element in your HTML file.  Let's look at the example code below using the div element:</p>
        <div class="code-window">
        <code>div {<br>margin: 2% auto;<br>height: auto;<br>width: 50%;<br>background-color: black;<br>color: white;<br>}<br><br>&#47;* Tag selectors in CSS files are not visible on your webpage. The one you see is displayed using HTML. *&#47;</code>
        </div>
        <p>The rules in the above code will give a uniform style to every div element on your web page, meaning, they will look identical.<br>
        The visual results below show how they will look on your web page:</p>
        <ul>
          <li class="tag_example">div</li>
          <li class="tag_example">div</li>
        </ul>
      </section>

      <section class="main-section" id="Class_Selectors">
        <header><h2>Class Selectors</h2></header>
        <p>Elements can also be styled by using the Class selector, which is preceded by a dot (.) as demonstrated in the code below:</p>
        <div class="code-window">
        <code>.Class_Name {<br>margin: 0 auto;<br>height: auto;<br>width: 60%;<br>background-color: green;<br>}<br><br>&#47;* Class selectors in CSS files are not visible on your webpage. The one you see is displayed using HTML. *&#47;</code>
        </div>
        <p>The visual result:</p>
        <ul>
          <li class="Class_Name">.Class_Name</li>
        </ul>
        <p>This provides a similar function to the Tag selector, but with a higher specificity.  This means the styling is applied to the elements that share the same class name, but overrides the shared style rules assigned to the element via the Tag selector.</p>
        
        <p>Another thing you can do is assign two Class Names to an element, like in the HTML example below:</p>
        <div class="code-window">
        <code>&lt;div class="Class_Name1 Class_Name2"&gt;  &lt;/div&gt;</code>
        </div>
        <p>The second Class selector give you the ability to apply a style that's different from the style applied to the first Class selector.</p>
        <div class="code-window">
        <code>.Class_Name1 {<br>margin: 2% auto;<br>height: auto;<br>width: 50%;<br>background-color: black;<br>color: white;<br>text-align: center;<br>}
        <br><br>.Class_Name2 {<br>width: 45%;<br>background-color: red;<br>border-radius: 10px;<br>}
        </code>
        </div>
        <p>The CSS code above applies all style rules assigned to Class_Name1 to both elements.  However, the style rules assigned to Class_Name2 override the shared style rules assigned to Class_Name1, as seen below:</p>
        <ul>
          <li class="Class_Name1">.Class_Name1</li>
          <li class="Class_Name1 Class_Name2">.Class_Name2</li>
        </ul>
      </section>

      <section class="main-section" id="Id_Selectors">
        <header><h2>Id Selectors</h2></header>
        <p>Taking the specificity up another notch is the Id selector, which is preceded by the hashtag (#).  Due to the higher specificity, the Id selector will override any style rules used the by Class selector.</p>
        <div class="code-window">
        <code>#Id_Name {<br>list-style: inside;<br>width: 80%;<br>}<br><br>
        #Id_Name li {<br>background-color: burlywood;<br>}</code>
        </div>
        <p>When using the Id selector, the developer community encourages the following guidlines:</p>
        <ul id="Id_Name">
          <li>Each Id selector must have a unique name.</li>
          <li>Using the same name for multiple Id selectors is considered bad practice.</li>
        </ul>
        <p>Bonus Lesson: One way to apply specific style rules to an element is by nesting it inside another element as you can see in the second set of style rules in the code example above (#Id_Name li).  More examples include:</p>
        <div class="code-window">
        <code>dvi ul li {<br>display: block;<br>width: 100%;<br>color: green;<br>}<br><br>
        div #Id_Name {<br>width: 80%;<br>}<br><br>
        .Class_Name #Id_Name {<br>color: blue;<br>}<br><br>
        #Id_Name .Class_Name {<br>background-color: purple;<br>}</code>
        </div>
      </section>

      <section class="main-section" id="Universal_Selectors">
        <header><h2>Universal Selectors</h2></header>
        <p>Universal selectors select every element in the HTML document and apply the style rules accordingly.  This includes all child elements.  The CSS symbol is a simple asterisk (*). A very common use for this selector is for resetting web browser default margin and padding like so:</p>
        <div class="code-window">
        <code>* {<br>margin: 0;<br>padding: 0;<br>}</code>
        </div>
        <ul>
          <li class="uni-select">The margin and padding for this unorded list have been set to 0.</li>
          <li class="uni-select">Same is true for this line item.</li>
        </ul>
        <p>Bonus Lesson:  Three other elements that apply global style rules are the body tag, html tag and the root selector. The html tag and root selector supersede the body tag by being the top level of the HTML document, except the root selector has a higher specificity.</p>
        <div class="code-window">
        <code>html {<br>font-family: sans-serif;<br>}<br><br>:root {<br>font-size: 10px;<br>}</code>
        </div>
        
      </section>

      <section class="main-section" id="Pseudo_Selectors">
        <header><h2>Pseudo Selectors</h2></header>
        <p>Pseudo selectors apply style rules to an element through an action like hovering, clicking or tapping. They are used with Tag, Class or Id selector. They follow a selector and are preceded with the colon (:). The code example below demonstrates the hover and focus selectors:</p>
        <div class="code-window">
        <code>#embarrased:hover {<br>color: red;<br>pointer: red;<br>}<br><br>
        input[type=text]:focus {<br>background-color: aqua;<br>}
        </code>
        </div>
        <p>To see the results below, hover/tap over the first line of text and click/tap inside the field containing the second line of text.</p>
        <ul>
          <li id="embarrased">I turn red in embarrasment when you point at me</li>
          <li><input type="text" name="focus" placeholder="You will focus on me!!"></li>
        </ul>
        <p>Bonus Lesson:  Another method to apply style to an element is by using an attribute selector which is contained in square brackets ([ ]) as seen in the code example above (input[type=text]).</p>
      </section>

      <section class="main-section" id="Additional_Resources">
        <header><h2>Additional Resources</h2></header>
        <p>You may find more information from the links below:</p>
        <ul id="external-links">
          <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector" target="_blank" rel="noreferrer"><img id="mdn" src="https://developer.mozilla.org/static/img/favicon144.e7e21ca263ca.png" alt="mozilla-logo"></a>
          <a href="https://www.w3schools.com/cssref/css_selectors.asp" target="_blank" rel="noreferrer"><img id="w3schools" src="https://www.w3schools.com/favicon.ico" alt="w3schools-logo"></a>
          <a href="https://css-tricks.com/?s=css%20selectors&orderby=date&order=ASC&post_tag=css" target="_blank" rel="noreferrer"><img id="css-tricks" src="https://css-tricks.com/apple-touch-icon.png" alt="css-tricks-logo"></a>
          <a href="https://www.youtube.com/user/KepowOb/videos" target="_blank" rel="noreferrer"><img id="youtube" src="https://s.ytimg.com/yts/img/favicon_96-vflW9Ec0w.png" alt="youtube-logo"></a></li>
        </ul>
      </section>
        

    <!--end main--></main>
    <!--end doc-container--></div>
    

              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
}

:root {
  font-size: 10px;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
}

header {
  margin: 1em auto;
  font-size: 2.5rem;
}

#doc-container {
  width: 100%;
  height: 100%;
  display: flex;
}

#doc-container #navbar {
  position: static;
  display: inline-block;
  background-color: #515A5A;
  height: 100vh;
  width: 20%;
}

#doc-container #navbar header h2 {
  font-size: 2.5rem;
  text-align: center;
  margin: 1rem auto;
  color: white;
}

#doc-container #navbar a {
  display: inline-block;
  font-size: 2rem;
  text-align: center;
  margin: 1rem auto;
  width: 100%;
  color: #C0C0C0;
}

#doc-container #main-doc {
  position: relative;
  display: inline-block;
  height: auto;
  width: 80%;
  overflow-x: hidden;
}

#doc-container #main-doc .main-section header, h2, code, ul, ul li {
  text-align: center;
}

#doc-container #main-doc .main-section {
  padding-top: .1em;
}

#doc-container #main-doc #Additional_Resources {
  padding: 1rem 0 2em 0;
}

#doc-container #main-doc .main-section header h2 {
  font-weight: bold;
}

#doc-container #main-doc .main-section p {
  width: 90%;
  font-size: 1.7rem;
  margin: 2rem auto;
}

#doc-container #main-doc .main-section #ptwo {
  margin-top: 2rem;
}

#doc-container #main-doc .main-section .code-window {
  margin: 1em auto;
  width: 40%;
  padding: 1em;
  background-color: black;
  border-radius: 4px;
}

#doc-container #main-doc .main-section code {
  font-size: 1.5rem;
  color: #1AF904;
}

#doc-container #main-doc .main-section ul {
  margin: 2rem auto;
  width: 75%;
  list-style: none;
}

#doc-container #main-doc .main-section ul li {
  text-align: left;
  text-indent: 1.5%;
  font-size: 1.5rem;
  width: 100%;
}

#doc-container #main-doc .main-section ul .tag_example {
  margin: 1rem auto;
  height: auto;
  width: 50%;
  background-color: black;
  color: white;
}

#doc-container #main-doc .main-section ul .Class_Name {
  margin: 0 auto;
  height: auto;
  width: 70%;
  background-color: green;
  color: white;
}

#doc-container #main-doc .main-section ul .Class_Name1 {
  margin: 1rem auto;
  height: auto;
  width: 50%;
  background-color: black;
  color: white;
  text-align: center;
}

#doc-container #main-doc .main-section ul .Class_Name2 {
  width: 45%;
  background-color: red;
  border-radius: 10px;
}

#doc-container #main-doc .main-section #Id_Name {
  list-style: inside;
  width: 80%;
}

#doc-container #main-doc .main-section #Id_Name li {
  background-color: burlywood;
  padding: .3rem 0;
}

#doc-container #main-doc .main-section ul .uni-select {
  margin: 0;
  padding: 0;
  text-align: center;
  outline: 1px solid blue;
}

#doc-container #main-doc .main-section ul #embarrased {
  text-align: center;
}

#doc-container #main-doc .main-section ul #embarrased:hover {
  color: red;
  cursor: pointer;
}

#doc-container #main-doc .main-section ul li input[type=text] {
  width: 100%;

}

#doc-container #main-doc .main-section ul li input[type=text]:focus {
  background-color: aqua;
}

#doc-container #main-doc .main-section ul li input[type=text]::placeholder {
  color: black;
  text-indent: 1%;
}

#doc-container #main-doc .main-section #external-links {
  width: 30rem;
  height: auto;
}

#doc-container #main-doc .main-section #external-links li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

#doc-container #main-doc .main-section #external-links li a {
  display: inline-block;
  margin: 1rem 2rem;
  height: 100%;
  width: 100%;
}

#doc-container #main-doc .main-section #external-links li a img {
  display: block;
  height: auto;
  width: 100%;
}


/* media quiries */
@media screen and (max-width: 600px) {

#doc-container {
  display: block;
}

#doc-container #navbar {
  display: block;
  height: 13rem;
  width: 100%;
  position: fixed;
  z-index: 1;
}

#doc-container #navbar header {
  margin: .5rem auto;
}

#doc-container #navbar .nav-link {
  margin: 0 1rem;
  width: auto;
  text-align: center;
}

#doc-container #main-doc {
  display: block;
  width: 100%;
  overflow-x: hidden;
}

#doc-container #main-doc .main-section {
  padding-top: 13em;
}

#doc-container #main-doc .main-section .code-window {
  width: 70%;
}

/* @media end 600px */}

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

  #doc-container #navbar {
    height: 15rem;
  }

  #doc-container #main-doc .main-section {
  padding-top: 13em;
}

/* @media end 400px */}
              
            
!

JS

              
                
              
            
!
999px

Console