Web Site Design and Development Lecture 7 CS 0134 Fall 2018 Tues 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 Content Padding Margin The total height and width of a box is the content area plus the size of the padding, margin and border All parts of the box model are present even if they are not display to the user 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; Two 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, marginbottom 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; Two 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 borderwidth 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 bordercolor 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 bordertop-left-radius, border-top-rightradius, 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
box-shadow The box-shadow property adds a shadow the border of your box. box-shadow has the following format box-shadow: horizontal-ofset vertical-ofset [blur-radius] [spread] [color] Horizontal-ofset: how far left or right Vertical-ofset: how far up and down Blur-radius: how blurry to make the shadow Spread: how far the blur spreads Color: color of the shadow, defaults to the border color ** Although blur-radius and spread are optional, you cannot set spread without setting blur-radius 32
box-shadow continued The values for horizontal-ofset, vertical-ofset, blur-radius and spread can be absolute or relative values, excluding percent Examples box-shadow: 10px 10px; box-shadow: 5px 5px 2px blue; box-shadow: 5px -10px 2px 4px #33ddee; 33
Questions? 34
background-color The background-color property sets the background color for the content, padding and border sections of an element background-color will accept a color value in any of the color formats we learned as well as transparent. Transparent is the default. Do not use a background color that will make text on top of it hard to read. Examples background-color: green; background-color: rgb(230, 16, 135); 35
background-image The background-image property sets a background image for the content, padding and border sections of an element Background-image can be set to url() or none url() accepts relative and absolute URLS in between the parentheses Do not use a background image that will make text on top of it hard to read. Example background-image: url( images/wallpaper.png ); 36
background-repeat The background-repeat property sets if a background image should repeat and in which direction if the image is not large enough to cover the entire background of an element. background-repeat can be set to the keywords Repeat: repeat in both directions (this is the default) Repeat-x: repeat horizontally Repeat-y: repeat vertically No-repeat: do not repeat Example background-repeat: repeat-y; 37
background-attachment The background-attachment property specifes if a background image scrolls with the page or remains in a fxed position background-attachment can be set to scroll and fxed to have the image scroll or remain fxed respectively. The default is scroll Example background-attachment: fxed; 38
background-position The background-position property sets where in the element s background that the background image should be placed The format for the backgroundposition property is background-position: [horizontal-position] [vertical-position]; If either horizontal-position or vertical-position is omitted, it will default to center for the missing part. 39
background-position continued The values for horizontal-position can be The keywords left, center, right An absolute or relative value specifying how far from the left side of the element that the image should be positioned The value for vertical-position can be The keywords top, center and bottom An absolute or relative value specifying how far from the top of the element that the image should be positioned 40
background-position examples background-position: right top; background-position: bottom; background-position: 50px 50px; 41
background background is a shorthand property that lets you set the color, image, repeat, attachment and position values in one declaration The format for background is background: [color] [image] [repeat] [attachment] [position]; Examples: background: blue; background: black url( images/strips.png ); background: #123456 url( bg.png ) repeat-y fxed top right; 42
linear-gradient() Another option for background-image is linear-gradient(). linear-gradient() will create a gradient using the colors you specify The format for linear-gradient is linear-gradient(direction, color-location, colorlocation[, color-location] ) 43
Linear-gradient() direction The direction can be set to To right: gradient going from left to right To left: gradient going from right to left To bottom: gradient going from top to bottom To top: gradient going from bottom to top <number>deg: to set a gradient that is slanted by a <number> of degrees 44
Linear-gradient() color-location linear-gradient() works by setting a series of color-locations and blending the colors between each color-location You must have at least two colorlocations to create a gradient however you can have more A color-location is in the format color % where color is the color we want and % is how far into the gradient we want the color to be. 45
linear-gradient() examples linear-gradient(to left, black 0%, white 100%) This places black at the start of the gradient and white at the end. The browser then gradually blends the colors from black to white linear-gradient(30deg, blue 0%, white 50%, yellow 100%) This places blue at the start, white in the middle and yellow at the end. Between blue and white, the browser gradually blends the colors from blue to white and between white and yellow, the browser gradually blends the colors from white to yellow. The entire gradient additionally slanted 30 degrees. 46
linear-gradient as a backgroundimage background-image: linear-gradient(to bottom, #f0000 0%, #00f00 50%, #0000f 100%); The book has a good example of setting background-image to stripes using linear-gradient 47
Questions? 48