Technical documentation page project. Failed:You should have at least five code elements that are descendants of .main-section elements

I Have all the requirements checked off except 1. Any help would be appreciated :

You should have at least five code elements that are descendants of .main-section elements.
here is my HTML code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Technical Documentation Page</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>CSS technical document</title>
</head>
<body>
  <main id="main-doc">
    <nav id="navbar">
      <header>
  <ul>
    <li><a class="nav-link" href="#introduction">Introduction</a></li>
    <li><a class="nav-link" href="#why_use_CSS?">Why use CSS?</a></li>
    <li><a class="nav-link" href="#when_Was_CSS_created?">When was CSS created?</a></li>
    <li><a class="nav-link" href="#Linking_CSS_to_HTML">linking CSS to HTML</a></li>
    <li><a class="nav-link" href="#CSS_ruleset_structure">CSS ruleset structure</a></li>
    <li><a class="nav-link" href="#Selecting_multiple_elements">Selecting multiple elements</a></li>
    </ul>
    </header>
    </nav>

  <section class="main-section"  id="introduction">
    <header class="header">Introduction</header>
    <p>CSS (Cascading Style Sheets) is a style sheet language that is used to edit the look and the format of
a document that is written in the markup language. It is an addtional feature that us used a lot with HTML
that give the abilty to edit customize the style of the web page and what kind of interfaces the webiste
has. It can also be used with any kind of XML documents including plain XML, SVG and XUL.
</p>
<br>
<p>CSS gives developers and designers the ability to add their own flare to a website and let's them dictate how the site behaves.CSS gives you freedom to customize aspects of a page like fonts, font colors, background colors, fading images, spacing, how elements are position on the website, and many other things. 
  </p>
<br>
  <p>CSS is used with HTML and JavaScript in most websites to aid in the abilty to create user interfaces
for web applications and user interfaces in mobile applications.
</p> <br>
<p>HTML wasn't meant to contain tags for the purposes of formatting a webiste. It's pupose of being created was to describe the contents of the website. When developers added tags such as < font>, color, and other attributes to the HTML 3.2 specification it caused a headache for developers. The styling attributes had to be added to every individual page and this made the process very long and also it was expensive.
  </p>
</section>
<br> <br> <br> <br>
<section  class="main-section" id="why_use_CSS?"> 
  <header class="header">Why use CSS?</header>
<p>
  <ul>
<li> &#9830; CSS saves time by allowing you to make edits across multiple pages at one time instead of you having to make  multiple edits. </li><br>
<li> &#9830; Allows you to make more detailed edits so you can customize your site.</li><br>
<li> &#9830; Makes it easy to sepearate between the coding of your website and the style edits you want to make to the site.</li><br>
<li> &#9830; Pages will respond faster. More code means slower page speed and with CSS one line of code can effect all occurrences of a tag within the HTML document.</li>
<li> &#9830; Compatability across differnet devices. Websites must be fully visible and easy to navigate on all devices and CSS works with HTML to make resposive design possible.</li>
    </ul>
    </p>
    </section>

<section class="main-section"  id="when_Was_CSS_created?">
  <header class="header">When was CSS created?</header>
<p>CSS was created in 1994 by Hakon Wium Lie. There wasn't a way at the time to edit the style of a document like there was when Hakon worked on personalized newspaper presentations back at MIT Media Laboratory and he wanted to bridge that gap.The 1st commercial browser to support CSS was Microsoft's Internet Explorer 3.
  </p><br>
  <p>The next browser to support CSS was Netscape Navigator version 4.0.Netscaped used CSS internally by translating it's rules into snippets of Javascript that were run along side with other scripts. The company also allowed developers to write JSSS, that would have bypassed CSS all together. Forunately for CSS JSSS wasn't as successful or there would one addition style sheet than needed.</p> 
  <br> <br>
  <p> The idea of style sheets in browsers was not a completely new idea. Trying to make separation of the 
document structure and the document's layout had been a goal of HTML from it's birth in 1990. Tim Berners-
Lee wrote his NeXt browswer/editor in a way that was able to edit the style with a simple style sheet.
However, he didnt publish the syntax for the style sheets. He considered it a problem for each broswer to
pick the best way to dispay the webpages to its users. in 1992, Pei Wei created a browser called Viola
that had it's own style sheet language. the browsers that followed this had fewer and fewer options for
users to edit the web pages styles. 1993, NCSA Mosaic, the browser that made the web popular, came out. 
This was a step backwards in the ways of style creation though cause it only allowed for the user to edit 
certain colors and fonts.
</p>
<br>
<p>
  Cascading Style Sheets wasn't the only proposed style language at that time. Pei Wei's language from the
Viola browser, and around 10 other proposals for style sheet languages were send to the www-talk and
www html mailing lists. There was also DSSSl which was a style and transformation language under
development at ISo for printing SGML documents. DSSSL could be applied to HTML as well. CSS had one
feature that made it unique from the others though. CSS took into account that on the web, the style of
a document couldn't be designed by either the author or the reader on their own, but at their wishes had 
to be combined in some way; and in fact, not just the reader's and author's wishes but
 also the capabilites of the display device and the browser.
 <br> <br> <br> <br> <br> <br> <br> <br>
 </p>
</header>
</section>

<section class="main-section" id="Linking_CSS_to_HTML">
<header class="header">Linking CSS to HTML</header>
<p>Before you can get started with customizing the style of your HTML document you have to link the two together. You do this by entering a link element within the head of your HTML document like this but with the opening and closing of the elements:
 <p class="box"><span class="browntext">< head ></span>
 <br>
 <span class="browntext">< link></span>
 <span class="redtext">rel=</span>
 <span class="bluetext">"stylesheet"</span>
 <span class="redtext">href</span>=
 <span class="bluetext">"styles.css"</span>
 <br>
 <span class="browntext">< head ></span>
 </p>
 <p>The <span class="browntext">link</span> element defines the relationship between the current document in use and an external source</P>
 <p>The <span class="redtext">rel</span> attribute specifies the relationship between the current document and the linked document.</p>
 <p>The value of <span class="bluetext">"stylesheet"</span> is the external source</p>
 <p>The <span class="redtext">href</span> attribute is specifies the link's destination.</p>
 <p>The href value of <span class="bluetext">"styles.css"</span> is the file source</p>
</header>
</section>
<br> <br> <br> <br>
<section class="main-section" id="CSS_ruleset_structure">
  <header class="header">CSS ruleset structure</header>
This is how a CSS ruleset is coded:
<p class="box">
 <span class="browntext">h1</span>
 <br>
   <span class="redtext">color:</span>
    <span class="bluetext">red;</span>
    <br>
    </p>
 <br>
 <p>* In this example <span class="browntext">h1</span> is the selector,
  <span class="redtext">color</span> is the property, 
  <span class="bluetext">red</span> is the propery value, and the whole middle line of <span class="redtext">color:</span> 
  <span class="bluetext">red;</span> is called the declaration.</p> 
 </p>
</header>
</section>
<br> <br> <br> <br>
<header>
<section class="main-section" id="Selecting_multiple_elements">
<header class="header">Selecting multiple elements</header>
<p>You can select multiple elements that you want to apply one ruleset to by seperating them by a coma.
  </p>
<p class="box">
  <span class="browntext">h1, p, h2</span> {<br>
    <span class="redtext">color</span>:
     <span class="bluetext">red;</span><br>
  }
  </p>
  </header>
</main>
</body>
</html>

How do you share the code on here? I copied my code and pasted it but it converted the code to the text on the project and won’t show the code of the project in for forum.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You will need to add some code elements as required. For eg

<code></code>

This is a code element.

Does using a span element with a class attribute and value around a word not count as a code element?

The example I posted above is a code element. The other things you said are different elements (span element is a span element)

Was there a previous section that talked about code elements and wanted you to use them? I don’t remember learning about code elements before this project

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.