idm 221 - drexel westphaldigm.drexel.edu/crs/idm221/presentations/pdf/idm221-06-box_model.pdfsize...
TRANSCRIPT
![Page 1: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/1.jpg)
IDM 221Web Design I
IDM 221: Web Authoring I1
![Page 2: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/2.jpg)
When a browser displays a web page, it places each HTML block element in a box. That makes it easy to control the spacing, borders, and other formatting for elements like headers, sections, footers, headings and paragraphs. Some inline elements like images are placed in a box as well. To work with boxes, you use the CSS box model.
The Box Model
IDM 221: Web Authoring I2
![Page 3: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/3.jpg)
This figure shows how the box model works. By default the box for a block element is as wide as the block that contains it and as tall as it needs to be based on its content. However, you can explicitly specify the size of the content area for a block element by using the height and width properties. You can also use other properties to set the borders, margins and padding for a block element.Padding is the space between the content area and a border. Margin is the space between the border and the outside of the box.
IDM 221: Web Authoring I3
![Page 4: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/4.jpg)
When you calculate the overall height of a box, you use this formula.
Calculate height
top margin+ top border+ top padding+ height+ bottom padding+ bottom border+ bottom margin
IDM 221: Web Authoring I4
![Page 5: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/5.jpg)
The formula for calculating the overall width is similar. You can use any of the units we've learned.
Calculate width
left margin+ left border+ left padding+ width+ right padding+ right border+ right margin
IDM 221: Web Authoring I5
![Page 6: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/6.jpg)
Let's look at an of how the box model works.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
IDM 221: Web Authoring I6
![Page 7: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/7.jpg)
For the body, the margin on all four sides is set to 10 pixels, and we add a 3px border around all four sides.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
body { border: 3px dotted black; margin: 10px;}
IDM 221: Web Authoring I7
![Page 8: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/8.jpg)
For the main element, the width is set to 500px, and the margins on all four sides of the box are set to 20 pixels. You can see these margins on the left, top, and bottom of the main box, but not on the right because the width of the section is set to 500px (the margin is there even if you can't see it).
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */}
IDM 221: Web Authoring I8
![Page 9: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/9.jpg)
The next rule set sets properties for both the h1 and p elements.
<body> <main> <h1>Welcome Home!</h1> <p>Welcome to our site. Here's more text... </p> </main></body>
h1, p { border: 1px dashed black; padding: 10px;}
IDM 221: Web Authoring I9
![Page 10: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/10.jpg)
The next two rule sets set additional properties for each of these elements.
h1 { /* 0 top, 0 right and left, .25em bottom */ margin: 0 0 .25em; padding-left: 15px;}p { margin: 0; /* all four sides */ padding-left: 15px;}
IDM 221: Web Authoring I10
![Page 11: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/11.jpg)
Let's review in the browser.
body { border: 3px dotted black; margin: 10px;}main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */}h1, p { border: 1px dashed black; padding: 10px;}h1 { /* .5em top, 0 right and left, .25em bottom */ margin: .5em 0 .25em; padding-left: 15px;}p { margin: 0; /* all four sides */ padding-left: 15px;}
IDM 221: Web Authoring I11
![Page 12: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/12.jpg)
As you can see there are several different properties that determine the size of an element and the spacing between the elements on a page. Next we will cover each of these properties in detail.
Size and space of elements
IDM 221: Web Authoring I12
![Page 13: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/13.jpg)
Height and Width Properties
Property Description
width the width of the content area
height the height of the content area
min-width the minimum width of the content area
max-width the maximum width of the content area
min-height the minimum height of the content area
max-height the maximum height of the content area
IDM 221: Web Authoring I13
![Page 14: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/14.jpg)
The two properties used most often are width and height. By default, these properties are set to a value of "auto". As a result, the size of the content area for the element is automatically adjusted so it's as wide as the element that contains it and as tall as the content it contains.
Height and Width
• width
• height
• height: auto;
• width: auto;
IDM 221: Web Authoring I14
![Page 15: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/15.jpg)
To change that you can use the height and width properties.
Height and Width Values
div { width: 450px; /* absolute width */ width: 75%; /* relative width */ width: 23em; /* relative width */ width: 23rem; /* relative width */ width: auto; /* default */
height: 125px; /* absolute height */ height: 50%; /* relative height */ height: 23em; /* relative height */ height: 23rem; /* relative height */ height: auto; /* default */}
IDM 221: Web Authoring I15
![Page 16: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/16.jpg)
You can use the min/max properties to specify the minimum and maximum heights/widths of content areas.
Min and Max
div { min-width: 450px; max-width: 600px; min-height: 120px; max-height: 160px;}
IDM 221: Web Authoring I16
![Page 17: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/17.jpg)
<!-- HTML --><div class="wrapper"> <p>Lorem ipsum…</p></div>
/* CSS */.wrapper { background-color: blue; color: white;}
IDM 221: Web Authoring I17
![Page 18: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/18.jpg)
.wrapper { background-color: blue; color: white;
width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */}
IDM 221: Web Authoring I18
![Page 19: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/19.jpg)
Viewport Units
div { height: 100vh; width: 100vw;}
1vw = 1% viewport width1vh = 1% viewport height
IDM 221: Web Authoring I19
![Page 20: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/20.jpg)
You can use individual properties to set individual margins.
Margin
div { margin-top: .5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em;}
IDM 221: Web Authoring I20
![Page 21: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/21.jpg)
Instead of setting individual margins though, you can use the margin property to set the margins for all four sides of a box. When you use a shorthand property like this, you can specify one, two, three or four values. If you specify less than four values, the property still sets the margins for all four sides of the box. If you specify one value, that value is set for all four sides. If you specify two vales, the first value applies to the top and bottom, and the second value applies to the left and right. If you specify three values, the first applies to the top, the second applies to the left and the right, and the third applies to the bottom.Values are specified in a specific order: clockwise starting at the top.
div { margin: 1em; /* all four sides */ margin: 0 1em; /* top and bottom 0, right and left 1em */ margin: .5em 1em 2em; /* top: .5em, right and left 1em, bottom 2em */ margin: .5em 1em 2em 1em; /* clockwise starting at top */}
IDM 221: Web Authoring I21
![Page 22: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/22.jpg)
You can also specify the keyword "auto" for any margin. In most cases your use this to center a page in the browser window.
div { margin: 0 auto;}
IDM 221: Web Authoring I22
![Page 23: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/23.jpg)
Let's bring back our previous.
.wrapper { background-color: blue; color: white;
width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */
/* 0 on the top and bottom, `auto` on the left and right */ margin: 0 auto;}
IDM 221: Web Authoring I23
![Page 24: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/24.jpg)
The properties for setting padding are similar to the properties for setting margins.
Padding
div { padding-top: 0; padding-right: 1em; padding-bottom: .5em; padding-left: 1em;
padding: 1em; padding: 0 1em; padding: 0 1em .5em; padding: 0 1em .5em 1em;}
IDM 221: Web Authoring I24
![Page 25: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/25.jpg)
By default, the browser applies certain margin/padding values to certain elements. This uses the universal selector to set the margins and padding of all elements to 0. After you code the reset selector, you can get the spacing you want by applying margins and padding to specific elements, which overrides the reset selector value of 0.
Reset
* { margin: 0; padding: 0;}
ul { margin: 0 0 1.5em 1.25em;}
IDM 221: Web Authoring I25
![Page 26: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/26.jpg)
Recall our formula for calculating the width (or height) of a box.
Box Sizing
left margin+ left border+ left padding+ width+ right padding+ right border+ right margin----------------total width
IDM 221: Web Authoring I26
![Page 27: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/27.jpg)
Box Sizing Example
left margin (20px)+ left border (5px)+ left padding (10px)+ width (200px)+ right padding (10px)+ right border (5px)+ right margin (20px)----------------total width (270px)
IDM 221: Web Authoring I27
![Page 28: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/28.jpg)
Wouldn't it be nice if we could define the width of a box and have the box actually be the width we've defined even after we've applied margins and paddings and borders?
IDM 221: Web Authoring I28
![Page 29: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/29.jpg)
Apply the box-sizing property to the universal selector with a value of "border-box" and the browser will now do the math for you and maintain your width/height values even when margin/padding/borders are applied. The browser will calculate the totals and dynamically adjust the width value so that your container with a width value of 200px will actually be 200px even if there's 20px of margins, a 2 pixel border and 10 pixels of padding applied.
Box Sizing: Border Box
* { box-sizing: border-box;}
IDM 221: Web Authoring I29
![Page 30: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/30.jpg)
Next we'll begin applying other formatting to boxes. That includes adding borders and setting background colors and images. These are the properties that can be set to apply borders to boxes.
Borders
borderborder-sideborder-widthborder-styleborder-colorborder-side-widthborder-side-styleborder-side-color
IDM 221: Web Authoring I30
![Page 31: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/31.jpg)
Similar to margin/padding properties, the width of a border can be defined as one, two, three or four values, always starting at the top and rotating clockwise.
Border Width
div { border-width: 2px; border-width: 2px 1px; border-width: 2px 1px 2px; border-width: 2px 1px 2px 1px;}
IDM 221: Web Authoring I31
![Page 32: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/32.jpg)
There are various styles available. Here are some s, a full list is available online (check the lecture notes for the URL).http://www.w3schools.com/cssref/pr_border-style.asp
Border Style
div { border-style: solid; border-style: dashed; border-style: inset;}
IDM 221: Web Authoring I32
![Page 33: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/33.jpg)
Border color can be defined using any of the color definition syntaxes, and again can be specced as one, two, three or four values.
Border Color
div { border-color: black; border-color: black red; border-color: #fff #000 rgb(255,255,255) rgba(0,0,0,0.3);}
IDM 221: Web Authoring I33
![Page 34: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/34.jpg)
The border property has a shorthand for specifying all of the properties in a single rule. The order of the values must be width, then style, then color.
Border Shorthand
div { border: [width] [style] [color]; border: 2px solid black;}
IDM 221: Web Authoring I34
![Page 35: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/35.jpg)
CSS3 includes features for adding rounded corders and shadows to borders. This lets you add graphic effects without the need for images. These features are supported by all modern browsers; older browsers that don't support these properties will simply ignore them.
Rounded Corners and Shadows
div { border-radius: [radius]; /* applies to all four sides */ border-radius: [topLeft] [topRight] [lowerRight] [lowerLeft]; box-shadow: [horizontalOffset] [verticalOffset] [blurRadius] [spread] [color];}
IDM 221: Web Authoring I35
![Page 36: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/36.jpg)
div { color: blue; padding: 20px; text-align: center; width: 360px;
border-radius: 10px 20px 0 20px; border: 5px solid blue; box-shadow: 3px 3px 4px 4px red; /* box-shadow: 3px 3px 20px 4px rgba(0,0,0,0.6); */}
IDM 221: Web Authoring I36
![Page 37: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/37.jpg)
block vs inline vs inline-block
Display
• block
• inline
• inline-block
• flex
• list-item
• more
IDM 221: Web Authoring I37
![Page 38: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/38.jpg)
Display Property
div { display: block; /* default */ display: inline; display: flex;}
span { display: inline; /* default */ display: block;}
IDM 221: Web Authoring I38
![Page 39: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/39.jpg)
display: block
• header
• section
• main
• div
• h1, h2, h3, h4
• p, ul, ol, li
IDM 221: Web Authoring I39
![Page 40: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/40.jpg)
Let's build some examples to see the defaults and then change the property values to non defaults.
display: inline
• span
• a
• img
• b, strong
• i, em
IDM 221: Web Authoring I40
![Page 41: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/41.jpg)
When you set a background, it's display behind the content, padding and border for the box, but it isn't displayed behind the margin. When you specify a background, you can set a background color, a background image, or both. If you set both, the browser displays the background color behind the image. As a result, you can only see the background color if the image has areas that are transparent with the image doesn't repeat.
Background
backgroundbackground–colorbackground–imagebackground–repeatbackground-attachmentbackground–positionbackground-size
IDM 221: Web Authoring I41
![Page 42: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/42.jpg)
Background color is a color value with the word that specifies the color of an elements background. You can also specify the "transparent" keyword if you want the elements behind the element to be visible. This is the default.
Background Color
div { background-color: blue; background-color: #808080; background-color: transparent;}
IDM 221: Web Authoring I42
![Page 43: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/43.jpg)
Background image is a relative or absolute URL that points to an image. You can also specify the keyword "none" if you don't want to display an image. This is the default.
Background Image
div { background-image: url('images/texture.png');}
IDM 221: Web Authoring I43
![Page 44: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/44.jpg)
Background repeat is a keyword that specifies if and how images repeated. Possible values are "repeat", "repeat-x", "repeat-y", and "no-repeat".
Background Repeat
div { background-image: url('images/texture.png'); background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;}
IDM 221: Web Authoring I44
![Page 45: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/45.jpg)
Background attachment excepts a keyword that specifies whether an image schools with the document over means any fixed position.
Background Attachment
div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed;}
IDM 221: Web Authoring I45
![Page 46: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/46.jpg)
Background position except one or two relative or absolute values or keywords that specify the initial horizontal and vertical positions of an image. Keywords are left, center, and right; top, center and bottom. If no position is specified, the default is to place the image in the top left corner of the element.
Background Position
div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; background-position: center top; background-position: 90% 90%; /* 90% from the top and left */}
IDM 221: Web Authoring I46
![Page 47: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/47.jpg)
Background property allows you to set the color, image, repeat, attachment, and position values. (Let's build an ).
Background Shorthand
div { background: [color] [image] [repeat] [attachment] [position]; background: blue url('images/texture.png') repeat-x;}
IDM 221: Web Authoring I47
![Page 48: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/48.jpg)
The background-size property specifies the size of the background images. auto is the default value. The background-image contains its width and height.cover: scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
Background Size
div { background-size: auto; /* default */ background-size: 100% 100%; /* width height */ background-size: cover; background-size: contain;}
IDM 221: Web Authoring I48
![Page 49: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/49.jpg)
CSS3 includes a feature for linear gradients. At present, all modern browsers provide at least basic support for this feature. Except for Internet explorer, browsers support this feature with properties that are prefixed by -webkit for Safari and Chrome, and -moz for Firefox and Opera. Luckily, we can use some tools to help write this code for us.
Background Gradients
div { background: linear-gradient(direction, color %, color %, ...);
/* Old browsers */ background: rgb(30,87,153); /* FF3.6-15 */ background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
}
• http://www.colorzilla.com/gradient-editor/
IDM 221: Web Authoring I49
![Page 50: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/50.jpg)
IDM 221: Web Authoring I50
![Page 51: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/51.jpg)
Exercise !
http://digm.drexel.edu/crs/IDM221/exercises/box_model
IDM 221: Web Authoring I51
![Page 52: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/52.jpg)
Example
IDM 221: Web Authoring I52
![Page 53: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/53.jpg)
IDM 221: Web Authoring I53
![Page 54: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/54.jpg)
IDM 221: Web Authoring I54
![Page 55: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/55.jpg)
IDM 221: Web Authoring I55
![Page 56: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/56.jpg)
IDM 221: Web Authoring I56
![Page 57: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/57.jpg)
IDM 221: Web Authoring I57
![Page 58: IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-06-box_model.pdfSize and space of elements IDM 221: Web Authoring I12. Height and Width Properties Property](https://reader034.vdocuments.us/reader034/viewer/2022042315/5f03d4247e708231d40af812/html5/thumbnails/58.jpg)
For Next Week
IDM 221: Web Authoring I58