1. Layout with Styles Castro Chapter 11

2. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or CSS. However, CSS styles can be updated in a central location and consequently affect changes across your entire site. This cannot be accomplished with tables. Additionally, CSS separates formatting & style rules from the content of your page.

3. Structuring Your Pages Divide your page into logical sections using the tag (ex: “header”, “main”, “footer”) Place your content in the order that would be most useful if CSS were not used. Use header elements (h1, h2,…) consistently throughout your pages.

4. Structuring Your Pages (2) Window document body div “header” div “main” div “footer”

5. The Box Model Every element has an invisible box around it. The invisible box has four parts to it: Content area Padding Border Margin

6. The Box Model Examples W3C Box Model Specifications ILoveJackDaniels.com (Simplified Model) HicksDesign 3D Box Model

7. Positioning With CSS We can leverage the power of CSS to help us position our elements in our pages. 4 Ways to Position an Element Box 1. Static: leaves the box where it is found in the flow of the page. 2. Absolute: places the box exactly where you want it on the page with respect to its parent. 3. Fixed: place the box in a fixed location in the browser window. 4. Relative: places the box relative to its natural position. Z-Index: determines the stacking order of overlapping boxes.

8. Changing Backgrounds We can change the backgrounds of our boxes. The following CSS rule creates a background image of an avacado that does not repeat and will always appear at the top left corner of the screen. The background color of the page is green.

9. Setting Box Width / Height The code below sets the “main” division to a width and height of 90% of a browser’s window. As a user resizes the browser window the “main” division will stretch.

10. Setting Margins The code below demonstrates several possible options for setting the margins around a box. Note: the value must be set in clockwise order (top, right, bottom, left).

11. Setting Padding The code below demonstrates several possible options for setting the padding around a box. Note: the value must be set in clockwise order (top, right, bottom, left).

12. Absolute Positioning Places your box anywhere on a page you choose, with respect to its parent.

13. Fixed Positioning Places your box at a fixed location on the page. As a user scrolls through your page, the image does not move from its affixed location. The following code forces content to stay at the top left corner of the browser.

14. Float Positioning Forces your box to the right or left of your text (and other elements) on your page.