Technical Documentation Page
<article>
<p>Page Menu</p>
<p>The following contains a list of topics discussed in the body.</p>
</article>
<nav id="navbar">
<header>
<h2><a class="nav-link" href="#navbar">CSS Documentation</a></h2>
<hr>
<ul>
<li><a class="nav-link" href="#Introduction_to_CSS">Introduction to CSS</a></li>
<hr>
<li><a class="nav-link" href="#Why_Use_CSS?">Why Use CSS?</a></li>
<hr>
<li><a class="nav-link" href="#CSS_Brought_Solution">CSS Brought Solution</a></li>
<hr>
<li><a class="nav-link" href="#CSS_Combinators">CSS Combinators</a></li>
<hr>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<img id="logo" src="https://image.shutterstock.com/image-photo/image-260nw-2402069439.jpg" alt="FreeCodeCamp-Logo">
</header>
</section>
<section class="main-section main-page" id="Introduction_to_CSS">
<header><p>Introduction to CSS<p>
</header>
<article>
<p>CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. </p>
<p>CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p>
</article>
<br>
<article><h2>What is CSS?</h2>
<ul>
<li>CSS stands for Cascading Style Sheets</li>
<li>CSS describes how HTML elements are to be displayed on screen, paper, or in other media</li>
<li>CSS saves a lot of work. It can control the layout of multiple web pages all at once</li>
<li>External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Examples
body {
background-color: lightblue;
}
h1{color: white;
text-align: center;}
p{font-family: Sans-serif
font-size: 18px;}
CSS Brought Solution
Man smiling to freedom and new insights
When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
CSS removed the style formatting from the HTML page!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!
</section>
<section class="main-section main-page" id="CSS_Combinators">
<header><h2>CSS Combinators</h2></header>
<p>A combinator is a sign that explains the relationship between selectors.</p>
<p>The table below shows the different combinators in CSS:
<table>
<tr>
<th>Name</th>
<th>Sign</th>
<th>Example</th>
<th>Example Result</th>
</tr>
<tr>
<td>Child Combinator</td>
<td>></td>
<td>div>p</td>
<td>Selects every <p> element that are direct children of a <div> element</td>
</tr>
<tr>
<td>Descendant Combinator</td>
<td>Single space</td>
<td>div p</td>
<td>Selects all <p> elements inside <div> elements</td>
</tr>
<tr>
<td>Selector list</td>
<td>,</td>
<td>div,p</td>
<td>Selects all <div> elements and all <p> elements</td>
</tr>
<tr>
<td>Subsequent-sibling-separator</td>
<td>~</td>
<td>p~ul</td>
<td>Selects all <ul> elements that are preceded by a <p> element</td>
</tr>
<tr>
<td>Selector list</td>
<td>,</td>
<td>div,p</td>
<td>Selects all div elements and all p elements</td>
</tr>
</table>
</p>
<h3>Using Media Queries in CSS</h3>
<p>Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.</p>
<p>Other examples of applications of CSS can be seen <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">here...</a></p>
</section>
<section class="main-section main-page" id="Reference">
<header><h2>Reference</h2></header>
<p><strong>Disclaimer:</strong> The content of this page have been extracted from Mdn docs and w3schools pages online.</p>
<ol>
<li><a href="https://www.w3schools.com/css/css_table.asp">w3schools</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav">mdn web docs</a></li>
</ol>
</section>
</main>
</body>
</html>