<nav id="navbar">
<header>CSS Documentation</header>
<ul>
<li>
<a class="nav-link"
href="#Introduction">Introduction
</a>
</li>
<li>
<a class="nav-link"
href="#What_you_should_already_know">What you should already know
</a>
</li>
<li>
<a class="nav-link"
href="#CSS">CSS
</a>
</li>
<li>
<a class="nav-link"
href="#Selectors">Selectors
</a>
</li>
<li>
<a class="nav-link"
href="#Classes">Classes
</a>
</li>
<li>
<a class="nav-link"
href="#Text/Font">Text/Font
</a>
</li>
<li>
<a class="nav-link"
href="#Borders">Borders
</a>
</li>
<li>
<a class="nav-link"
href="#Margin">Margin
</a>
</li>
<li>
<a class="nav-link"
href="#Padding">Padding
</a>
</li>
<li>
<a class="nav-link"
href="#Colors">Colors
</a>
</li>
<li>
<a class="nav-link"
href="#CSS_Variables">CSS Variables
</a>
</li>
<li>
<a class="nav-link"
href="#Media_Queries">Media Queries
</a>
</li>
<li>
<a class="nav-link"
href="#Reference">Reference
</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>
CSS is a very powerful tool that can take a simple piece of HTML and transform it into a captivating experience that will keep users engaged. The font that you are reading right now, in fact, probably offers a more pleasing visual experience than <span class="ugly-text">the default font chosen by your browser.</span> Font choices are, of course, just part of what CSS can do for you. Before we dive into all of its features, let's talk about what you should already know.
</p>
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<article>
<p>
This guide assumes that you have the following basic background:
<ul>
<li>
A general understanding of the Internet and the World Wide Web (WWW).
</li>
<li>
Fundamental knowledge of HyperText Markup Language (HTML).
</li>
<li>
Experience creating a simple HTML web page.
</li>
</ul>
</p>
</article>
</section>
<section class="main-section" id="CSS">
<header>CSS</header>
<article>
<p>
Cascading Style Sheets (CSS) is the language developers use to style an HTML document. It describes how HTML elements should be displayed.
<br>
</p>
<p>
For example: if a web developer wanted their web page to have a black background with white text, they could declare it using CSS code.
<code>body {background-color: black;}
p {color: white;}</code>
</p>
<p>
Try this code out to put your website in "dark mode," to the delight of midnight browsers like myself.
</p>
</article>
</section>
<section class="main-section" id="Selectors">
<header>Selectors</header>
<article>
<p>
Generally, it is more effective to style our HTML element(s) using CSS selectors. CSS selectors are used to "find" (or select) the HTML elements you want to style.
</p>
<p>
We can divide CSS selectors into five categories:
<ul>
<li>
Simple selectors (select elements based on name, id, class)
</li>
<li>
Combinator selectors (select elements based on a specific relationship between them)
</li>
<li>
Pseudo-class selectors (select elements based on a certain state)
</li>
<li>
Pseudo-element selectors (select and style a part of an element)
</li>
<li>
Attribute selectors (select elements based on an attribute or attribute value)
</li>
</ul>
For example: Let's say we wanted our paragraph text to appear red in color. We will select our paragraph by writing "p" and then declare its color as "red" within our {curly brackets}.
<code>p {color: red;}</code>
<span class="color-red">Using selectors is an invaluable tool in CSS.</span>
</p>
<p>
Next, we'll talk about classes.
</p>
</article>
</section>
<section class="main-section" id="Classes">
<header>Classes</header>
<article>
<p>
The class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class. The class attribute uses a period (.) to declare it.
</p>
<p>
I can create a class in CSS by using the following example code:
<code>.color-blue {color: blue;}</code>
Then, I can apply the "color-blue" class to a snippet of code written in HTML.
<code><p class="color-blue">This is a line of blue text.<p></code>
Classes are especially useful when we want to apply similar formatting to multiple elements on our page.
</p>
</article>
</section>
<section class="main-section" id="Text/Font">
<header>Text/Font</header>
<article>
<p>
Text and font styling in CSS encompasses properties including but not limited to:
<ul>
<li>
text-align (sets the horizontal alignment of text)
</li>
<li>
text-decoration (sets text properties to decorations like underline, thickness, style, and color)
</li>
<li>
font-family (specifies the font of a text)
</li>
<li>
font-style (specifies normal, italic, or oblique text)
</li>
<li>
font-size (sets the size of the text)
</li>
</ul>
</p>
<p>
Let's say we'd like our paragraph font to be in Sans-serif, and we'd like it to be 20 pixels large. Here is what that CSS code might look like:
<code>p {font-family: sans-serif; font-size: 20px;}</code>
<span class="huge-sans-serif">It's not especially attractive, but it gets the job done.</span>
</p>
</article>
</section>
<section class="main-section" id="Borders">
<header>Borders</header>
<article> <!--Expand on this article.-->
<p>
Placing borders around our elements can add another level of style that is pleasing to the eye. Border properties allow us to specify the style, width, and color of an element's border.
</p>
<p class="p-border">
Borders are simple ways to add styles to text.
</p>
<p>
Common border declarations include border-width, border-style, border-color, border-radius, and more!
</p>
</article>
</section>
<section class="main-section" id="Margin">
<header>Margin</header>
<article>
<p>
Margins are used to create space around elements, <strong>outside</strong> of any defined borders. CSS has properties for specifying the margin for each side of an element:
<ul>
<li>
margin-top
</li>
<li>
margin-right
</li>
<li>
margin-bottom
</li>
<li>
margin-left
</li>
</ul>
</p>
<p>
All margin properties can have the following values:
<ul>
<li>
auto - the browser calculates the margin
</li>
<li>
length - specifies a margin in px, pt, cm, etc.
</li>
<li>
% - specifies a margin in % of the width of the containing element
</li>
<li>
inherit - specifies that the margin should be inherited from the parent element
</li>
</ul>
</p>
<p>
<strong>Note:</strong> Negative values are allowed.
</p>
</article>
</section>
<section class="main-section" id="Padding">
<header>Padding</header>
<article>
<p>
Padding is used to create space around an element's content, <strong>inside</strong> of any defined borders. With CSS, we have full control over the padding.
</p>
<p>
CSS has properties for specifying the padding for each side of an element:
<ul>
<li>
padding-top
</li>
<li>
padding-right
</li>
<li>
padding-bottom
</li>
<li>
padding-left
</li>
</ul>
</p>
<p>
All padding properties can have the following values:
<ul>
<li>
length - specifies a padding in px, pt, cm, etc.
</li>
<li>
% - specifies a padding in % of the width of the containing element
</li>
<li>
inherit - specifies that the padding should be inherited from the parent element
</li>
</ul>
</p>
<p>
<strong>Note:</strong> Negative values are <strong>not</strong> allowed.
</p>
</article>
</section>
<section class="main-section" id="Colors">
<header>Colors</header> <!--Needs more info.-->
<article>
<p>
CSS colors can be set using the following options:
<ul>
<li>
color names
</li>
<li>
red/green/blue (RGB) values
</li>
<li>
hexadecimal values
</li>
<li>
hue/saturation/lightness (HSL) values (CSS3)
</li>
<li>
hue/whiteness/blackness (HWB) values (CSS4)
</li>
</ul>
</p>
</article>
</section>
<section class="main-section" id="CSS_Variables">
<header>CSS Variables</header><!--Needs more info.-->
<article>
<p>
CSS variables are valuable tools to reuse colors without having to copy/paste them over and over again.
</p>
<p>
The var() function is used to insert the value of a CSS variable.
</p>
<p>
CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
</p>
</article>
</section>
<section class="main-section" id="Media_Queries">
<header>Media Queries</header>
<article>
<p>
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. For example, we could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on. Unfortunately these media types never got a lot of support by devices, other than the print media type.
</p>
<p>
CSS3 extended the CSS2 media types idea: instead of looking for a type of device, they look at the capability of the device.
</p>
<p>
Media queries can be used to check many things, such as:
<ul>
<li>
width and height of the viewport
</li>
<li>
width and height of the device
</li>
<li>
orientation (is the tablet/phone in landscape or portrait mode?)
</li>
<li>
resolution
</li>
</ul>
</p>
<p>
Using media queries is a popular technique for delivering a tailored style sheet to desktops, lapops, tablets, and mobile phones (such as iPhone and Android phones).
</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<p>
All information was referenced from <a target="_blank" href="https://www.w3schools.com/default.asp">w3 schools.</a>
</p>
</article>
</section>
!
