I need help with my code as all the tests except one passed. The hint was: Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
I went through my code, and to me the id matches to the text of its first child but can someone help me on what I need to change.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<nav id="navbar">
<header id="main-header">
<h1>CSS Technical Documentation</h1>
</header>
<ul class="nav-ul">
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#What_is_CSS">What is CSS?</a></li>
<li><a class="nav-link" href="#CSS_Syntax">CSS Syntax</a></li>
<li><a class="nav-link" href="#CSS_Basics">CSS Basics</a></li>
<li><a class="nav-link" href="#Box_Model">Box Model</a></li>
<li><a class="nav-link" href="#Positioning_and_Layout">Positioning and Layout</a></li>
<li><a class="nav-link" href="#Conclusion">Conclusion</a></li>
<li><a class="nav-link" href="#References">References</a></li>
</ul>
</nav>
<body>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header>Introduction</header>
<p>CSS is a stylesheet language which is used to help make websites more aesthetically appealing . It works alongside HTML, which structures the content, while CSS enhances it by defining styles such as colours, fonts, spacing, and positioning. CSS is a core coding language for web development.</p>
</section>
<section id="What_is_CSS" class="main-section">
<header>What is CSS?</header>
<p>
CSS stands for Cascading Styles Sheets is a style sheet language used to define the presentation of a webpage. It allows you to control the layout, colours, fonts, spacing, and positioning of HTML elements. CSS is an essential tool in web development as it separates content (HTML) from design, making it easier to manage and update the appearance of a site.</p>
<p>CSS can be applied in three ways:</p>
<ul class="css-ways">
<li><b>Inline CSS</b>: Styles are added directly to an HTML element using the style attribute.</li>
<li><b>Internal CSS</b>: Styles are defined within a 'style' tag in the 'head' section of an HTML document.</li>
<li><b>External CSS</b>: Styles are written in a separate file (with a .css extension) and linked to the HTML document using a 'link' tag.</li>
</ul>
<br>
<section id="CSS_Syntax" class="main-section">
<header>CSS Syntax</header>
<p>CSS syntax consists of a set of rules that define how HTML elements are styled. It contains a selector, the property and its value.</p>
<br>
<code>selector {
property: value;
}
</code>
<p>An example of the structure:</p>
<code>p {
color: blue;
font-size: 16px;
}
</code>
<ul class="basic-structure">
<li><b>Selector</b>: Targets the HTML element(s) to apply the styles (e.g., p, .class, #id).</li>
<li><b>Property</b>: Specifies the aspect of the element you want to style (e.g., colour, font-size, margin).</li>
<li><b>Value</b>: Defines the specific style to apply to the property (e.g., red, 16px, 10px).</li>
</ul>
</section>
<section id="CSS_Basics" class="main-section">
<header>CSS Basics</header>
<p>CSS provides the tools to control the presentation of HTML elements using selectors and styling rules. Selectors, such as element selectors (p, h1), class selectors (.classname), and ID selectors (#idname), define the scope of styles applied to HTML content. Advanced relationships between elements can be targeted using combinators, like child (>), sibling (+), and descendant selectors (space). For efficiency, grouping selectors (h1, h2, h3) allows multiple elements to share the same styles.
</p>
<p>For Example:</p>
<ul class="selector_eg"
<li><b>Element Selector</b>: Targets all elements of a specific type.</li>
<br>
<code>p {
color: blue; /* All 'p' tags will have blue text. */
}
</code>
<li><b>Class Selector</b>: Targets elements with a specific class.</li>
<br>
<code>.highlight {
background-color: yellow; /* Any element with class="highlight" will have a yellow background.*/
}
</code>
<li><b>ID Selector</b>: Targets an element with a specific ID.</li>
<br>
<code>#header {
font-size: 24px; /* The element with id="header" will have a font size of 24px. */
}
</code>
<li><b>Combinators</b>: Define relationships between elements.</li>
<br>
<code>div > p {
color: green; /* Only 'p' elements that are direct children of 'div' will have green text. */
}
</code>
<li><b>Grouping selectors</b>: apply the same styles to multiple elements.</li>
<br>
<code>h1, h2, h3 {
text-align: center; /* All h1, h2, and h3 elements will use the center alignment. */
}
</code>
</ul>
<br><br>
<p>CSS also enhances design flexibility through <b>colours and units</b>. Colours can be defined using named values (e.g., red), <b>HEX codes</b> (#ff0000), <b>RGB</b> (rgb(red, green, blue)), or <b>HSL</b> (hsl(0, 100%, 50%)). Units of measurement, like <b>px</b> (pixels), %, <b>em, rem</b>, and viewport units (<b>vw, vh</b>), adapt styling to device-specific dimensions and contexts, supporting responsive design.</p>
<p>Here are examples of ways to use colours:</p>
<code>body { <br>
background-color: #f0f8ff; /* HEX */ <br>
color: rgb(50, 50, 50); /* RGB */
}
<br><br>
h1 { <br>
color: hsl(210, 100%, 50%); /* HSL */
}
</code>
<br>
<p>Here are examples of ways to use units:</p>
<code>.container {<br>
width: 80%; /* Percentage */ <br>
max-width: 1200px; /* Pixels */ <br>
padding: 2rem; /* Relative unit */ <br>
font-size: 1.5em; /* Relative to parent */
}
</code>
<br>
<p> For text styling, CSS allows control over fonts ('font-family'), sizes ('font-size'), weights ('font-weight'), and styles ('font-style'), as well as layout-specific properties like 'line-height', 'letter-spacing', and 'text-align'. By combining these features, CSS enables developers to craft visually appealing and highly adaptable web designs.</p>
<p>Text Styling Examples:</li></p>
<ul class="text_styling_eg">
<li><b>Font styles</b>: <br>
<code>
h1 {<br>
font-family: 'Georgia', serif; <br>
font-size: 36px; <br>
font-weight: bold; <br>
}
</code>
<li><b>Spacing and alignment</b>:</li>
<code>
p {
line-height: 1.8; <br>
letter-spacing: 2px; <br>
text-align: justify; <br>
}
</code>
</section>
<section id="Box_Model" class="main-section">
<header>Box Model</header>
<p>In CSS, the term "box model" is used when talking about design and layout.<br>
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:</p>
<img src="https://magnusbenoni.com/content/images/2016/10/css-box-model.png" alt="CSS Box Model" id="box_model_img">
<br>
<p>Explanation of the different parts:</p>
<ul class="parts_box_model">
<li><b>Content</b>: The content of the box, where text and images appear</li>
<li><b>Padding</b>: Clears an area around the content. The padding is transparent</li>
<li><b>Border</b>: A border that goes around the padding and content
</li>
<li><b>Margin</b>: Clears an area outside the border. The margin is transparent</li>
</ul>
<p>The box model allows us to add a border around elements, and to define space between elements.</p>
<p>Here's an example of the box model in action:</p>
<code>
div {<br>
width: 350px; <br>
border: 10px solid pink;<br>
padding: 50px; <br>
margin: 20px; <br>
}
</code>
<p>In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the total width and height of an element, you must also include the padding and borders.</p>
<p>Here's an example that includes width and height where the total width is 260px and total height is 160px: </p>
<code>
.box {<br>
width: 200px; <br>
height: 100px; <br>
padding: 10px; <br>
border: 5px solid blue; <br>
margin: 15px; <br>
}
</code>
<p>Box-sizing property can be used to control how the total width and height of an element are calculated. By default, an element's dimensions are determined by the content size, with additional space for padding and borders, which can make layout management challenging. The box-sizing property changes this behavior, allowing for more predictable and consistent box models.</p>
<p>The Values of box-sizing include:</p>
<ul class="box-sizing">
<li><b>Content-box</b>: The width and height apply only to the <b>content</b> of the element.
Padding and border are <b>not included</b> in the width and height but are added outside them.</li>
<code>div {
box-sizing: content-box; /* Default */ <br>
width: 200px; <br>
padding: 10px; <br>
border: 5px solid black; <br>
}
</code>
<li><b>Border-box</b>: The width and height include the content, padding, and border.
This makes the element's total size easier to manage, as it remains fixed regardless of padding or border changes.</li>
<code>div {<br>
box-sizing: border-box;<br>
width: 200px; <br>
padding: 10px;<br>
border: 5px solid black; <br>
}
</code>
</section>
<section id="Positioning_and_Layout" class="main-section">
<header>Positioning and Layout</header>
<p>CSS positioning and layout are fundamental for structuring and organizing elements on a webpage. The position property controls how an element is placed in the document flow, offering options like:</p>
<ul class="position_list">
<li><b>Static (default)</b>: Elements appear in normal document flow.<br> In the example below shows the elements appear in the normal document flow.</li>
<code>
div {<br>
position: static; <br>
color: black; <br>
}
</code>
<li><b>Relative</b>: Positioned relative to their original location.<br>The example below shows it's positioned relative to its normal flow. Offsets are applied with top, left, right, or bottom:</li>
<code>
div {<br>
position: relative; <br>
top: 20px; /* Moves 20px down from its original position */ <br>
left: 10px; /* Moves 10px to the right */ <br>
}
</code>
<li><b>Absolute</b>: Removed from the document flow and positioned relative to the nearest positioned ancestor. <br> The example shows it's removed from normal flow, positioned relative to the nearest ancestor with position: relative, absolute, or fixed:
</li>
<code>
div {<br>
position: absolute; <br>
top: 50px; /* 50px from the top of the positioned ancestor */ <br>
right: 20px; /* 20px from the right */ <br>
}
</code>
<li><b>Fixed</b>: Stays in place relative to the viewport, even during scrolling. <br>The example shows it's fixed to the viewport, unaffected by scrolling:</li>
<code>div {<br>
position: fixed; <br>
bottom: 0; /* Sticks to the bottom of the viewport */<br>
right: 0; /* Sticks to the right of the viewport */<br>
}
</code>
<li><b>Sticky</b>: Toggles between relative and fixed based on scroll position. <br>The example shows the switches between relative and fixed based on the scroll position:</li>
<code>
div {<br>
position: sticky;<br>
top: 10px; /* Sticks 10px from the top when scrolling */<br>
}
</code>
</ul>
<br>
<p>For layout, CSS provides tools like Flexbox and CSS Grid. Flexbox excels in creating one-dimensional layouts, aligning elements horizontally or vertically with properties like 'justify-content' and 'align-items'. Grid, on the other hand, enables two-dimensional layouts, defining rows and columns for precise alignment and spacing.
<br>
By combining positioning with layout techniques, developers can create dynamic, responsive designs that adapt to different screen sizes and devices.</p>
<p>Layout Techniques</p>
<ul class="layout_techniques">
<li><b>Flexbox Layout</b>: Ideal for one-dimensional layouts such as rows or columns:
</li>
<code>
.container {<br>
display: flex; <br>
justify-content: space-around; /* Distribute items with equal space */ <br>
align-items: center; /* Align items vertically */<br>
}
<br><br>
.item {<br>
flex: 1; /* Makes all items equally growable */<br>
}
</code>
<li>
<b>Grid Layout</b>: Useful for two-dimensional layouts e.g. rows and columns: </li>
<code>
.container {<br>
display: grid; <br>
grid-template-columns: 1fr 2fr 1fr; /* Defines three columns */ <br>
grid-gap: 10px; /* Adds space between items */<br>
}
<br><br>
.item {<br>
grid-column: 2; /* Item spans the second column */<br>
grid-row: 1 / 3; /* Item spans from row 1 to 3 */<br>
}
</code>
</section>
<section id="Conclusion" class="main-section">
<header>Conclusion</header>
<p>
This technical documentation provided an overview of the core essential concepts such as syntax, the box model, positioning, colours, and layout techniques like Flexbox and Grid. With these tools, developers can create visually appealing and responsive web designs that adapt seamlessly across devices. By mastering CSS, you can transform raw HTML into structured and styled pages that enhance user experience.
<br><br>
Happy coding :)</p>
</section>
<br>
<section id="References" class="main-section">
<header>References</header>
<p> All content on this website comes from <a href="https://www.w3schools.com/css/">W3schools</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN Web Docs</a></p>
</section>
</main>
</body>
</html>
