Web Site Design and DevelopmentLecture 7

CS 0134Fall 2018

Tues and Thurs1:00 – 2:15PM

2

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

3

Box model diagram

Margin

Padding

Content

Border

● The total height andwidth of a box is thecontent area plus thesize of the padding,margin and border

● All parts of the boxmodel are presenteven if they are notdisplay to the user

4

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

5

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.

6

height and width examples

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

7

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

8

Examples of min-width andmax-width

● min-width: 10em;● min-width: 150px;● max-width: 60%;● max-width: 600px;

9

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

10

Examples of min-height andmax-height

● min-height: 50px;● min-height: 2em;● max-height: 75%;● max-height: none;

11

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

12

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;

13

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

14

Margin examples

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

15

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

16

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;

17

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

18

Padding examples

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

19

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;}

20

Questions?

21

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

22

border-width examples

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

23

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

24

border-style examples

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

inset;

25

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

26

border-color examples

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

27

border

● border is a shorthand property that allows you to set width, style and color in one declaration

● The format for the border property isborder: [width] [style] [color];

● Examples– border: 1px solid blue;– border: 2px dashed #000000;– border: medium ridge;

28

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-- properties. The format for these properties are the same as their border- counterpart– Examples

● border-left-width: 2px;● border-top-color: red;● border-bottom-style: solid;

29

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;

30

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.

31

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;

32

box-shadow

● The box-shadow property adds a shadow the border of your box.

● box-shadow has the following formatbox-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

33

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;

34

Questions?

35

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);

36

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”);

37

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;

38

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;

39

background-position

● The background-position property sets where in the element’s background that the background image should be placed

● The format for the background-position 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.

40

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

41

background-position examples

● background-position: right top;● background-position: bottom;● background-position: 50px 50px;

42

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 isbackground: [color] [image] [repeat] [attachment] [position];

● Examples:– background: blue;– background: black url(“images/strips.png”);– background: #123456 url(“bg.png”) repeat-y fxed top

right;

43

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 islinear-gradient(direction, color-location, color-location[, color-location]…)

44

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– deg: to set a gradient that is slanted

by a of degrees

45

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 color-locations 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.

46

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.

47

linear-gradient as a background-image

● 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

48

Questions?

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40Slide 41Slide 42Slide 43Slide 44Slide 45Slide 46Slide 47Slide 48