# Basics of CSS (and how they relate to D2L)
## Basic structure of CSS
### What is CSS and how does it work?
First off, a definition: ***CSS*** stands for ***Cascading Style Sheet***. In web development, it's part of what we can consider the main three along with HTML and Javascript.

Essentially, HTML is the content, Javascript is the behavior, and CSS is the appearance. Everything becomes encapsulated in the HTML of a web page through linking together the elements for the browser to read.

Thus, it becomes important that the CSS references specific elements (or groups of elements) within the HTML to target with stylistic changes.

Take the below snippet of HTML:

<div id="placeHolder" class="textContent">
    <p>Content content content lorem ipsum etc. </p>
</div>

In CSS, there are ways to
1. Select the individual div element by calling the id "placeHolder" (#placeHolder)
2. Select this content and others that you've grouped into the common class "textContent" (.textContent)
3. Select all elements of one type (i.e. div, p, div > p, div.textContent, div p, and many more!)

[Here's a list of all the different selectors you can select for.](https://www.w3schools.com/cssref/css_selectors.asp)

The selections that you make will depend on the effect you want to have.

### What does CSS look like?
As with HTML, CSS has a fairly basic structure at it's core. Here's what a simple version would look like using the same HTML elements from above.

#placeHolder {
    background-color: blue;
    display: flex;
    padding: 20px;
    margin: 10px;
}
.textContent {
    color: orange;
    font-family: "Calibri", "Arial", sans-serif;
    font-size: medium;
}
div > p {
    justify-content: center;
    text-align: center;
    margin: auto;
}

Combining this with the HTML looks like this (feel free to click Edit on Codepen to play with the settings):

<iframe height="400" style="width: 100%;" scrolling="no" title="CSS Example" src="https://codepen.io/bleuplaneteer/embed/gOLoqxg?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/bleuplaneteer/pen/gOLoqxg'>CSS Example</a> by bleuplaneteer
(<a href='https://codepen.io/bleuplaneteer'>@bleuplaneteer</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

If some of those tags look familiar from the HTML editor in either Blackboard or Brightspace, that's due to them inclusing these elements in-line through a "style" section in the element. In general, this isn't really recommended, as it makes finding specific style issues and making changes that much more difficult (as I'm sure everyone knows).

That would look something like this:

<div style="background-color: blue; display: flex; padding: 10px;" width="50px" height="auto">
    <p font-family="Calibri" font-size="12px">Content content content lorem ipsum etc. </p>
</div>

You can separate out the elements, but regardless, it's a lot less elegant and much more frustrating to go into something and see this.

The good news: So far, this is **not** how we have to do things in D2L!
## Where to find CSS Properties
The CSS property is what tells the compter which section of the content you're choosing to design. Some examples are things like "background-image", "font-family", and "display". They're the elements that go before the colon in the CSS sections.

As with all types of programming, this is where things like spelling and capitilization really matter. **Everything must perfectly match**.

I can't tell you how many bugs I've caught due so a missing hyphen or switching up a capitalizaiton. With CSS, the list of specific properties is long and you are not in any way expected to memorize them, though I would recommend remembering a few like background-image, background-color, color(which affects the font color), display, font-family.

For everything else, there's [W3Schools Reference Lists](https://www.w3schools.com/cssref/). I recommend Bookmarking this as a reference, but you can also just search in google and it'll give you a good result.
## Specific CSS Libraries
If you look at the HTML templates in D2L, you'll notice that they use a lot of classes like "container-fluid", "col-sm-10 offset-sm-1", "banner-img", and other presets in the HTML editor. This is due to D2L utilizing a library called Bootstrap.

CSS libraries are prepackaged with CSS and Javascript to make pages more responsive, or have a certain feel, and for basic page organization. **They rely on these pre-defined classes**, so we won't edit them ourselves unless we really need to, but you can delete them! For example, I don't really like the "offest-sm-1" class if there's not a banner or if there are elements that aren't offset, so on some pages I might remove that to keep the contents left-aligned. That's pretty much the extent of the edits we'll be asked to do.

Bootstrap comes with a lot of predefined elements we have access to and can add into any of the template sheets. [Here's their website to explore.](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
## Linking custom CSS stylesheets in D2L
Olga has already put all of the CSS templates up on our github, so if you're curious or we decide we want to edit some of them, that's where we can host the page from. We can then add it into any HTML page on D2L (labelled there as web page) by adding a reference link to it in the header of the HTML.

The header element of a page in D2L looks like below and is pretty standard to the courses as a whole:

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Video Lecture</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap CDN CSS -->
	<link rel="stylesheet" href="/shared/HTML-Template-Library/HTML-Templates-V2-Easy/module_templates/../assets/thirdpartylib/bootstrap-3.3.6/css/bootstrap.min.css">

	<!-- Course Styles -->
	<link rel="stylesheet" href="/shared/HTML-Template-Library/HTML-Templates-V2-Easy/module_templates/../assets/css/main.min.css"> </head>

To add a custom stylesheet to the page, we would add another `<link rel="stylesheet" href="https://uneids.github.com/whatever_the_name_of_the_CSS_file_is">` before the closing of the head tag.
:::info
**Note**: The order of the sheets matter as the computer reads from the top down. Whichever sheet is the bottom one will override the previous ones if applicable.
:::

## Learn more
There are so many tutorials much, much better than this one at learning CSS. I personally recommend either [free code camp](https://www.freecodecamp.org/) or the previously mentioned [w3Schools](https://www.w3schools.com/css/default.asp).