Box Model

Follow Ups and Clarifications

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

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

Linking to style sheets Use file name only for same folder href=“mystyle.css" Use full url for external href=“http://www.site/folder/file.css"

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

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

Box Model

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!

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

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!