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

<nav id="navbar">
  <header>CSS basics</header>
         <a href="#introduction" class="nav-link">Introduction</a>
    <a href="#what_is_css?" class="nav-link">What is CSS?</a>
    <a href="#fonts_and_text" class="nav-link">Fonts and text</a>
       <a href="#css:_all_about_boxes" class="nav-link">CSS: all about boxes</a>
    <a href="#conclusion" class="nav-link">Conclusion</a>
 </nav>

<main id="main-doc">
    <section class="main-section" id="introduction">
    <header>Introduction</header>      
  
    <content id="introduction">
       <p>CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?.</p>
          </content>
  </section>
  
  <section class="main-section" id="what_is_css?">
    <header>What is CSS?</header>      
  
      <p>Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:</p>
<pre><code>p {
  color: red;
}</code></pre>
  <p>Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file. Save the file as <code>style.css</code> in a directory named <code>styles</code>.</p>

<p>To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won't change the appearance of the HTML. (If you haven't been following our project, pause here to read Dealing with files and HTML basics.)</p>
<ol>
  <li>Open your <code>index.html</code> file. Paste the following line in the head (between the <code>&lthead&gt</code> and <code>&lt/head&gt</code> tags):
    
    <pre><code>&ltlink href="styles/style.css" rel="stylesheet"&gt</code></pre>
</li>

  <li>Save <code>index.html</code> and load it in your browser. You should see something like this:
<img src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" alt="mozilla is cool" width="500" height="600">
</li>
</ol>

<h4>Property value</h4>

<p>To the right of the property—after the colon—there is the <b>property value</b>. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to <b>red</b>.)</p>
<p>Note the other important parts of the syntax:</p>

<li>Apart from the selector, each ruleset must be wrapped in curly braces. ({})</li>
<li>Within each declaration, you must use a colon (:) to separate the property from its value or values.</li>
<li>Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.</li>

<>To modify multiple property values in one ruleset, write them separated by semicolons, like this:
<p><pre><code>{
  color: red;
  width: 500px;
  border: 1px solid black;
}</code></pre></p>
    </content>
  </section>

   <section class="main-section" id="fonts_and_text">
    <header>Fonts and text</header>
     
      <p>Now that we've explored some CSS fundamentals, let's improve the appearance of the example by adding more rules and information to the <code>style.css file.</code></p>

<ol>
<li>First, find the output from Google Fonts that you previously saved from What will your website look like?. Add the <code>&ltlink&gt</code> element somewhere inside your index.html's head (anywhere between the head> and </head> tags). It looks something like this:</p>
<p><code>&ltlink href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt</code></p>
This code links your page to a style sheet that loads the Open Sans font family with your webpage.</li>
<li>Next, delete the existing rule you have in your <code>style.css</code> file. It was a good test, but let's not continue with lots of red text.</li>

<li>Add the following lines (shown below), replacing the <code>font-family</code> assignment with your <code>font-family</code> selection from What will your website look like?. The property <code>font-family</code> refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page. Since <code>&lthtml&gt</code> is the parent element of the whole page, all elements inside it inherit the same <code>font-size</code> and <code>font-family</code>.</li>

<pre><code>html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
}</pre></code>
     
    </content>
  </section>
  
   <section class="main-section" id="css:_all_about_boxes">
    <header>CSS: all about boxes</header>
      <p>Something you'll notice about writing CSS: a lot of it is about boxes. This includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes.</p>
     <p>CSS layout is mostly based on the <i>box model</i>. Each box taking up space on your page has properties like:</p>
<ul>
<li><code>padding</code>, the space around the content. In the example below, it is the space around the paragraph text.</li>
<li><code>border</code>, the solid line that is just outside the padding.</li>
<li><code>margin</code>, the space around the outside of the border.</li>
  <p>To continue, let's add more CSS. Keep adding these new rules at the bottom of <code>style.css</code>. Experiment with changing values to see what happens.</p>
  <h4>Changing the page color</h4>
<pre><code>
html {
  background-color: #00539F;
}</code></pre>
  
    </content>
  </section>
  
   <section class="main-section" id="conclusion">
    <header>Conclusion</header>
    <p>If you followed all the instructions in this article, you should have a page that looks similar to this one:</p>    
  
    </content>
  </section>
  <p>All information from this page is taken from <a href="https://developer.mozilla.org">MDN web docs</p>
    </main>