IDM 221. Web Design I. IDM 221: Web Authoring I 1

Size: px

Start display at page:

Download "IDM 221. Web Design I. IDM 221: Web Authoring I 1"

Myles Edwards
6 years ago
Views:

1 IDM 221 Web Design I IDM 221: Web Authoring I 1

2 Week 6 IDM 221: Web Authoring I 2

3 The Box Model IDM 221: Web Authoring I 3 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.

4 IDM 221: Web Authoring I 4 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.

5 Calculate height top margin + top border + top padding + height + bottom padding + bottom border + bottom margin IDM 221: Web Authoring I 5 When you calculate the overall height of a box, you use this formula.

6 Calculate width left margin + left border + left padding + width + right padding + right border + right margin IDM 221: Web Authoring I 6 The formula for calculating the overall width is similar. You can use any of the units we've learned.

7 <body> <main> <h1>welcome Home!</h1> <p>welcome to our site. Here's more text... </p> </main> </body> IDM 221: Web Authoring I 7 Let's look at an of how the box model works.

8 <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 I 8 For the body, the margin on all four sides is set to 10 pixels, and we add a 3px border around all four sides. Let's try it in the browser so we can see the styles as they are applied.

9 <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 I 9 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).

10 <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 I 10 The next rule set sets properties for both the h1 and p elements.

11 h1 { /* 0 top, 0 right and left,.25em bottom */ margin: em; padding-left: 15px; p { margin: 0; /* all four sides */ padding-left: 15px; IDM 221: Web Authoring I 11 The next two rule sets set additional properties for each of these elements.

12 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 I 12 Let's review in the browser.

13 Size and space of elements IDM 221: Web Authoring I 13 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.

14 Height and Width Property width height min-width max-width min-height max-height Descrip,on the width of the content area the height of the content area the minimum width of the content area the maximum width of the content area the minimum height of the content area the maximum height of the content area IDM 221: Web Authoring I 14

15 Height and Width width height height: auto; width: auto; IDM 221: Web Authoring I 15 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.

16 Height and Width div { width: 450px; /* absolute width */ width: 75%; /* relative width */ width: auto; /* default */ height: 125px; /* absolute height */ height: 50%; /* relative height */ height: auto; /* default */ IDM 221: Web Authoring I 16 To change that you can use the height and width properties.

17 Min and Max div { min-width: 450px; max-width: 600px; min-height: 120px; max-height: 160px; IDM 221: Web Authoring I 17 You can use the min/max properties to specify the minimum and maximum heights/widths of content areas.

18 <div class="wrapper"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>.wrapper { background-color: blue; color: white; IDM 221: Web Authoring I 18

19 .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 I 19

20 Viewport Units div { height: 100vh; width: 100vw; 1vw = 1% viewport width 1vh = 1% viewport height IDM 221: Web Authoring I 20

21 Margin div { margin-top:.5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em; IDM 221: Web Authoring I 21 You can use individual properties to set individual margins.

22 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 I 22 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.

23 div { margin: 0 auto; IDM 221: Web Authoring I 23 You can also specify the keyword "auto" for any margin. In most cases your use this to center a page in the browser window.

24 .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 I 24 Let's bring back our previous.

25 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 I 25 The properties for setting padding are similar to the properties for setting margins.

26 Reset * { margin: 0; padding: 0; ul { margin: em 1.25em; IDM 221: Web Authoring I 26 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.

27 Box Sizing left margin + left border + left padding + width + right padding + right border + right margin total width IDM 221: Web Authoring I 27 Recall our formula for calculating the width (or height) of a box.

28 Box Sizing 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 I 28

29 IDM 221: Web Authoring I 29 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?

30 Box Sizing: Border Box * { box-sizing: border-box; IDM 221: Web Authoring I 30 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.

31 Borders border border-side border-width border-style border-color border-side-width border-side-style border-side-color IDM 221: Web Authoring I 31 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.

32 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 I 32 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.

33 Border Style div { border-style: solid; border-style: dashed; border-style: inset; IDM 221: Web Authoring I 33 There are various styles available. Here are some s, a full list is available online (check the lecture notes for the URL).

34 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 I 34 Border color can be defined using any of the color definition syntaxes, and again can be specced as one, two, three or four values.

35 Border Shorthand div { border: [width] [style] [color]; border: 2px solid black; IDM 221: Web Authoring I 35 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.

36 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 I 36 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.

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

38 Display IDM 221: Web Authoring I 38

39 Display block inline inline-block flex list-item more IDM 221: Web Authoring I 39 block vs inline vs inline-block

40 Display div { display: block; /* default */ display: inline; display: flex; span { display: inline; /* default */ display: block; IDM 221: Web Authoring I 40

41 display: block header section main div h1, h2, h3, h4 p, ul, ol, li IDM 221: Web Authoring I 41

42 display: inline span a img b, strong i, em IDM 221: Web Authoring I 42 Let's build some examples to see the defaults and then change the property values to non defaults.

43 Backgrounds IDM 221: Web Authoring I 43

44 Backgrounds background background color background image background repeat background-attachment background position background-size IDM 221: Web Authoring I 44 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.

45 Background Color div { background-color: blue; background-color: #808080; background-color: transparent; IDM 221: Web Authoring I 45 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.

46 Background Image div { background-image: url('images/texture.png'); IDM 221: Web Authoring I 46 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.

47 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 I 47 Background repeat is a keyword that specifies if and how images repeated. Possible values are "repeat", "repeat-x", "repeat-y", and "no-repeat".

48 Background A-achment div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed; IDM 221: Web Authoring I 48 Background attachment excepts a keyword that specifies whether an image schools with the document over means any fixed position.

49 Background Posi/on 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 I 49 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.

50 Background div { background: [color] [image] [repeat] [attachment] [position]; background: blue url('images/texture.png') repeat-x; IDM 221: Web Authoring I 50 Background property allows you to set the color, image, repeat, attachment, and position values. (Let's build an ).

51 Background Size div { background-size: auto; /* default */ background-size: 100% 100%; /* width height */ background-size: cover; background-size: contain; IDM 221: Web Authoring I 51 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.

52 Background Gradients div { background: linear-gradient(direction, color %, color %,...); /* Old browsers */ background: rgb(30,87,153); /* FF */ 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%); h#p:// IDM 221: Web Authoring I 52 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.

53 IDM 221: Web Authoring I 53

54 Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/box_model IDM 221: Web Authoring I 54

55 Example IDM 221: Web Authoring I 55

56 IDM 221: Web Authoring I 56

57 IDM 221: Web Authoring I 57

58 IDM 221: Web Authoring I 58

59 IDM 221: Web Authoring I 59

60 IDM 221: Web Authoring I 60

61 For Next Week... IDM 221: Web Authoring I 61 WORK! No specific assignment.

Thinking inside the box

Intro to CSS Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside