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 HTML5 and CSS3 – Illustrated, 2nd Edition

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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