---
# System prepended metadata

title: Lecture 2

---

# Lecture 2
## Basic CSS
- [WEB CSS](https://youtu.be/pcr1jYA9ees)
- change the color of text
- CSS `class`
    - **reference by `.`**
- Font
    - `font-size`
    - `font-family`
        - https://fonts.google.com/
    ```htmlmixed=
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    ```
    - How font should degrade
- Image
    - `width` `height`
    - multiple class:
    ```htmlmixed=
    class="class1 class2"
    ```
    - border
        - `border-color`
        - `border-width`
        - `border-style`
        - `border`
    - `border-radius`
        - trick: `border-radius: 50%`
- Background
    - `background-color`
- `id`
    - **`id` should be unique**
    - style a single element
    - collaboate with Javascript
    - higher priority than `class`
    - **reference ids by `#` instead of `.`**

- **Padding** V.S. **Border** V.S. **Margin**
![](https://i.imgur.com/Xfei12V.png =450x350)
    - `padding`
    - `border`
    - `margin`
        - what if the value of margin is set to negative?
        
- Inheritance
    - try to inheritance styles from body element!
    ```htmlmixed=
    <body>
        <h2>Style me via body element</h2>
    </body>
    ```
    - Prority:
        - inside > outside (children > parent)
        - id > class
        - style (inside the element tag) > id > class

## Display Property


The content are rendered following the `normal flow`.
* **Block element** :  laid out vertically
```display: block```
    ex. ``<div>``, ``<h1>``, ``<p>``<br><br>
* **Inline element** :  laid out horizontally
```display: inline```
    ex. ``<span>``, ``<a>``, ``<img>``
![](https://miro.medium.com/max/2800/1*AFeOAqXNJJdfYAjfXiJ9AQ.jpeg =300x300)

- `display: inline-block`
    - allows to set a width and height on the element
    - does not add a line-break after the element, so the element can sit next to other elements

### Wrap up a little bit
- body
```htmlmixed=
<div>
    <p>
        I am a basic block level element. My adjacent block level
        elements sit on new lines below me.
    </p>

    <p>
        By default we span 100% of the width of our parent element, and
        we are as tall as our child content. Our total width and height
        is our content + padding + border width/height.
    </p>

    <p>
        We are separated by our margins. Because of margin collapsing,
        we are separated by the width of one of our margins, not both.
    </p>

    <p>
        inline elements <span>like this one</span> and
        <span>this one</span> sit on the same line along with adjacent
        text nodes, if there is space on the same line. Overflowing
        inline elements will
        <span
            >wrap onto a new line if possible (like this one containing
            text)</span
        >, or just go on to a new line if not, much like this image will
        do:
    </p>
    <img src="./Colde-Garage-Logo.jpg" />
</div>
```

- css
```htmlembedded=
div {
    width: 500px;
    margin: 0 auto;
    background-color: yellow;
}

p {
    background-color: silver;
    border: 2px solid rgb(255, 84, 104);
    padding: 10px;
    margin: 10px;
}

span {
    background: white;
    border: 1px solid black;
}
```

### Position
The position property specifies the type of positioning method used for an element.
- `static` : default (following the normal flow)
- `absolute` : positioned relative to the **nearest positioned** ancestor
- `relative` : positioned relative to its normal position
    - The origin place won't be replaced!!
    - See the difference!
        - create a div to show the difference!
    ```htmlmixed=
    div {
        width: 450px;
        height: 100px;
        background-color: green;
        position: relative;
        top: -20px;
        /* top: 70.8px */
    }
    ```
    

- `fixed` : positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled
    - use button to show its difference between absolute

### Stacking Order (from bottom to top)
1. The background and borders of the root element `<html>`
2. Descendant non-positioned blocks, in order of appearance in the HTML
3. Descendant positioned elements, in order of appearance in the HTML
- Note: Even if in order, positoned element will have the priority than unpositioned element

- **z-index**
The `z-index` property specifies the stack order of an element.
Default: 0

  The bigger the closer with the user
  Note that elements need to be **positioned** to take effect.