I Have all the requirements checked off except 1. Any help would be appreciated :
You should have at least five
codeelements that are descendants of.main-sectionelements.
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> ♦ 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> ♦ Allows you to make more detailed edits so you can customize your site.</li><br>
<li> ♦ 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> ♦ 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> ♦ 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>
