1. Laying out Elements with CSS

2. Objectives Assess the CSS box model Set element width and borders
Set margins and padding
Align elements with float
Control page flow with clear
HTML5 and CSS3 – Illustrated, 2nd Edition

3. Objectives (continued)
Implement fixed positioning
Implement relative positioning
Control stacking order
Implement absolute positioning
HTML5 and CSS3 – Illustrated, 2nd Edition

4. Assess the CSS Box Model
Box model: used by CSS to represent characteristics of every web page element
Treats element as rectangular box
border: border surrounding element
margin: space from border to neighboring/parent element
padding: space between border and element content
HTML5 and CSS3 – Illustrated, 2nd Edition

5. Assess the CSS Box Model (continued)
HTML5 and CSS3 – Illustrated, 2nd Edition

6. Assess the CSS Box Model (continued)
Box model properties
HTML5 and CSS3 – Illustrated, 2nd Edition

7. Assess the CSS Box Model (continued)
CSS units of measure
Relative units: ems, percent, rems
Absolute units: pixels
Commonly used CSS units of measure
HTML5 and CSS3 – Illustrated, 2nd Edition

8. Assess the CSS Box Model (continued)
Size of padding, margin, and border increase the amount of space occupied by an element
Dimensions of these properties not included in specified width / height
Specified width and height refer only to the content of an element
To calculate add the total space, add the width value to the padding, margin, and border values
HTML5 and CSS3 – Illustrated, 2nd Edition

9. Assess the CSS Box Model (continued)
Calculating web page space occupied by an element
HTML5 and CSS3 – Illustrated, 2nd Edition

10. Assess the CSS Box Model (continued)
Collapse: When bottom margin of one element is adjacent to top margin of another, the margins combine to the size of the larger of the two
Affects element size planning
Separate property for each side of padding and margin, e.g.
padding-top: 2px;
margin-right: 1em;
HTML5 and CSS3 – Illustrated, 2nd Edition

11. Set Element Width and Borders
Margin, padding, and border are shorthand properties
Assign values to multiple CSS properties
Assign values to all four sides of an element
Assign these values using a single declaration
Can set width, style, or color of any or all sides of an element
HTML5 and CSS3 – Illustrated, 2nd Edition

12. Set Element Width and Borders (continued)
Specific properties for the box model
Reset rule: resets one or more common properties to a common baseline, e.g.
border: 0
HTML5 and CSS3 – Illustrated, 2nd Edition

13. Set Element Width and Borders (continued)
Code with width and border declarations
HTML5 and CSS3 – Illustrated, 2nd Edition

14. Set Element Width and Borders (continued)
width and border declarations rendered in a browser and developer tools opened to show box model
HTML5 and CSS3 – Illustrated, 2nd Edition

15. Set Margins and Padding
Use the shorthand property to assign multiple values
Separate each value with a space
Meaning of different number of values
Assign auto to left and right margins to center the element horizontally
HTML5 and CSS3 – Illustrated, 2nd Edition

16. Set Margins and Padding (continued)
Example of padding using three values and margin using two values
Example of margin set to auto
HTML5 and CSS3 – Illustrated, 2nd Edition

17. Align Elements with float
Page flow: the order of elements in the HTML document
User agents render HTML top to bottom
Easy to create layouts with elements stacked vertically
Use float, clear, and width properties to create columns of text and graphics parallel to each other
Use width property to assign width to each of the columns
HTML5 and CSS3 – Illustrated, 2nd Edition

18. Align Elements with float (continued)
Example of float applied to element
Use float to create multicolumn layouts
HTML5 and CSS3 – Illustrated, 2nd Edition

19. Align Elements with float (continued)
Code with float and result in browser
HTML5 and CSS3 – Illustrated, 2nd Edition

20. Control Page Flow with clear
float gives basic control over layout
clear gives more precise control
Prevents floated elements from being displayed to the left, right, or on the side of another element
clear property values
HTML5 and CSS3 – Illustrated, 2nd Edition

21. Control Page Flow with clear (continued)
Example of clear property
HTML5 and CSS3 – Illustrated, 2nd Edition

22. Control Page Flow with clear (continued)
Code including clear property and how it is rendered in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition

23. Implement Fixed Positioning
fixed positioning keeps an element in the same location, even when the page is scrolled
Use the position property with the value of fixed
Then specify
Horizontal position using left or right
Vertical positing using top or bottom
HTML5 and CSS3 – Illustrated, 2nd Edition

24. Implement Fixed Positioning (continued)
Commonly used position properties
Properties and values for fixed positioning
HTML5 and CSS3 – Illustrated, 2nd Edition

25. Implement Fixed Positioning (continued)
Example showing fixed positioning
HTML5 and CSS3 – Illustrated, 2nd Edition

26. Implement Fixed Positioning (continued)
Code including fixed value and how it is rendered in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition

27. Implement Relative Positioning
Relative positioning: adjusting default position of an element
Preserves space allotted to element in default page flow
Set position property to relative
Style exact location using the properties
left and right for horizontal positioning
top and bottom for vertical positioning
HTML5 and CSS3 – Illustrated, 2nd Edition

28. Implement Relative Positioning (continued)
CSS properties and values for relative positioning
HTML5 and CSS3 – Illustrated, 2nd Edition

29. Implement Relative Positioning (continued)
Implementing relative positioning and page flow
HTML5 and CSS3 – Illustrated, 2nd Edition

30. Implement Relative Positioning (continued)
Code using relative positioning and how it is rendered in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition

31. Control stacking order
Stacking elements: positioning elements so that they can overlap
Additional possibilities for layouts
Applies only to positioned element
Elements placed in new layer
Requires careful planning
Stacking order controlled by values assigned to z-index property
HTML5 and CSS3 – Illustrated, 2nd Edition

32. Control Stacking Order (continued)
Stacking positioned elements
HTML5 and CSS3 – Illustrated, 2nd Edition

33. Control Stacking Order (continued)
Code to stack and how it is rendered in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition

34. Implement Absolute Positioning
Absolute positioning: takes element out of page flow entirely
Allows other elements to flow into space element would have occupied
Set position property to absolute
Style exact location using left, right, top, and bottom properties
Location is calculated relative to closest ancestor element that has position applied to it
HTML5 and CSS3 – Illustrated, 2nd Edition

35. Implement Absolute Positioning (continued)
Absolute positioning and page flow
Properties and values
HTML5 and CSS3 – Illustrated, 2nd Edition

36. Implement Absolute Positioning (continued)
Code to absolutely position an element and the result in a browser
HTML5 and CSS3 – Illustrated, 2nd Edition

37. Summary
Box model: used by CSS to represent characteristics of elements
Treats element as rectangular box
Defines border, margin and padding
Margins of adjacent elements can collapse into one margin
Specify border width, style, and/or color of any or all sides
HTML5 and CSS3 – Illustrated, 2nd Edition

38. Summary (continued)
Use multiple values to assign margin and padding values to different sides
Use float to change the default page flow
Use clear to create a more precise layout
Use float, clear and width to create multicolumn layouts
HTML5 and CSS3 – Illustrated, 2nd Edition

39. Summary (continued)
Fixed positioning: keeps an element in the same position, even when the page is scrolled
Relative positioning: adjusting location of element relative to its page flow location using position property
Space preserved
HTML5 and CSS3 – Illustrated, 2nd Edition

40. Summary (continued)
Use z-index to create a stacking order for elements
Stacked elements are placed in new layers
Absolute positioning: takes elements out of page flow entirely
Other elements reflow into empty space
HTML5 and CSS3 – Illustrated, 2nd Edition