# 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.