ppt ch06
TRANSCRIPT
![Page 1: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/1.jpg)
Web Design Principles
5th Edition
Chapter Six
Using the CSS Box Model
![Page 2: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/2.jpg)
Objectives
When you complete this chapter, you will be able to:
• Understand the CSS visual formatting model
• Use the CSS box model
• Apply the margin properties
• Apply the padding properties
• Apply the border properties
• Use the page layout box properties
• Create a simple page layout
2 Web Design Principles 5th Ed.
![Page 3: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/3.jpg)
The CSS Visual Formatting Model
![Page 4: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/4.jpg)
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
Web Design Principles 5th Ed. 4
![Page 5: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/5.jpg)
5 Web Design Principles 5th Ed.
![Page 6: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/6.jpg)
Specifying the Display Type
• The CSS display property determines the display
type of an element
• You can create block-level, inline, and list type
elements
• The display property is often used to create
horizontal navigation lists:
li {
display: inline;
list-style-type: none;
}
6 Web Design Principles 5th Ed.
![Page 7: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/7.jpg)
7 Web Design Principles 5th Ed.
![Page 8: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/8.jpg)
Using the CSS Box Model
![Page 9: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/9.jpg)
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)
9 Web Design Principles 5th Ed.
![Page 10: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/10.jpg)
10 Web Design Principles 5th Ed.
![Page 11: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/11.jpg)
11
p {
margin: 2em;
padding: 2em;
border: solid thin black;
background-color: white;
}
Web Design Principles 5th Ed.
![Page 12: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/12.jpg)
12 Web Design Principles 5th Ed.
![Page 13: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/13.jpg)
13
p {
background-color: white;
border-left: 6px solid;
margin-left: 2em;
margin-top: 3em;
padding-top: 2em;
padding-right: 2em;
padding-bottom: 1em;
padding-left: 1em;
}
Web Design Principles 5th Ed.
![Page 14: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/14.jpg)
Measurement Values
• The margin, border, and padding properties
allow two types of measurement:
– Length
• Absolute or relative values
– Percentage
• Based on width of containing box
14 Web Design Principles 5th Ed.
![Page 15: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/15.jpg)
Applying the Margin Properties
![Page 16: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/16.jpg)
Applying the Margin Properties
• Margins are always transparent
• Margins enhance the legibility of your text
• You can specify either a length or percentage value
• The following style rule sets all margins to 2 em
p {margin: 2em;}
• You can specify settings for individual margins
p {
margin-left: 2em;
margin-right: 3em;
}
16 Web Design Principles 5th Ed.
![Page 17: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/17.jpg)
17 Web Design Principles 5th Ed.
![Page 18: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/18.jpg)
Negative Margins
• Negative margins can be set to achieve special
effects
• You an 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
18 Web Design Principles 5th Ed.
![Page 19: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/19.jpg)
19 Web Design Principles 5th Ed.
![Page 20: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/20.jpg)
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)
20 Web Design Principles 5th Ed.
![Page 21: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/21.jpg)
21 Web Design Principles 5th Ed.
![Page 22: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/22.jpg)
Zeroing Margins
• To remove the default margin spacing in the
browser, set margin values to zero
body {margin: 0; padding: 0;}
• If you zero margins for the entire page, you must
explicitly set margins for individual elements
22 Web Design Principles 5th Ed.
![Page 23: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/23.jpg)
23 Web Design Principles 5th Ed.
![Page 24: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/24.jpg)
Applying the Padding Properties
![Page 25: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/25.jpg)
Applying 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
• There are five padding properties:
– padding
– padding-top
– padding-right
– padding-bottom
– padding-left
25 Web Design Principles 5th Ed.
![Page 26: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/26.jpg)
26 Web Design Principles 5th Ed.
![Page 27: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/27.jpg)
27 Web Design Principles 5th Ed.
![Page 28: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/28.jpg)
Applying the Border Properties
![Page 29: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/29.jpg)
Applying the Border Properties
• Control the appearance of element borders
– Border displays between the margin and the padding
• There are five basic border properties:
– border
– border-top
– border-right
– border-bottom
– border-left
• A typical border style rule:
border {solid thin black}
29 Web Design Principles 5th Ed.
![Page 30: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/30.jpg)
30 Web Design Principles 5th Ed.
![Page 31: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/31.jpg)
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 — 3D embossed border
• ridge — 3D outward extended border
• inset — 3D inset border (entire box)
• outset — 3D outset (entire box)
• dot-dash — alternating dots and dashes (CSS3 value)
• dot-dot-dash — two dots and a dash (CSS3 value)
• wavy — wavy line border (CSS3 value)
31 Web Design Principles 5th Ed.
![Page 32: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/32.jpg)
32 Web Design Principles 5th Ed.
![Page 33: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/33.jpg)
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
33 Web Design Principles 5th Ed.
![Page 34: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/34.jpg)
34 Web Design Principles 5th Ed.
![Page 35: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/35.jpg)
Specifying Border Color
• The border color property lets you set the color of
the element border
• The value can be hexadecimal RGB or a color
name
35 Web Design Principles 5th Ed.
![Page 36: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/36.jpg)
Using the Border Shorthand Syntax
• 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;}
36 Web Design Principles 5th Ed.
![Page 37: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/37.jpg)
Specifying Rounded Borders
• The CSS3 border radius property lets you create
rounded borders
• This is a CSS3 property that is not yet supported
by all browsers
37 Web Design Principles 5th Ed.
![Page 38: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/38.jpg)
38 Web Design Principles 5th Ed.
![Page 39: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/39.jpg)
Specifying Rounded Borders
• The following rule sets the radius for all four
corners to 1em:
border-radius: 1em;
• You can also use individual properties to set each
corner as shown
border-top-right-radius: 3em;
border-top-left-radius: 3em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
39 Web Design Principles 5th Ed.
![Page 40: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/40.jpg)
Using the Page Layout Box
Properties
![Page 41: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/41.jpg)
Using the Page Layout Box
Properties
• These properties let you control the dimensions
and position of content boxes
• These properties are essential to building CSS
page layouts
• This section covers the following box properties
• width, min-width, max-width
• height, min-height, max-height
• float
• clear
• overflow
41 Web Design Principles 5th Ed.
![Page 42: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/42.jpg)
Setting Element Width
• You can set the horizontal width of an element
using either a length value or percentage
• For fixed layouts, use pixels
• For flexible layouts, use percentages
42 Web Design Principles 5th Ed.
![Page 43: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/43.jpg)
43 Web Design Principles 5th Ed.
![Page 44: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/44.jpg)
Calculating Box Model Width
• The witdh you specify applies to the content only,
not the entire element
• The actual element width is the result of adding the
padding border and margin to the content width
44 Web Design Principles 5th Ed.
![Page 45: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/45.jpg)
45 Web Design Principles 5th Ed.
![Page 46: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/46.jpg)
Setting Element Height
• Height property lets you set the vertical height of an
element
• Normally the content should determine the height
of the element
• Height is useful when you need to create a box
with specific dimensions
div {height: 150px; width: 300px;}
46 Web Design Principles 5th Ed.
![Page 47: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/47.jpg)
Floating Elements
• The float property lets you position an element to
the left or right edge of its containing element
• You can float an image or content box to the left or
right of text
47 Web Design Principles 5th Ed.
![Page 48: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/48.jpg)
48 Web Design Principles 5th Ed.
![Page 49: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/49.jpg)
49 Web Design Principles 5th Ed.
![Page 50: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/50.jpg)
Floating Elements
• #float {
• width: 200px;
• float: left;
• border: 1px solid black;
• padding-bottom: 20px;
• margin: 0px 20px 10px 10px;
• text-align: center;
• background-color: #cfc;
• }
50 Web Design Principles 5th Ed.
![Page 51: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/51.jpg)
Clearing Elements
• The clear property lets you control the flow of text
around floated elements
• Clear is only used when you’re floating an element
• Use the clear property to force text beneath a
floated element rather than next to it
51 Web Design Principles 5th Ed.
![Page 52: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/52.jpg)
52 Web Design Principles 5th Ed.
![Page 53: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/53.jpg)
Controlling the Overflow
• The overflow property lets you control when
content overflows the content box that contains it
• This can happen when the content is larger than
the area that contains it
• Using the height property is the most common
cause of overflow problems
53 Web Design Principles 5th Ed.
![Page 54: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/54.jpg)
54 Web Design Principles 5th Ed.
![Page 55: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/55.jpg)
Creating Box Shadows
• Box shadow property lets you add shadows to
create a 3D effect
• This is a CSS3 property that is not evenly
supported by all browsers
• You set both horizontal and vertical measurement
and color for the shadowed edges of the box p {
margin: 2em;
border: thin solid;
box-shadow: .5em .5em #ccc;
padding: 1em;
}
55 Web Design Principles 5th Ed.
![Page 56: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/56.jpg)
56 Web Design Principles 5th Ed.
![Page 57: Ppt ch06](https://reader034.vdocument.in/reader034/viewer/2022052619/5560ce86d8b42a0d088b4e39/html5/thumbnails/57.jpg)
Summary
• The CSS box model lets you control spacing around
elements
• You can set margin, border and padding values for all
four sides of the box
• For flexible layouts, choose relative length units
• For fixed pages, choose pixel measurements
• The page layout box properties let you create floating
content boxes and wrap text around images
• Remember to use margin, border, and padding
properties to enhance legibility
57 Web Design Principles 5th Ed.