Web Site Design and Development Lecture 7 CS 0134 Fall 2018 T - PowerPoint PPT Presentation

Web Site Design and Development Lecture 7 CS 0134 Fall 2018 T ues and Thurs 1:00 – 2:15PM

Box Model ● All block elements and some inline elements, like img, are placed inside a box ● This lets you set the height and width of the element as well as the margin, padding and border 2

Box model diagram ● The total height and width of a box is the content area plus the size of the padding, margin and border Content ● All parts of the box model are present even if they are not Padding display to the user Margin Border 3

height and width ● The height and width properties set the height and width of the content area of a block element ● They can both accept absolute and relative values as a well as auto ● Setting width to auto will make the width of the block be the same as the width of the block containing it. This is the default ● Setting the height to auto will make the height of the block be however much vertical space is needed for the content. This is the default 4

height and width continued ● Setting the height or width to a percent will set the height or width to a percent of the containing block’s height or width. ● For this to work, the containing block’s height or width needs to be specifed explicitly. ● If you do not explicitly set the containing block’s height, the percent value is ignored and auto is used. 5

height and width examples ● height: 120px; ● height: 5em; ● height: 50%; ● width: 960px; ● width: 80%; ● width: auto; 6

min-width and max-width ● The min-width and max-width properties set how thin and how wide an element can be if it scales. ● The content area cannot be any narrower than min-width, nor can be it any wider than max-width ● min-width and max-width will accept absolute and relative values 7

Examples of min-width and max-width ● min-width: 10em; ● min-width: 150px; ● max-width: 60%; ● max-width: 600px; 8

min-height and max-height ● The min-height and max-height properties set how short and how tall an element can be if it scales. ● The content area cannot be any shorter than min-height, nor can be it any taller than max-height ● min-height and max-height will accept absolute and relative values ● For max-height, you can specify none to say that there is not a max-height 9

Examples of min-height and max-height ● min-height: 50px; ● min-height: 2em; ● max-height: 75%; ● max-height: none; 10

margin ● margin is a shorthand property that sets the space between the border and the outside edge of the box ● A shorthand property is one like font where you can set the value for multiple individual properties in one ● margin can be set to both absolute and relative values as well as auto ● Auto is used to automatically set the margin. This is commonly used to center something by setting the left and right margins to auto. For this to work, you must also set the width of the element ● If you stack two elements vertically, you end up with collapsed margins. This means that the larger of the two margins is used and the smaller is ignored 11

Margin continued ● Margin can be set 4 diferent ways – One value to set the margin for all 4 sides ● margin: 10px; – T wo values with the frst value specifying the top and bottom margins and the second value specifying the left and right ● margin: 1em auto; – Three values with the frst value specifying the top margin, the second specifying the left and right margins and the third value specifying the bottom margin ● margin: 0.5em 0 1em; – Four values specifying the margin in this order: top, right, bottom and left ● margin: 10px 0 10px 0; 12

Setting one margin at a time ● margin is a shorthand property for the margin-top, margin-right, margin- bottom and margin-left properties ● You can use these properties to set only the margins you wish to set in a particular style rule. ● Like the margin property, these will accept absolute and relative values as well as auto 13

Margin examples ● margin: 5px; ● margin: 1em auto; ● margin-left: 2em; ● Margin-right: 20%; ● margin-top: 1.5em; ● margin-bottom: 20px; 14

padding ● padding is a shorthand property that sets the space between the content and the border of a box ● padding will accept both absolute and relative values ● Unlike margin, elements that are stacked do not have their padding collapsed. As such, if you set the top and bottom margin to 0, you can use padding to space elements vertically 15

Padding continued ● Like margin, padding can be set 4 diferent ways – One value to set the padding for all 4 sides ● padding: 10px; – T wo values with the frst value specifying the top and bottom padding and the second value specifying the left and right ● padding: 1em 1.5em; – Three values with the frst value specifying the top padding, the second specifying the left and right padding and the third value specifying the bottom padding ● padding: 0.5em 0 1em; – Four values specifying the padding in this order: top, right, bottom and left ● padding: 10px 10px 15px 10px; 16

Setting one padding at a time ● padding is a shorthand property for the padding-top, padding-right, padding-bottom and padding-left properties ● You can use these properties to set only the paddings you wish to set in a particular style rule. ● Like the padding property, these will accept absolute and relative values 17

Padding examples ● padding: 5px; ● padding: 1em auto; ● padding-left: 2em; ● Padding-right: 20%; ● padding-top: 1.5em; ● padding-bottom: 20px; 18

The reset selector ● If you want to have total control over your margins and padding, you can use the reset selector. This sets both the padding and margin to 0. Code * { margin: 0; padding: 0; } 19

Questions? 20

border-width ● border-width is a shorthand property that sets how wide to make the border. ● border-width can be set to an absolute or relative value as well as the keywords thin, medium and thick. – Note: the width of the keywords thin, medium and thick vary between browsers. ● You can set one to four values for border- width to specify the top, right, bottom and left widths in the same formats as margin and padding 21

border-width examples ● border-width: 1px; ● border-width: thick; ● border-width: 0.25em 0.125em; 22

border-style ● border-style is a shorthand property that sets the style of the border ● border-style can be set to dotted, dashed, solid, double, groove, ridge, inset, outset and none. None is the default ● You can set one to four values for border-style to specify the top, right, bottom and left styles in the same formats as margin and padding 23

border-style examples ● border-style: solid; ● border-style: dashed; ● border-style: outset outset inset inset; 24

border-color ● border-color is a shorthand property that sets the color of the border ● border-color will accept a color value in any of the color formats we learned ● If you do not set border-color, the color of the border will match the font color property set for the element ● You can set one to four values for border- color to specify the top, right, bottom and left colors in the same formats as margin and padding 25

border-color examples ● border-color: #000000; ● border-color: teal; ● border-color: hsl(360, 50%, 20%); 26

border ● border is a shorthand property that allows you to set width, style and color in one declaration ● The format for the border property is border: [width] [style] [color]; ● Examples – border: 1px solid blue; – border: 2px dashed #000000; – border: medium ridge; 27

Setting one border at a time ● You can set the top, right, bottom and left borders individually using the border-top, border-right, border-bottom and border-left shorthand properties respectively. The format for these properties is the same as border. ● You can also set the individual parts of an individual border using the border-<side>-<part> properties. The format for these properties are the same as their border-<part> counterpart – Examples ● border-left-width: 2px; ● border-top-color: red; ● border-bottom-style: solid; 28

border-radius ● border-radius is a shorthand property that gives borders a rounded corner ● border-radius can accept absolute and relative values for how long to make the rounded corner. ● Border-radius has two formats – One value to set all four radii to ● border-radius: 20px; – Four values to set the top left, top right, bottom right and bottom left radii in that order ● border-radius: 1em 2em 3em 4em; 29

Setting one border-radius at a time ● You can set the top left, top right, bottom left and bottom right border radii individually using the border- top-left-radius, border-top-right- radius, border-bottom-right-radius and border-bottom-left-radius properties respectively ● These properties can accept absolute and relative values. 30

border-radius examples ● border-radius: 50%; ● border-radius: 25px; ● border-radius: 0 20px 0 20px; ● border-top-left-radius: 1em; ● border-bottom-right-radius: 0; 31