1. Box Model

2. Follow Ups and Clarifications

3. Topics Multiple fonts, google fonts Understand what you are doing
Komodo edit projects, file structure
Formatting HTML and CSS
Piazza
Repeating questions
Posting private questions
Understand what you are doing
Don’t blindly copy and paste
Nothing extraneous
Font sizes
Default
Use of cm and em
Assignment 1 comments => Project 1 points

4. Font Families Preferable to use: universality
Multiple fonts: use first available

5. Linking to style sheets
Use file name only for same folder
href=“mystyle.css"
Use full url for external
href=“

6. Why external? Google fonts!
google.com/fonts
2 steps
Link to font (second style sheet!)
Use name in CSS

7. Font sizes If you use em, you should define the font size
Default is browser-specific
If you use cm, it’s the same size on any type of display

8. Box Model

9. Box Model
Allows us to place borders, and space elements in relation to other elements
Remember that border must have size, color and style
Here’s where Inspect Element starts being important!

10. Box Model
Margin – clears an area around the border. Does not have a background color – it is transparent
Border – a border that goes around the padding and content. Affected by the background color of the box.
Padding – clears an area around the content. Affected by background color of the box
Content – the content of the box, where text appears.
Don’t forget to give the border some sort of style!
<div> this is a div with some text <br/>
In fact, this text has two lines <div>
div {
width:220px;
padding:10px;
border:5px solid gray;
margin:0px; }

11. A cool new feature Rounded corners on boxes border-radius: 15px;
New with the latest version of CSS
If not supported by a browser, you get square corners!