1 / 40

Laying out Elements with CSS

Laying out Elements with CSS. Objectives. Assess the CSS box model Set element width and borders Set margins and padding Align elements with float Control page flow with clear. Objectives (continued). Implement fixed positioning Implement relative positioning Control stacking order

jmcauley
Download Presentation

Laying out Elements with CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) • The CSS box model 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 Widthand 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 Widthand 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 Widthand Borders (continued) • Code with width and border declarations HTML5 and CSS3 – Illustrated, 2nd Edition

  14. Set Element Widthand 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 FixedPositioning • 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) HTML5 and CSS3 – Illustrated, 2nd Edition Stacking positioned elements

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

  34. Implement AbsolutePositioning • 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 AbsolutePositioning (continued) • Absolute positioning and page flow • Properties and values HTML5 and CSS3 – Illustrated, 2nd Edition

  36. Implement AbsolutePositioning (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 borderwidth, 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

More Related