---
# System prepended metadata

title: CSS

---

#  CSS
### Cascading Style Sheet

---

## What is CSS

- Cascading Style Sheets
- style sheet language used for describing the presentation of a document written in markup language
- HTML => Structure
- CSS => Style
- Javascript => Execution

---

## Why use CSS

- Alter the Presentation of a web page
    - font
    - size
    - color
    - space

---

## Three Ways to Define CSS

```html 
- style="color: red"  <!-- inline -->
- <style>p { color: red; }</style> <!-- style -->
- <link href="file.css" rel="stylesheet" type="text/css"> <!-- external file -->
```

---

## CSS Rules

#### [CSS Reference](https://www.w3schools.com/cssref/)

```css
a {
  color: red;
  border: 1px solid #ccc;
  font-family: monospace;
  font-weight: bold;
  text-decoration: none;
}
```

---

## Selectors
[Selector Reference](https://www.w3schools.com/cssref/css_selectors.asp)

```htmlembedded=
<ul>
    <li>Tags</li> <!-- a, body, p, etc... -->
    <li>Id</li> <!-- div id="content"> #content-->
    <li>Class</li><!-- div class="content"> .content-->
    <li>Pseudo Class</li><!-- a:hover, li:first-child -->
</ul>

```

---

## Combining Selectors


- `div p` VS `div > p`
- `div.jobs` VS `div .jobs`
- `body#content` VS `body #content`

---

## Cascading

- [Cascade and Inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance)
- Source order --> multiple classes
- Importance --> override
- Specificity --> weight

---

## Inheritance

- Child elements inherit parent styles unless they have thier own default style.
- Values: `inherit`, `initial`, `unset`

---

## Inherit

```css
/*CSS*/
span {
  color: blue;
  border: 1px solid black;
}

.extra span {
  color: inherit;
}

```
```html
<!--html-->
<div>
 This is <span>a span element</span>
</div>

<div class="extra" style="color:green">
  This is <span>a span element</span> 
</div>
```

---

## Initial

```css
/*CSS*/
div {
  color: red;
  border: 1px solid blue; 
}

h1  {
  color: initial; 
}
```

```html
<!--html-->
<div>
  <h1>Initial</h1>
</div>
```

---

## Web Fonts

- [Web Safe Font Stacks](http://www.cssfontstack.com/)
- Example: `font-family: Arial,"Helvetica Neue",Helvetica,sans-serif`
- Generic Fonts:  `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`

---

## External Web Fonts 

```html 
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
```
- `font-family: 'Spirax', cursive;`
- [Google Fonts](https://fonts.google.com/)
- !!! Watch your load times  !!!
- Depending on the browser, web font text maybe invisible until loaded

---


## The Box Model

Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items

---

## The Box Model Components

Refer to how HTML elements are modeled on the page
- content area
- padding area
- border area
- margin area


---

## Use the Dev Tools

<iframe src="//giphy.com/embed/3hQ0hZDo4QhR6" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/apples-peel-peeler-3hQ0hZDo4QhR6">via GIPHY</a></p>

---

# CSS Float

---

## Float

Allows you to position HTML elements to the left or the right of other elements. 

- left
- right

---
```css
.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}
```
---

## Default Flow

The flow of an HTML page is by default is sinstrodextral (left to right)

---

## Overflow

When and element is to big for the container that wraps it. 

```html
#overflow {
  background: #4CAF50;
  padding: 15px;
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
  overflow: visible;
}
```

##### *NOTE: some elements will skew the overflow*

---

## Wrapping 

Elements can only float inside the size of the parent. 

