Could someone help me out with figuring out:
- 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.
My code passes except for this problem. I’ve been working on this for over a span of couple of days and I still can’t figure it out.
Your code so far
HTML CODE
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fCC Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<header id="navbar-title">Basic CSS Documentation</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#What_is_CSS">What is CSS?</a>
<a class="nav-link" href="#Anatomy_of_a_CSS_ruleset">Anatomy of a CSS ruleset</a>
<a class="nav-link" href="#Selecting_Multiple_Elements">Selecting Multiple Elements</a>
<a class="nav-link" href="#Different_types_of_selectors">Different types of selectors</a>
<a class="nav-link" href="#CSS:_all_about_boxes">CSS: all about boxes</a>
<a class="nav-link" href="#Reference">Reference</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. </p>
<p>Answering 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>
</article>
</section>
<section class="main-section" id="What_is_CSS">
<header>What is CSS?</header>
<article>
<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.</p>
<ul><code>
p {
color: red;
}
</code></ul>
<p>For example, this CSS selects paragraph text, setting the color to red:</p>
</article>
</section>
<section class="main-section" id="Anatomy_of_a_CSS_ruleset">
<header>Anatomy of a CSS ruleset</header>
<article>
<p>Let's dissect the CSS code for red paragraph text to understand how it works:</p>
<img alt="Selector p declaration of color property to red" src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png"></img>
<p>The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.) Note the names of the individual parts:
<ul><u> Selector :</u> This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example,<kbd> < p ></kbd> elements). To style a different element, change the selector.
</ul>
<ul><u> Declaration :</u> This is a single rule like <kbd>color: red;</kbd>. It specifies which of the element's properties you want to style.
</ul>
<ul><u> Properties :</u> These are ways in which you can style an HTML element. (In this example, color is a property of the<kbd> < p ></kbd> elements.) In CSS, you choose which properties you want to affect in the rule.
</ul>
<ul><u> Property Value :</u> To the right of the property—after the colon—there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many<kbd> color</kbd> values in addition to<kbd> red</kbd> .)</ul>
<ul><u>Note the other important parts of the syntax :</u>
<ul>
<li>Apart from the selector, each ruleset must be wrapped in curly braces. <kbd>( {} )</kbd></li>
<li>Within each declaration, you must use a colon <kbd>( : )</kbd> to separate the property from its value or values.</li>
<li>Within each ruleset, you must use a semicolon <kbd>( ; )</kbd> to separate each declaration from the next one.</li>
</ul>
</ul>
</p>
<p>To modify multiple property values in one ruleset, write them separated by semicolons, like this:</p>
<ul><code>
p {
color: red;
width: 500px;
border: 1px solid black;
}
</code></ul>
</article>
</section>
<section class="main-section" id="Selecting_Multiple_Elements">
<header>Selecting Multiple Elements</header>
<article>
<p>You can also select multiple elements and apply a single ruleset to all of them. Separate multiple selectors by commas. For example:</p>
<ul><code>
p,
li,
h1 {
color: red;
}
</code></ul>
<p>There are many different types of selectors. The examples above use <b>element selectors</b>, which select all elements of a given type. But we can make more specific selections as well. Here are some of the more commom types of selectors:</p>
</article>
</section>
<section class="main-section" id="Different_types_of_selectors">
<header>Different Types of Selectors</header>
<article>
<p>There are many different types of selectors. The examples above use element selectors, which select all elements of a given type. But we can make more specific selections as well. Here are some of the more common types of selectors:</p>
<table>
<tr>
<th>Selector Name</th>
<th>What does it select</th>
<th>Example</th>
</tr>
<tr>
<td>Element selector (sometimes called a tag or type selector)</td>
<td>All HTML elements of the specified type.</td>
<td>
<code>p</code>
selects
<code>< p ></code>
</td>
</tr>
<tr>
<td>ID selector</td>
<td>The element on the page with the specified ID. On a given HTML page, each id value should be unique.</td>
<td>
<code>my-id</code>
selects
<code>< p id="my-id"></code>
or
<code>< a id="my-id"></code>
</td>
</tr>
<tr>
<td>Class selector</td>
<td>The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page.</td>
<td>
<code>.my-class</code>
selects
<code>< p class="my-class"></code>
and
<code>< a class="my-class"></code>
</td>
</tr>
<tr>
<td>Attribute Selector</td>
<td>The element(s) on the page with the specified attribute.</td>
<td>
<code>img[src]</code>
selects
<code>< img src="myimage.png"</code>
but not
<code>< img></code></td>
</tr>
<tr>
<td>Pseudo-class selector</td>
<td>The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.)</td>
<td>
<code>a:hover</code> selects <code>< a></code>, but only when the mouse pointer is hovering over the link.
</td>
</tr>
</table>
<p>There are many more selectors to discover. To learn more, see the MDN <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors guide</a>.</p>
</article>
</section>
<section class="main-section" id="CSS:_all_about_boxes">
<header>CSS: all about boxes</header>
<article>
<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 box model. 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>
</ul>
<img alt="box-model.png" src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics/box-model.png">
</img>
<p>In this section we also use:</p>
<ul>
<li><code>width</code> (of an element).</li>
<li><code>background-color</code>, the color behind an element's content and padding.</li>
<li><code>color</code>, the color of an element's content (usually text).</li>
<li><code>text-shadow</code> sets a drop shadow on the text inside an element.</li>
<li><code>display</code> sets the display mode of an element. (keep reading to learn more)</li>
</ul>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<p><li>All documentation has been directly taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">MDN</a>.</li></p>
</article>
</section>
</main>
</body>
</html>
CSS CODE
html {
display: block;
font-family: 'Playfair Display', serif;
word-spacing: 3px;
justify-content: center;
width: 100%;
height: 100%;
}
header {
font-weight: bold;
font-size: 32px;
padding-top: 2em;
}
@media screen and (max-width: 600px) {
#navbar {
width: 5.5vw;
}
#navbar-title {
font: 16px;
}
.nav-link {
font: 14px;
}
}
#navbar {
position: fixed;
width: 15 vw;
height: 100%;
top: 0;
left: 0;
padding: 1em;
background: #8bcbc6;
margin-right: 2em;
line-height: 60px;
}
#navbar-title {
word-wrap: break-word;
font-size: 20px;
justify-content: center;
padding-top: 0;
}
.nav-link {
word-wrap: break-word;
list-style-type: none;
display: block;
font-size: 18px;
margin: 0;
padding: 0;
}
.nav-link:hover {
color: #c6e5e3;
}
main{
display: block;
position: fixed;
margin-left: 10em;
margin-right: 1em;
height: 100%;
top: 0;
left: 10vw;
margin-right: 1em;
padding: 1em;
}
@media screen and (max-width: 600px) {
width: 5.5vw;
height: auto;
}
p {
padding-left: 1em;
}
kbd {
font-family: 'Courier New', monospaced;
color: #0e3f5c;
}
code{
display: inline-block;
white-space: pre-wrap;
color: #0e3f5c;
background-color: rgb(211,211,211, 0.8);
border: solid #rgb(211,211,211);
padding: 0.5em 1em;
font-weight: bold;
font-size: 14px;
}
img {
margin: 2em;
display: block;
width: 100%;
height: auto;
object-view: scale-down;
max-height: 35%;
max-width: 35%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
word-wrap: break-word;
}
table > code {
justify-content: center;
}
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: