Tell us what’s happening:
Hi, I am not matching the requirements number 19 -saying that Each .nav-link should have text that corresponds to the header text of its related section
And 20- . Each .nav-link should have an href attribute that links to its corresponding .main-section
But I have double checked everything and I can not find the errors on my code
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=devide-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>Technical Documentation</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>CSS</h1>
</header>
<table id="navtable">
<thead>
<tr><th>Cascading Style Sheets</th></tr>
</thead>
<tbody>
<tr><td><a class="nav-link" href="#Introduction">Introduction</a></td></tr>
<tr><td><a class="nav-link" href="#Pseudo-classes">Pseudo-Classes</a></td></tr>
<tr><td><a class="nav-link" href="#Combinators">Combinators</a></td></tr>
<tr><td><a class="nav-link" href="#Inheritance">Inheritance</a></td></tr>
<tr><td><a class="nav-link" href="#Specificity">Specificity</a></td></tr>
</tbody>
</table>
</nav>
<main id="main-doc">
<section class="main-section" id="Indrotuction">
<header>
<h1>Indrotuction</h1>
</header>
<p>Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML </p>
<p>Including, XML dialects such as:</p>
<ul>
<li>SVG</li>
<li>MathML</li>
<li> XHTML</li>
</ul>
<p> CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</section>
<section class="main-section" id="Pseudo-Classes">
<header>
<h1>Pseudo-Classes</h1>
</header>
<p>Pseudo-classes are used in CSS selectors to permit formatting based on information that is not contained in the document tree.</p>
<p>One example of a widely used pseudo-class is<code>:hover</code>which identifies content only when the user "points to" the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in <code>a:hover</code> or <code>#elementid:hover</code>.</p>
<p>A pseudo-class classifies document elements, such as <code>:link</code> or <code>:visited</code>, whereas a pseudo-element makes a selection that may consist of partial elements, such as <code>::first-line</code> or <code>::first-letter</code>.</p>
</section>
<section class="main-section" id="Combinators">
<header>
<h1>Combinators</h1>
</header>
<p>Multiple simple selectors may be joined using combinators to specify elements by location, element type, id, class, or any combination thereof.[8] The order of the selectors is important. For example</p>
<ul>
<li><code>div .myClass {color: red;}</code> applies to all elements of class myClass that are inside div elements.</li>
<li><code>.myClass div {color: red;}</code> applies to all div elements that are inside elements of class myClass.</li>
</ul>
</section>
<section class="main-section" id="Specificity">
<header>
<h1>Specificity</h1>
</header>
<p>Specificity refers to the relative weights of various rules. It determines which styles apply to an element when more than one rule could apply. Based on the specification, a simple selector (e.g. H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors have a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the "digits" (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121).</p>
<p>Thus the selectors of the following rule result in the indicated specificity:</p>
<table id="table_content">
<thead>
<tr>
<th>Selectors</th>
<th>Specificity</th>
</tr>
</thead>
<tbody>
</tbody>
<tr><th class="right"><code>h1 {color: white;}</code></th><td class="left"> 0, 0, 0, 1</td></tr>
<tr><th class="right"><code>p em {color: green;}</code></th><td class="left">0, 0, 0, 2</td></tr>
<tr><th class="right"><code>.grape {color: red;}</code></th><td class="left">0, 0, 1, 0</td></tr>
<tr><th class="right"><code>p.bright {color: blue;}</code></th><td class="left"> 0, 0, 1, 1</td></tr>
<tr><th class="right"><code>p.bright em.dark {color: yellow;}</code></th><td class="left">0, 0, 2, 2</td></tr>
<tr><th class="right"><code>#id218 {color: brown;}</code></th><td class="left">0, 1, 0, 0</td></tr>
<tr><th class="lastr"><code>style=" "</code></th><td class="lastf">1, 0, 0, 0</td></tr>
</table>
</section>
<section class="main-section" id="Inheritance">
<header>
<h1>Inheritance</h1>
</header>
<p>Inheritance is a key feature in CSS; it relies on the ancestor-descendant relationship to operate. Inheritance is the mechanism by which properties are applied not only to a specified element but also to its descendants.Inheritance relies on the document tree, which is the hierarchy of XHTML elements in a page based on nesting.</p>
<p> Descendant elements may inherit CSS property values from any ancestor element enclosing them. In general, descendant elements inherit text-related properties, but their box-related properties are not inherited.</p>
<p> Properties that can be inherited are color, font, letter spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space, and word-spacing. Properties that cannot be inherited are background, border, display, float and clear, height, and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align, and z-index.</p>
</section>
</main>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
