1. Google fonts CSS box model

2. External CSS: Google fonts!
google.com/fonts
2 steps
Link to font (second style sheet!)
Use name in CSS

3. CSS Box Model

4. Every element is in box
With very few exceptions, every element in HTML has a box that it is held in
Can make it visible with background and border

5. 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; }

6. No padding
Content
Padding
Border
Margin

7. No padding or border
Rounded borders
No padding
borders or
margins

8. 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!

9. Box Model & Inspect Element
Using Chrome tools helps you see the different parts

10. Centering
centering the TEXT (within the box) text-align: center; centering the BOX Need to tell it to treat as a block display: block; Must have a width (px or %) display: table; computes it for you center using margin margin-left: auto; margin-right: auto;

11. Centering list items One of the areas with browser differences
In some cases (Firefox), centering text centers the bullet
In other cases (Chrome), centering text does not center the bullet
Solution:
list-style-position: inside;
bullets INSIDE the list item’s formatting

12. 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!