Chapter 9 Using the Box Properties

1. Chapter 9Using the Box Properties Principles of Web Design, 4th Edition

2. Objectives • Understand the CSS visual formatting model • Use the CSS box model • Use the margin properties • Use the padding properties • Use the border properties • Use the special box properties • Apply special box properties Principles of Web Design, 4th Edition

3. The CSS Visual Formatting Model Principles of Web Design, 4th Edition

4. The CSS Visual Formatting Model • Describes how the element content boxes should be displayed by the browser • Based on the hierarchical structure of the HTML document and element display type • Elements fall into three display type categories • Block - (e.g., paragraphs) block elements contain inline boxes that contain element content • Inline - contain the content within the block-level elements; they do not form new blocks of content • List-item - create a surrounding containing box and list-item inline boxes Principles of Web Design, 4th Edition

5. Principles of Web Design, 4th Edition

6. Specifying Element Display Type • The CSS display property determines the display type of an element • The following style rule changes the default display type for an <h1> element from block to inline: h1 {display: inline;} Principles of Web Design, 4th Edition

7. Principles of Web Design, 4th Edition

8. Using the CSS Box Model Principles of Web Design, 4th Edition

9. Using the CSS Box Model • Describes the rectangular boxes that contain content on a Web page • Each block-level element created is displayed as a box containing content in the browser window • Each content box can have margins, borders, and padding (specified individually) Principles of Web Design, 4th Edition

10. Principles of Web Design, 4th Edition

11. Principles of Web Design, 4th Edition

12. Principles of Web Design, 4th Edition

13. Principles of Web Design, 4th Edition

14. Measurement Values • Length • Absolute or relative values • Percentage • Based on width of containing box • The margin, border, and padding properties allow two types of measurement: Principles of Web Design, 4th Edition

15. Using the Margin Properties Principles of Web Design, 4th Edition

16. Using the Margin Properties • Specifying Margins • Shorthand property that sets all four individual margins with one declaration p {margin: 2em;} Principles of Web Design, 4th Edition

17. Principles of Web Design, 4th Edition

18. Principles of Web Design, 4th Edition

19. Specifying the Individual Margin Properties • Sets the individual margin properties p {margin-left: 2em; margin-right:2em;} Principles of Web Design, 4th Edition

20. Principles of Web Design, 4th Edition

21. Negative Margins • Negative margins can be set to achieve special effects • Example: • Override the default browser margin by setting a negative value p {margin-left: -10px;} • Can also be used to remove the default margins from other elements Principles of Web Design, 4th Edition

22. Principles of Web Design, 4th Edition

23. Principles of Web Design, 4th Edition

24. Collapsing Margins • To ensure spacing is consistent, the browser will collapse vertical margins between elements • By default, browser selects the greater of the two margins (top and bottom) Principles of Web Design, 4th Edition

25. Principles of Web Design, 4th Edition

26. Using the Padding Properties • Control the padding area in the box model • Area between the element content and the border • Padding area inherits the background color of the element • If a border is added to an element, padding should be adjusted to increase legibility and enhance the presentation Principles of Web Design, 4th Edition

27. Principles of Web Design, 4th Edition

28. Specifying Padding • Shorthand property that sets all four individual padding values with one rule • The most common usage of the padding property is to state one value for all four padding sides, as shown in the following style rule: p {padding: 2em;} Principles of Web Design, 4th Edition

29. Principles of Web Design, 4th Edition

30. Specifying the Individual Padding Properties • Controls the individual padding areas • The following style sets the top and bottom padding areas for the paragraph, along with complementing borders and a white background: p {padding-top: 2em; padding-bottom: 2em; border-top: solid thin black; border-bottom: solid thin black; background-color: #ffffff;} Principles of Web Design, 4th Edition

31. Principles of Web Design, 4th Edition

32. Using the Border Properties • Control the appearance of borders around elements • Area between the margin and the padding • There are five basic border properties: • border • border-left • border-right • border-top • border-bottom Principles of Web Design, 4th Edition

33. Principles of Web Design, 4th Edition

34. Specifying Border Style Border style keywords: • none — no border on the element (default) • dotted — dotted border • dashed — dashed border • solid — solid line border • double — double line border • groove — 3-D embossed border • ridge — 3-D outward extended border • inset — 3-D inset border (entire box) • outset — 3-D outset (entire box) Principles of Web Design, 4th Edition

35. Specifying Border Style (continued) • p {border-color: red; border-width: 1px; border-style: solid;} Principles of Web Design, 4th Edition

36. Principles of Web Design, 4th Edition

37. Individual Border Styles • Can be specified with the following border-style properties: • border-left-style • border-right-style • border-top-style • border-bottom-style Principles of Web Design, 4th Edition

38. Principles of Web Design, 4th Edition

39. Specifying Border Width • Allows setting border width with either a keyword or a length value • You can use the following keywords to express width: • thin • medium (default) • thick p {border-color: red; border-width: 1px; border-style: solid;} Principles of Web Design, 4th Edition

40. Principles of Web Design, 4th Edition

41. Principles of Web Design, 4th Edition

42. Individual Border Widths • Can be specified with the following border-width properties: • border-left-width • border-right-width • border-top-width • border-bottom-width Principles of Web Design, 4th Edition

43. Specifying Border Color • Allows setting of element border color • To set a border color, use the property as shown in the following rule: p {border-color: red; border-width: 1px; border-style: solid;} Principles of Web Design, 4th Edition

44. Principles of Web Design, 4th Edition

45. Principles of Web Design, 4th Edition

46. Specifying Individual Border • Can be specified with the following border-color properties: • border-left-color • border-right-color • border-top-color • border-bottom-color Principles of Web Design, 4th Edition

47. Using the Border Shorthand Properties • The border property lets you state the properties for all four borders of an element • You can state the border-width, border-style, and border-color in any order • The following rule sets the border-style to solid • The border-weight is 1 pixel; the border color is red • p {border: solid 1px red;} Principles of Web Design, 4th Edition

48. Using the Special Box Properties • Allow floating of images or boxes to the left or right of content on the page • Special box properties: • width • height • float • clear Principles of Web Design, 4th Edition

49. Width • Sets the horizontal width of an element • Width is not intended for normal block-level elements, but you can use it to create floating text boxes or with images div {width: 200px;} Principles of Web Design, 4th Edition

50. Height • Sets the vertical height of an element • Like width, height is not intended for normal block-level elements, but you can use it to create floating text div {height: 150px;} Principles of Web Design, 4th Edition