Tutorial 5 Working with the Box Model

1. Tutorial 5Working with the Box Model

2. Objectives • Understand the box model • Create padding, margins, and borders • Wrap text around an image • Float a block-level element New Perspectives on Blended HTML, XHTML, and CSS

3. Objectives • Use the background properties • Create a background image for a list • Create an external style sheet • Link to an external style sheet New Perspectives on Blended HTML, XHTML, and CSS

4. Understanding the Box Model • The CSS box model describes the boxes that are formed around elements in a Web page • The content area is the area that contains the box content • The box properties are used to add white space and a border around the content • Padding is the white space that surrounds the box content • A border can be placed around the padding • The margin is white space outside the border • Creates breathing room New Perspectives on Blended HTML, XHTML, and CSS

5. Understanding the Box Model New Perspectives on Blended HTML, XHTML, and CSS

6. Understanding the Padding and Margin Properties • Padding properties control the internal white space • Setting padding: To set the padding within an element, use: padding: width; where width is the size of the padding using one of the CSS units of measure. New Perspectives on Blended HTML, XHTML, and CSS

7. Understanding the Padding and Margin Properties • The margin properties control the external white space • Setting margins: To set the margin space around an element, use: margin: width; where width is the size of the margin using one of the CSS units of measure. New Perspectives on Blended HTML, XHTML, and CSS

8. Understanding the Padding and Margin Properties New Perspectives on Blended HTML, XHTML, and CSS

9. Understanding the Padding and Margin Properties • Border properties place a decorative border around the contents of an element New Perspectives on Blended HTML, XHTML, and CSS

10. Understanding the Padding and Margin Properties • Setting the appearance of all four borders at once • To set the border width, use: border-width: width; where width is one of the CSS units of measure. • To set the border color, use: border-color: value; where value is a named color, RGB color, or hexadecimal color value. • To set the border style, use: border-style: style; where style is either none, solid, double, dotted, dashed, outset, inset, groove, or ridge. New Perspectives on Blended HTML, XHTML, and CSS

11. Understanding the Padding and Margin Properties • To use the border shorthand property, enter: border: style color width; where style is the border style, color is the border color, and width is the border width. New Perspectives on Blended HTML, XHTML, and CSS

12. Using the Float Property • The CSS classification properties allow you to control how to display and position an element, and how to control visibility • Float property • Clear property • Using the float property: To float an element, use the style: float: position; where position is left, right, or none. New Perspectives on Blended HTML, XHTML, and CSS

13. Using the Float Property New Perspectives on Blended HTML, XHTML, and CSS

14. Using the Clear Property • To clear past an element, use the following style: clear: position; where position is left, right, or both. New Perspectives on Blended HTML, XHTML, and CSS

15. Using the Clear Property New Perspectives on Blended HTML, XHTML, and CSS

16. Understanding the Background Properties • The background properties set the background effects for an element • background-image—Place an image behind the contents of an element. The image can be any GIF, PNG, or JPEG image, but the syntax must be in the form url(imagename.gif) • background-color—Place a color behind an element’s contents • background-position—Position an image within an element. Use keywords or pixel, em, or percentage values. New Perspectives on Blended HTML, XHTML, and CSS

17. Understanding the Background Properties • background-repeat—Repeat an image horizontally or vertically (or both) to fill the contents of an element. • background-attachment—Have a background image scroll with the cursor. • background—Use this shorthand property to change all of the background properties. Values (if used) must be listed in this order: image value, color value, position value, repeat value, and attachment value. New Perspectives on Blended HTML, XHTML, and CSS

18. Understanding the Background Properties • The background-position property allows multiple values: New Perspectives on Blended HTML, XHTML, and CSS

19. Understanding the Background Properties • The background-repeat property has copies of an image appear behind an element New Perspectives on Blended HTML, XHTML, and CSS

20. Understanding the Background Properties • The background property allows you to specify any or all of the background properties • image, color, position, repeat, and attachment New Perspectives on Blended HTML, XHTML, and CSS

21. Understanding the Background Properties New Perspectives on Blended HTML, XHTML, and CSS

22. Resolving Style Conflicts • Using different types of style sheets can result in style conflicts • Style precedence determines the order of the cascade in Cascading Style Sheets • Five sources for styles • User-defined styles • Inline styles • Embedded style sheet styles • External style sheet styles • The browser’s style sheet New Perspectives on Blended HTML, XHTML, and CSS

23. Understanding External Style Sheets • Separate file from the Web page • Create a new file for the external style sheet, and include a CSS comment at the top of the page to document the author name and the creation date. Do not enter any XHTML code in this file. • Switch to the XHTML file. In the embedded style sheet, delete the start and end style tags. • In the XHTML file, cut the CSS code from the embedded style sheet and paste the code into the CSS file. New Perspectives on Blended HTML, XHTML, and CSS

24. Understanding External Style Sheets • Save the CSS file with a .css filename extension and close it. • In the <head> section of the XHTML file, enter the following code to link to the external CSS file: <link rel="stylesheet" href="filename.css" type="text/css" /> where filename.css is the name of the external style sheet file. New Perspectives on Blended HTML, XHTML, and CSS

25. Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS

26. Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS

27. Understanding External Style Sheets • To create a link to a CSS file, enter the following code between the <head> </head> tags in an XHTML document: <link rel="stylesheet" href="document.css" type="text/css"> where the rel attribute and its value specify the link to a style sheet file, the href attribute and its value identify the CSS file that is the source of the style code, and the type attribute and its value identify a text file. New Perspectives on Blended HTML, XHTML, and CSS

28. Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS