Lesson 19 - Spacing & Borders
LEARN
Office Hours
- If you need help please attend office hours
- Connect in person of via zoom
- Check the Canvas page for details
- Wednesday Lab Session 2:30-3:20 in Kepner 0090
Reading for Today
- Read 3.3 Advanced selectors
- Follow Reading Schedule
Today
- CSS Spacing Properties
- CSS Borders Properties
CSS Rule Set
- Example Rule Set
css
h1 {
font-family: serif;
font-size: 120%;
}
Hooking up CSS
- Link the Stylesheet to each HTML page
html
<link rel="stylesheet" href="styles.css">
CSS Property Groups
- Text
- Color
- Spacing
- Borders
Spacing Properties
- margin
- padding
- width
- height
Size of Elements
- width
- height
css
h1 {
width: 500px;
height: 100px;
border: solid 1px gray;
}
Box Model
- Margin is outside
- Padding is inside
css
body {
padding: 50px;
margin: 10px;
border: solid 1px gray;
}
Example Rule Set
```css h1 { margin: 100px; background-color: rgb(20%, 20%, 20%); }
body { padding: 200px; border: solid 2px yellow; } ```
Borders Properties
- border
- border-radius
- box-shadow
Examples
```css h1 { border: solid 1px gray; border-radius: 20px; box-shadow: 2px 2px 5px gray; }
```
BUILD
CSS Demo
- Demo Code
- Study code so that you can reproduce these results
- See Demo on Server