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

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
• f the element as well as the margin,

padding and border

3

Box model diagram

Margin Padding Content Border

• 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

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
• f 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 and max-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 and max-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;

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

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
• nly 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;

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

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
• nly 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
• f 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 is

border: [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-<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;

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

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

• r 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
• mitted, 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 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;

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 is

linear-gradient(direction, color-location, color- location[, color-location]…)

44

Linear-gradient() direction

• The direction can be set to

– T

• right: gradient going from left to right

– T

• left: gradient going from right to left

– T

• bottom: gradient going from top to bottom

– T

• top: gradient going from bottom to top

– <number>deg: to set a gradient that is slanted

by a <number> 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?