I can’t see the mistake
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<ul>
<header id="first-header">CSS Technical Documentation Page</header>
<li><a class="nav-link" href="#What_is_CSS">What is CSS</a></li>
<li><a class="nav-link" href="#How_does_CSS_affect_HTML">How does CSS affect HTML</a></li>
<li><a class="nav-link" href="#How_CSS_Works">How CSS Works</a></li>
<li><a class="nav-link" href="#About_The_DOM">About The DOM</a></li>
<li><a class="nav-link" href="#Applying_CSS_to_HTML">Applying CSS to HTML</a></li>
<li><a class="nav-link" href="#Whats_Next">Whats Next</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="What_is_CSS">
<header>What is CSS</header>
<article>
<p>
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>
</article>
</section>
<section class="main-section" id="How_does_CSS_affect_HTML">
<header>How does CSS affect HTML</header>
<article>
<p>>Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:</p>
<ul>
<li>A set of properties, which have values set to update how the HTML content is displayed, for example I want my element's width to be 50% of its parent element, and its background to be red.</li>
<li>A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.</li>
</ul>
<p>A set of CSS rules contained within a stylesheet determines how a webpage should look.</p>
<h3>A quick CSS example</h3>
<p>The above descriptions may or may not have made sense, so let's make sure things are clear by presenting a quick example. First of all, let's take a simple HTML document, containing an <code><h1></code> and a <code><p></code> (notice that a stylesheet is applied to the HTML using a <code><link></code> element):</p>
<p class="block lang-html"><<span>!DOCTYPE html</span>>
<br/><<span>html</span>>
<br/>  <<span>head</span>>
<br/>    <<span>meta charset="utf-8"</span>>
<br/>    <<span>title</span>>My CSS experiment<<span>/title</span>>
<br/>    <<span>link rel="stylesheet" href="style.css"</span>>
<br/>  <<span>/head</span>>
<br/>  <<span>body</span>>
<br/>    <<span>h1</span>>Hello World!</<span>h1</span>>
<br/>    <<span>p</span>>This is my first CSS example<<span>/p</span>>
<br/>  <<span>/body</span>>
<br/><<span>/html</span>></p>
<p>Now let's look at a very simple CSS example containing two rules:</p>
<p class="block lang-css"><span class="h">h1</span> {
<br/>  <span>color</span>: blue;
<br/>  <span>background-color</span>: yellow;
<br/>  <span>border</span>: 1px solid black;
<br/>}
<br/><span class="h">p</span> {
<br/>  <span>color</span>: red;
<br/>}
</p>
<p>The first rule starts with an <code>h1</code> selector, which means that it will apply its property values to the <code><h1></code> element. It contains three properties and their values (each property/value pair is called a declaration):</p>
<ol>
<li>The first one sets the text color to blue.</li>
<li>The second sets the background color to yellow.</li>
<li>The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black.
</li>
</ol>
<p>The second rule starts with a <code>p</code> selector, which means that it will apply its property values to the <code><p></code> element. It contains one declaration, which sets the text color to red.</p>
</article>
</section>
<section class="main-section" id="How_CSS_Works">
<header>How CSS Works</header>
<article>
<p>When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:</p>
<ol>
<li>
The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
</li>
<li>The browser displays the contents of the DOM.</li>
</ol>
</article>
</section>
<section class="main-section" id="About_The_DOM">
<header>About The DOM</header>
<article>
<p>A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.</p>
<p>Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.</p>
<h3>DOM representation</h3>
<p>Rather than a long, boring explanation, let's take an example to see how the DOM and CSS work together.</p>
<p>Let's assume the following HTML code:</p>
<p class="block lang-html"><<span>p</span>>
<br/>Let's use:
<br/>  <<span>span></span>Cascading<<span>/span</span>>
<br/>  <<span>span</span>>Style<<span>/span</span>>
<br/>  <<span>span</span>>Sheets<<span>/span</span>>
<br/><<span>/p</span>></p>
<p>In the DOM, the node corresponding to our <code><p></code> element is a parent. Its children are a text node and the nodes corresponding to our <code><span></code> elements. The SPAN nodes are also parents, with text nodes as their children:</p>
<p class="block">P
<br/>├─ "Let's use:"
<br/>├─ SPAN
<br/>|   └─ "Cascading"
<br/>├─ SPAN
<br/>|   └─ "Style"
<br/>└─ SPAN
<br/>    └─ "Sheets"</p>
<p>This is how a browser interprets the previous HTML snippet —it renders the above DOM tree and then outputs it in the browser like so:</p>
<p class="example">Let's use: Cascading Style Sheets</p>
<h3>Applying CSS to the DOM</h3>
<p>Let's say we added some CSS to our document, to style it. Again, the HTML is as follows:</p>
<p class="block lang-html"><<span>p</span>>
<br/>Let's use:
<br/>  <<span>span></span>Cascading<<span>/span</span>>
<br/>  <<span>span</span>>Style<<span>/span</span>>
<br/>  <<span>span</span>>Sheets<<span>/span</span>>
<br/><<span>/p</span>></p>
<p>If we apply the following CSS to it:</p>
<p class="block lang-css"><span class="h">span</span> {
<br/>  <span>border</span>: 1px solid black;
<br/>  <span>background-color</span>: lime;
<br/>}
</p>
<p>The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a <code>span</code> selector, it will apply that rule to each one of the three spans. The updated output is as follows:</p>
<p id="span-example" class="example">Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span></p>
</article>
</section>
<section class="main-section" id="Applying_CSS_to_HTML">
<header>Applying CSS to HTML</header>
<article>
<p>There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others. Here we'll briefly review each one.</p>
<h3>External stylesheet</h3>
<p>You've already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a ".css" extension, and you reference it from an HTML <code><link></code> element. The HTML file looks something like this:</p>
<p class="block lang-html"><!DOCTYPE html>
<br/><<span>html</span>>
<br/>  <<span>head</span>>
<br/>    <<span>meta charset="utf-8"</span>>
<br/>    <<span>title</span>>My CSS experiment<<span>/title</span>>
<br/>    <<span>link rel="stylesheet" href="style.css"</span>>
<br/>  <<span>/head</span>>
<br/>  <<span>body</span>>
<br/>    <<span>h1</span>>Hello World!<<span>/h1</span>>
<br/>    <<span>p</span>>This is my first CSS example<<span>/p</span>>
<br/>  <<span>/body</span>>
<br/><<span>/html</span>></p>
<p>And the CSS file:</p>
<p class="block lang-css"><span class="h">h1</span> {
<br/>  <span>color</span>: blue;
<br/>  <span>background-color</span>: yellow;
<br/>  <span>border</span>: 1px solid black;
<br/>}
<br/><span class="h">p</span> {
<br/>  <span>color</span>: red;
<br/>}
</p>
<p>This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.</p>
<h3>Internal stylesheet</h3>
<p>An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <code><style></code> element, contained inside the HTML head. So the HTML would look like this:</p>
<p class="block lang-html"><<span>!DOCTYPE html</span>>
<br/><<span>html</span>>
<br/>  <<span>head</span>>
<br/>    <<span>meta charset="utf-8"</span>>
<br/>    <<span>title</span>>My CSS experiment<<span>/title</span>>
<br/>  <<span>/head</span>>
<br/>  <<span>body</span>>
<br/>    <<span>h1 style="color: blue;background-color: yellow;border: 1px solid black;"</span>>Hello World!<<span>/h1</span>>
<br/>    <<span>p style="color:red;"</span>>This is my first CSS example<<span>/p</span>>
<br/>  <<span>/body</span>>
<br/><<span>/html</span>></p>
<p>Please don't do this, unless you really have to! It is really bad for maintenance (you might have to update the same information multiple times per document), and it also mixes your presentational CSS information with your HTML structural information, making the CSS harder to read and understand. Keeping your different types of code separated and pure makes for a much easier job for all who work on the code.</p>
<p>The only time you might have to resort to using inline styles is when your working environment is really restrictive (perhaps your CMS only allows you to edit the HTML body.)</p>
</article>
</section>
<section class="main-section" id="Whats_Next">
<header>Whats next</header>
<article>
<p>At this point you should understand the basics of how CSS works, and how browsers deal with it. Here are some great resources to learn more about CSS:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS" target="_blank">Introduction to CSS<a></li>
<li><a href="https://www.w3schools.com/Css/default.asp" target="_blank">CSS Tutorial<a></li>
<li><a href="https://cssreference.io/" target="_blank">Visual Guide to CSS<a></li>
</ul>
</article>
</section>
<section class="main-section" id="#Reference">
<header>Reference</header>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works" target_"blank">Documentation source used for this project</a>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
When I run the tests it says:
The first child of each
.main-sectionshould be aheaderelement.
Each
.main-sectionshould have anidthat matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
Each
.nav-linkshould have anhrefattribute that links to its corresponding.main-section(e.g. If you click on a.nav-linkelement that contains the text “Hello world”, the page navigates to asectionelement with that id).
I rewrote the code at least 4 times, but it seems that I keep making the same mistake. What should change?