 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes: divs, images, headers, paragraphs, lists, and more.

 Each box has one core component (the content area)  Three optional components: borders, padding, and margins.  (Optional components do not appear unless specified in a style sheet)

 Content Area: › the innermost box › Contains the text, images, or other content  Padding Area: › Creates space between the content & border  Borders: › Enclose both the padding & the content area

 Margin: › Creates space surrounding the other three components (borders, padding, content) › Can also provide space between separate elements  For every element you can provide different padding, border, and margin properties to each of the four sides of the box.

 Masthead: used for the main header and branding area for the site  Top_nav: can be used for horizontal navigation  Left_col: a left-hand column  Page_content: an area to the right of the column that holds the site content, both images and text  Container: a div that contains both the left_col and the page_content divs  Footer: a div at the bottom of the page that holds text-based navigation and copyright notice

 Background images are applied through a style rule not directly inserted into an HTML page.  Once you’ve created a style rule to have a background image display in a div, it shows up on all pages that have that div as part of their structure.

 When you add the background-image property to a style rule, you can specify values for 4 properties: › Background-repeat: controls whether & how the image repeats across the element. › Background-attachment: controls whether the image scrolls with the element’s content or stays fixed as the content scrolls over it.

› (X) Background-position: control where the image is placed relative to the element’s left edge. › (Y) Background-position): control where the image is placed relative to the element’s top edge. › Table F-1 page 125 › We want to add background images to the Tradewinds site – page 124

 The select or Eyedropper tool allows you to sample a color or select it by clicking it on your screen.  When you want to exactly match the color in an existing style rule or image, the eyedropper tool is your best bet.

 Web Safe Colors: colors that display reliably on all computer monitors that have 256 colors or less. › Now most generally used for mobile devices (smart phones or handhelds)  Lets Try the Eyedropper tool in our Tradewinds website – page 126

 Predefined swatches appear when you click a color list arrow.  Provide access to basic colors.  Best when specifying basic black & white  Lets try setting a color using swatch in our Tradewinds website – page 128

 Border-style: choose from 11 different options (not all are well-supported by browsers  Border-width: use keywords (thin, medium, or thick) or specify a value in pixels › Best to specify in pixels- different browsers interpret keywords differently  Border- color: choose color by using hex value  Lets create a border in our Tradewinds website – page 130

 Adding margins and padding (white spaces): › looks less cluttered › Improves appearance › Increases readability  Lets fix the margins and padding on our Tradewinds website – page 132

 Webpage footers feature: › Text-only navigation › Copyright notice › Links to reference areas:  Private policy & Contact information  De-emphasize (less noticeable/ not distracting)  Lets fix the footer on our Tradewinds webpage – page 134

 Font Family: prioritized list of fonts (instead of a single font) › In case the visitor’s computer doesn’t have a specific font installed  By default, Expression offers only 3 sets of font-families but you can create your own.

 Web Safe fonts: fonts likely to be available on Windows, MAC, & Linux- based computer systems  Generic font families: part of the CSS specification › Displayed if no other fonts on the list are available › 3 generic font families are consistently understood:  Serif, sans serif, & monospace

 Serif: › such as Times New Roman › has visible strokes at the ends of the character  Sans-serif: › such as Arial › Has no strokes at the end of the character  Monospace: › Such as Courier › Has equal space between characters  Lets add font families to our Tradewinds website – page 136

 Creating interesting styles for heading is a great way to make your site more readable & more visually pleasing.  Lets adjust the headings in our Tradewinds website – page 138

 Complete the Concept Review › Page  Complete the Skills Review › Page  Complete the Real-Life Challenge › Page 145  Prepare for Exam